Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET
Article

Webcam & Scanners: Capture Images from Your Browser with Dynamsoft

28 Sep 2012CPOL3 min read 21.9K   1K   10   2
Get the solution to integrate Image Grab in one web application. Achieve the most comprehensive compatibility and acquiring images from devices including webcams, scanners and capture cards.

This article is a paid placement in the Solution Center for our sponsors at The Code Project. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Contents

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Canada Canada
Dynamsoft has more than 15 years of experience in TWAIN SDKs, imaging SDKs and version control solutions.

Our products include:

TWAIN SDK
- Dynamic Web TWAIN: a TWAIN scanning SDK optimized for web document management applications.
- Dynamic .NET TWAIN: a .NET TWAIN and Directshow Image Capture SDK for WinForms/WPF applications.

Imaging SDKs
- Barcode Reader for Windows, Linux, macOS, iOS, Android and Raspberry Pi.
- OCR addon for both web and .NET TWAIN SDKs

Version Control
- SourceAnywhere: a SQL server-based source control solution. Both on-premise and hosting options are provided.

http://www.dynamsoft.com/
This is a Organisation

21 members

Comments and Discussions

 
QuestionFile not found, Please upload project files again. Pin
mashali20-May-18 0:22
mashali20-May-18 0:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.