Control Scanners & Webcams in JavaScript

• Download demo - 2.4 MB

Introduction

It’s common (however not easy) to enable a web application to control both cameras and scanners. For instance, an application designed for healthcare will have a patient’s photograph taken at the check-in desk and then store the photo in the patient’s medical file on the server. The report can be scanned and uploaded at a later time.

Dynamsoft’s ImageCapture Suite is a browser plug-in especially designed for capturing images/documents from both webcams and scanners. The component is compatible with Internet Explorer (both 32-bit and 64-bit), Firefox, Chrome, Safari and Opera and provides the most comprehensive support for imaging devices.

Key Features

• Capture images from cameras (both build-in and digital), scanners and other TWAIN/WIA/UVC compatible devices.
• Compatible with Internet Explorer (both 32-bit and 64-bit), Firefox, Chrome, Safari and Opera on Windows.
• Edit captured images: Crop, Change Image Size, Rotate, Deskew and more.
• Upload the images to a local folder, web server, FTP site, SharePoint library, database and other systems.
• Supported image format include BMP, JPEG, PNG, TIFF (both single and multi-page) and PDF (both single and multi-page).
• Upload extra text info along with the image(s).
• Robust security features. Support SSL and Windows/Forms/Basic Authentication.
• The 1D & 2D Barcode Reader and OCR add-ons are both provided as additional choices for you.

Image Capture & Upload

The following sections will show you how to integrate Dynamsoft’s ImageCapture Suite into your web application, how to implement image/document acquisition and how to store the scanned images to a web server. However, first please make sure that you’ve installed the SDK onto your development machine. If you haven’t yet to do so, here is the download link: ImageCapture Suite 30-Day Free Trial Download.

1. Integrate ImageCapture Suite to your web application.

The SDK provides two editions for different browsers.

• ActiveX Edition: for 32-bit & 64-bit IE on Windows
• plug-in Edition: for Firefox, Chrome, Safari and Opera on Windows

It’s simple to embed both of the editions onto one web page, providing your customers the convenience of not needing to access multiple pages to scan images in different browsers.

Plug-in Edition: Add the following <embed> tag to your source code.

<embed type = "Application/ImageCaptureSuite-Plugin" id="DWObject"
OnPostTransfer = "Dynamsoft_OnPostTransfer"
OnPostAllTransfers = "Dynamsoft_OnPostAllTransfers"
pluginspage = "DynamicWebTWAINPlugIn.msi"
style ="width:500px; height:500px;">
</embed>

ActiveX Edition: Add the following <object> tag.

<object classid= "clsid:E61B84D6-979B-4864-91B7-B8C140B58D54" id="DWObject" CodeBase= "ImageCaptureSuite.cab#version=8,2" style ="width:500px; height:500px;">
<param name = "Manufacturer" value = "Dynamsoft Corporation"/>
<param name = "ProductName" value = "ImageCapture Suite"/>
</object>

Insert the following <object> tag to access and verify the license info.

<object classid= "clsid:5220cb21-c88d-11cf-b347-00aa00a28331" style = "display:none;">
<param name= "LPKPath" value= "ImageCaptureSuite.lpk"/>
<object>

2. Capture Images. 

After initializing ImageCapture Suite, we can call the methods and properties of the SDK.

    if (DW_DWTSourceContainerID == "")
        DWObject.SelectSource();
    else
        DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex);
    DWObject.CloseSource();
    DWObject.OpenSource();

First, we can use SelectSource() or SelectSourceByIndex() to both get and select the available sources on the computer. The supported sources include the scanner and webcam drivers.

    if(iTwainType == 0)
    {
        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.Resolution = Resolution.value;
        DWObject.IfFeederEnabled = document.getElementById("ADF").checked ;
        DWObject.IfDuplexEnabled = document.getElementById("Duplex").checked ;
        AppendMessage("Pixel Type: " + DWObject.PixelType + "<br />Resolution: " + DWObject.Resolution + "
");
    }
    else
    {
        DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
        
        DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
        DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);

        AppendMessage("MediaType: " + DWObject.MediaType + "
Resolution: " + DWObject.ResolutionForCam + "
");  
    }

After getting the source selected, we can set the image’s properties, such as resolution, pixel type and more. Before scanning, iTwainType is used to check the type of the selected source. Different properties can be set based upon the device’s type (scanner or webcam).

Acquire images from the selected source.

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

3. Upload the captured images to your database.

Specify the server information, including the server name, port number and whether SSL is being used.

    strHTTPServer = DW_ServerName;
    DWObject.HTTPPort = DW_strPort;

We can choose the image format and then upload the captured images to the database. Supported image formats include BMP, PNG, JPEG, TIFF and PDF. In the given sample, you can select the image format on the web page.

    var CurrentPathName = unescape(location.pathname);	// get current PathName in plain ASCII	
    var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);			
    strActionPage = CurrentPath + DW_ActionPage; //the ActionPage's file path


    var uploadfilename = txt_fileName.value + "." + document.getElementsByName("ImageType").item(i).value;
    if (strImageType == 2 && document.getElementById("MultiPageTIFF").checked) {
        if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
            DWObject.HTTPUploadAllThroughPostAsMultiPageTIFF(
                strHTTPServer,
                strActionPage,
                uploadfilename
            );
        }
        else {
            DWObject.HTTPUploadThroughPostAsMultiPageTIFF(
                strHTTPServer,
                strActionPage,
                uploadfilename
            );
        }
    }
    else if (strImageType == 4 && document.getElementById("MultiPagePDF").checked) {
        if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
            DWObject.HTTPUploadAllThroughPostAsPDF(
                strHTTPServer,
                strActionPage,
                uploadfilename
            );
        }
        else {
            DWObject.HTTPUploadThroughPostAsMultiPagePDF(
                strHTTPServer,
                strActionPage,
                uploadfilename
            );
        }
    }
    else {
        DWObject.HTTPUploadThroughPostEx(
            strHTTPServer,
            DWObject.CurrentImageIndexInBuffer,
            strActionPage,
            uploadfilename,
            strImageType
        );
    }
    DW_TempStr = DW_TempStr +"Upload: " ;
    if (DW_CheckErrorString()) {
        if(strActionPage.indexOf("SaveToFile")!=-1)
            alert(DWObject.ErrorString)//if save to file.
        else
            window.location = redirectURLifOK;
    }

The action page (SaveToFile.aspx) is used to receive the image data and send the data to the web server or database. We will use web server as an example here.

<%@ Page Language="C#" %>
<%
    try
    {
        String strImageName;
        HttpFileCollection files = HttpContext.Current.Request.Files;
        HttpPostedFile uploadfile = files["RemoteFile"];
        strImageName = uploadfile.FileName;

        uploadfile.SaveAs(Server.MapPath(".") + "\\UploadedImages\\" + strImageName);

    }
    catch
    {
    }
%>

Download the Sample

The complete sample code can be downloaded from this article. If you want to check out the features first, an online demo is provided.

ImageCapture Suite Online Demo

To customize the sample code, you can download the SDK first from Dynamsoft’s website.

ImageCapture Suite 30-Day Free Trial Download

One of ImageCapture Suite’s beautiful features is its convenient integration with the Barcode Reader and OCR add-ons. Check out the demo below if you are interested in them.

Barcode Reader & OCR Demo

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