Fully Control Your Webcam in Your Web Browser with Dynamsoft

• Download demo - 3.7 MB

Introduction

DirectShow is a multimedia framework and API produced by Microsoft for software developers to perform various operations with media files or streams. It’s a good option for developers to use the API to interact with the webcams, such as capturing video streams, image profiles, patient charts, customer ID cards and more.

However, anyone who tries to directly use the API finds it rather difficult to learn and implement to their applications. While it might be an essential part for the applications, it’s also just a small part. Therefore it’s not worthwhile spending too much time on it. Developers, especially web application developers, really need this burden taken care of. Bearing this thought in mind, Dynamsoft developed ImageCapture Suite, a browser plug-in for image capture. This SDK is based on the DirectShow API and works well with all USB video device class (UVC) and Windows Image Acquisition (WIA) compatible webcams. Besides capturing images, the SDK also allows you to easily edit and upload the images to your web server or database.

In this article, I’ll share with you the key features of ImageCapture Suite and some sample code. If you are interested, the 30-day free trial download link is also provided.

Key Features

• Capture images & live video streams from UVC and WIA compatible webcams.
• Compatible with IE (both 32-bit and 64-bit), Firefox, Chrome, Safari and Opera on Windows.
• Customize the settings for capturing images including Resolution, Brightness, Contrast, Hue, Saturation and more.
• Edit the captured images in ways like Rotate, Crop, Mirror, Flip, Erase and ChangeImageSize, etc.
• Zoom in/out a selected image.
• Save images to the local disk.
• Upload images to a web server, FTP site or database.
• Support SSL for secure image data transit.
• Support BMP, JPEG, PNG, (multi-page) TIFF and (multi-page) PDF.

Sample Code

In this section, I’ll show you the sample code snippets (you can find the same code in the downloaded sample code) to implement three basic image processing procedures: Image Grab, Edit and Upload.

1. Capture images from your webcam.

DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked; //whether to show the user interface of the webcam
        
    if (DW_InWindows) {
        DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
        DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);

    }
    }
    DWObject.IfDisableSourceAfterAcquire = true;

You can select a webcam driver and capture images from the selected webcam.

Edit the captured images.  

After you have captured the images, you can edit them to better fit your requirements.

//====================Edit Image=====================//

function btnShowImageEditor_onclick() {
    if (!DW_CheckIfImagesInBuffer()) {
        return;
    }
    DWObject.ShowImageEditor();
    DW_TempStr = DW_TempStr +"Show Image Editor: " ;
    if (DW_CheckErrorString()) {
        return;
    }
}

function btnRotateRight_onclick() {
    if (!DW_CheckIfImagesInBuffer()) {
        return;
    }
    DWObject.RotateRight(DWObject.CurrentImageIndexInBuffer);
    DW_TempStr = DW_TempStr +"Rotate right: " ;
    if (DW_CheckErrorString()) {
        return;
}

function btnMirror_onclick() {
    if (!DW_CheckIfImagesInBuffer()) {
        return;
    }
    DWObject.Mirror(DWObject.CurrentImageIndexInBuffer);
    DW_TempStr = DW_TempStr +"Mirror: " ;
    if (DW_CheckErrorString()) {
        return;
    }
}
function btnFlip_onclick() {
    if (!DW_CheckIfImagesInBuffer()) {
        return;
    }
    DWObject.Flip(DWObject.CurrentImageIndexInBuffer);
    DW_TempStr = DW_TempStr +"Flip: " ;
    if (DW_CheckErrorString()) {
        return;
    }
}

As you can see above, I added "Show Image Editor", "Rotate Right" and "Change Image Size" functions in a few lines of code. Based on your requirements, you can also add functions like Crop, AddText and more to your web application. Below is a snapshot of the built-in Image Editor:

Save the captured images to your local disk.
Now you might want to save the captured images to your local disk. The sample code below shows you how to save the images.

function btnSave_onclick(){

    var i, strimgType_save;
    var NM_imgType_save = document.getElementsByName("imgType_save");
    for(i=0;i<5;i++){
        if(NM_imgType_save.item(i).checked == true){
            strimgType_save  = NM_imgType_save.item(i).value;
            break;
        }
    }
    DWObject.IfShowFileDialog = true;
    txt_fileNameforSave.className = "";
   

    var strFilePath = "C:\\" + txt_fileNameforSave.value + "." + strimgType_save;
    if (strimgType_save == "tif" && MultiPageTIFF_save.checked) { //save as multi-page tif
        if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
            bSave = DWObject.SaveAllAsMultiPageTIFF(strFilePath); 
        }
        else {
            bSave = DWObject.SaveSelectedImagesAsMultiPageTIFF(strFilePath);
        }
    }
    else if (strimgType_save == "pdf" && document.getElementById("MultiPagePDF_save").checked) { //save as multi-page pdf
        if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
            bSave = DWObject.SaveAllAsPDF(strFilePath);
        }
        else {
            bSave = DWObject.SaveSelectedImagesAsMultiPagePDF(strFilePath);
        }
    }
    else {
        switch (i) { //save as a single page bmp/jpg/tif/png/pdf
            case 0: bSave = DWObject.SaveAsBMP(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
            case 1: bSave = DWObject.SaveAsJPEG(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
            case 2: bSave = DWObject.SaveAsTIFF(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
            case 3: bSave = DWObject.SaveAsPNG(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
            case 4: bSave = DWObject.SaveAsPDF(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
        }
    }
}

Deployment

A good component should be easy for developers to deploy and more importantly intuitive for customers to install and use. The complete source code can be downloaded from the article.

There is a "Scripts\ProductKey.js" file with a temporary trial product key. If you get license error when running the sample, you can download ImageCapture Suite from Dynamsoft’s website to get a valid trial license. ImageCapture Suite 30-Day Free Trial Download

To the sample from different client machines, you can simply copy the sample code with ImageCapture Suite to your web server (IIS, Apache or Tomcat). Users only need to download and install the ActiveX/Plugin in the browser on their first visit to the web page. More details on how to deploy ImageCaptureSuite

The online demo is also available for your reference.
ImageCapture Suite Online Demo

If you have any questions, please feel free to contact our support team at support@dynamsoft.com.