How to Capture Images from Webcam in ASP.NET

Capture and save images from web cameras in ASP.NET (C#) with Dynamsoft Camera SDK

Dynamsoft Camera SDK is a browser-based camera library for capturing images from UVC compatible webcams and cameras. You can use the webcam library to rapidly deliver a web-based webcam capture module with cross-browser support on Windows. All the mainstream browsers including Internet Explorer, Microsoft Edge, Chrome, Firefox, Safari are supported.

Try webcam capture in ASP.NET online demo >

Key Features:

  • Preview webcam video in browser
  • Supports basic image editing features including Rotate, Crop, Mirror, Flip, Cut and ChangeImageSize
  • Supports Zoom In/Zoom Out
  • Save/Upload images to your web servers, databases etc.
  • Built-in JPEG, PNG, PDF and TIFF encoder enables you to compress the captured images
  • Image formats supported: BMP, JPEG, PNG, (multi-page) TIFF and (multi-page) PDF
  • Download and upload images through HTTP/HTTPS

Get 30-day free trial

Code Snippet – Webcam Capture in ASP.NET

In this article, we will introduce how to use Dynamsoft Camera SDK to capture images from a webcam in JavaScript, then save the images to a server in an ASP.NET (C#) application.

Download sample code >

Capture Image from Client-Side Web Camera in JavaScript

The following client-side code snippet is written in JavaScript.


var dcsObject, imageViewer;

//Success callback function for dynamsoft.dcsEnv.init()
function onInitSuccess(videoViewerId, imageViewerId) {
    dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId); //Get the Dynamsoft Camera SDK object
    imageViewer = dcsObject.getImageViewer(imageViewerId); //Get a specific image viewer

    var cameraList = dcsObject.camera.getCameraList(); //Get a list of available cameras
    if (cameraList.length > 0) {
        //Call this method to take the ownership back, 
        //in case the first camera in the list is occupied by another Dynamsoft Camera process.
        dcsObject.camera.takeCameraOwnership(cameraList[0]);
        dcsObject.camera.playVideo();
    } else {
        alert('No camera is connected.');
    }
}

//Failure callback function for dynamsoft.dcsEnv.init()
function onInitFailure(errorCode, errorString) {
    alert('Init failed: ' + errorString);
};
 
function onBtnGrabClick() {
    if (!dcsObject) return;

    dcsObject.camera.captureImage('image-container');

    if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
        alert('Capture error: ' + dcsObject.getErrorString());
    }
};

//initiate Dynamsoft Camera SDK object
dynamsoft.dcsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure); 

Save Image to Server (C#)

Dynamsoft Camera SDK is a JavaScript library and it supports ASP.NET, PHP, JSP, ASP, VB.NET, etc. to receive image data on the server side. Here is a simple example for ASP.NET (C#):

<%@ Page Language="C#" %>
<%@ Import Namespace="System.IO" %>
<%
    string strJson = "{\"success\":false}";
    try
    {
        HttpPostedFile file = Request.Files["RemoteFile"];
        string fileName = Request.Form["fileName"];
        if (string.IsNullOrEmpty(fileName)) fileName = file.FileName;
        string filePath = Server.MapPath(".") + "\\UploadedImages\\" + fileName;
        if (!file.ContentType.Contains("text/plain"))
        {
            file.SaveAs(filePath);
        }
        else
        {
            Stream fs = file.InputStream;
            byte[] base64Bytes = new byte[fs.Length];
            fs.Read(base64Bytes, 0, (int) fs.Length);
            StringBuilder base64Str = new StringBuilder();
            foreach (byte b in base64Bytes)
            {
                base64Str.Append((char) b);
            }
            File.WriteAllBytes(filePath, Convert.FromBase64String(base64Str.ToString()));
        }
        strJson = "{\"success\":true, \"fileName\":\"" + fileName + "\"}";
    }
    catch (Exception ex)
    {
        strJson = "{\"success\":false, \"error\": \"" + ex.Message.Replace("\\", "\\\\") + "\"}";
    }
    Response.Clear();
    Response.ContentType = "application/json; charset=utf-8";
    Response.Write(strJson);
    Response.End();
%>

Name the file above as ActionPage.aspx, then you can achieve this uploading function by calling HTTP Upload method in JavaScript:

  var counter,
        url = getCurPagePath() + 'ActionPage.aspx',
        fileName = getFileName(),
        imageType = getCurEnumImageType(),
        bMultiImages = isImgTypeChksChecked(),
        imageIndexArray = [];

    if (bMultiImages) {
        for (counter = 0; counter < imageViewer.image.getCount() ; counter++) imageIndexArray.push(counter);
    } else imageIndexArray.push(imageViewer.image.getIndex());

    imageViewer.io.setHTTPFormFields({ "fileName": fileName });
    imageViewer.io.httpUploadAsync(url, imageIndexArray, imageType, onUploadSuccess, onUploadFailure);

For more examples of how to use different methods, properties, and events, please refer to the API document of Dynamsoft Camera SDK. Meanwhile, you might be interested in implementing webcam as barcode scanner online.

Get a Free Trial & Samples

To try out the above-mentioned features yourself, get started by download the 30-day free trial of Dynamsoft Camera SDK. Some basic samples can be found in the installation folder of the SDK. You can also find more samples in the online code gallery.

If you have any questions on embedding webcam capture into web applications, please leave your comments below.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com