Webcam & Scanners: Capture Images from Your Browser with Dynamsoft

• Download Sample Code - 3.7 MB

Contents

• Introduction
• Key Features
• Great Compatibility
• Agile yet Powerful
• Sample Code
• Initialize the Controls
• Acquire Images
• Get a Free Trial Version

Introduction

There are always chances that customers use different devices, such as scanners and webcams, to capture images and documents. For instance:

• Take a phone of a patient and upload it together with his/her med file onto the server.
• In banks, representatives acquire contracts and documents from their scanners, and in the meantime scan customer’s ID using a webcam.
• Track the staff login status. Scan documents and get image profiles when they check the trucks in.

Regardless of these requirements, due to the different APIs being used by scanners and webcams, it’s not an easy task for developers to create an application from scratch. You need to learn TWAIN, DirectShow and other technologies to implement this and embed them to your web application. Don’t even mention the compatibility with the browsers. Your customer may use IE, Firefox, Chrome, Safari or Opera. And you want to have the most compatibility for your web application.

To help you achieve the above requirements within several lines of code, Dynamsoft provides ImageCapture Suite which enables you to acquire images from both scanners and webcams. If you’d like to try it out the combination, you can download the sample code and the 30-day free trial from this article.

Key Features

By using ImageCapture Suite you can get the following benefits:

• Great compatibility
  • Capture images from scanners, webcams, digital cameras, capture cards and more devices, as long as the drivers support TWAIN, WIA or UVC.
  • Support IE (both 32-bit and 64-bit), Firefox, Chrome, Safari and Opera.
    
• Agile yet powerful

You can embed the components easily to your web application. Functions such as image acquisition, edit and upload, can be implemented within several lines of code.

Sample Code

You can find the related ImageCapture Suite files for deployment under the Resources folder in the installation folder.

• ImageCaptureSuite.cab
• ImageCaptureSuitex64.cab
• ImageCaptureSuitePlugIn.msi
• ImageCaptureSuiteMacEditionTrial.pkg

// For IE, render the ActiveX Object
objString = "<object id='" + DW_ObjectName + "' style='width:" + DW_Width + "px;height:" + DW_Height + "px'";
        if (DW_InWindowsX86)
            objString += "codebase='" + DW_CABX86Path + "#version=" + DW_VersionCode + "' "; // For 32-bit IE, render the x86 cab file
        else
            objString += "codebase='" + DW_CABX64Path + "#version=" + DW_VersionCode + "' "; // For 64-bit IE, render the x64 cab file

        var temp = DW_IsTrial ? DW_TRAILCLASSID : DW_FULLCLASSID;
        objString += " classid='clsid:" + temp + "' viewastext>";
        objString += " <param name='Manufacturer' value='DynamSoft Corporation' />";
        objString += " <param name='ProductFamily' value='" + DW_ProductName + "' />";
        objString += " <param name='ProductName' value='" + DW_ProductName + "' />";
        objString += " </object>";

ActiveX Edition

There are 32-bit and 64-bit CAB files for corresponding version of IE. Choose the proper one according to the needs. The trial and full versions of ImageCapture Suite use different class-ids.

Plug-in & Mac Edition

Plug-in and Mac edition can be used in Gecko-based browsers including Firefox, Chrome, Safari & Opera on PC and Mac OS X.

        objString = " <embed id='" + DW_ObjectName + "'style='display: inline; width:" + DW_Width + "px;height:" + DW_Height + "px' id='" + DW_ObjectName + "' type='" + DW_MIMETYPE + "'";
        objString += " OnPostTransfer='Dynamsoft_OnPostTransfer' OnPostAllTransfers='Dynamsoft_OnPostAllTransfers'";
        objString += " OnMouseClick='Dynamsoft_OnMouseClick'  OnPostLoad='Dynamsoft_OnPostLoadfunction'";
        objString += " OnImageAreaSelected = 'Dynamsoft_OnImageAreaSelected'";
        objString += " OnImageAreaDeSelected = 'Dynamsoft_OnImageAreaDeselected'";
        objString += " OnMouseDoubleClick = 'Dynamsoft_OnMouseDoubleClick'";
        objString += " OnMouseRightClick = 'Dynamsoft_OnMouseRightClick'";
        objString += " OnTopImageInTheViewChanged = 'Dynamsoft_OnTopImageInTheViewChanged'";
        objString += " OnGetFilePath='Dynamsoft_OnGetFilePath'";
        if (DW_InWindows)
            objString += " pluginspage='" + DW_MSIPath + "'></embed>"; // For non-IE on Windows, render the plugin edition

        else
            objString += " pluginspage='" + DW_PKGPath + "'></embed>";// For non-IE on Mac OS X, render the Mac edition

Acquire Image

Once you embed the control, you can capture images and documents from your devices. The following lines of sample code show you how to acquire images.

function AcquireImageInner(){
    if (DW_DWTSourceContainerID == "")
        DWObject.SelectSource();
    else
        DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex);
    DWObject.CloseSource();
    DWObject.OpenSource();
    var iSelectedIndex = document.getElementById(DW_DWTSourceContainerID).selectedIndex;

    var iTwainType = DWObject.GetSourceType(iSelectedIndex); // check the device type, whether twain device or webcam
    
    if(iTwainType == 0)  // for TWAIN scanners
    {
        DWObject.IfShowUI = document.getElementById("ShowUI").checked;

        var i;
        for(i=0;i<3;i++)
        {
            if(document.getElementsByName("PixelType").item(i).checked==true)
            DWObject.PixelType = i;
        }  

        DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
        DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);

    }
    }
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage();
}

The above is just a simple one. According to your requirements, you can add even more image properties, such as page size and brightness, to your source code. If you’d like your customers have the full permission to customize the properties, you can set IfShowUI to true to let the application display the user interface of the source.

Load Image

Besides capturing images from scanners or webcams, you can also load your existing images (bmp, jpg, pdf, tif, png) on local disk and display the image in the control in browser.

function btnLoad_onclick() {
    DWObject.IfShowFileDialog = true; // show the Open File dialog for browsing the images
    DWObject.LoadImageEx("", 5);
}

Get a Free Trial Version

The detailed sample code can be downloaded from this article. In the meantime, you can get 30-day free trial of ImageCapture Suite and try it yourself.

If you have any questions, you can contact our support team at support@dynamsoft.com.