Use desktop cameras in web applications

Introduction

The desktop camera is one of the must-have accessories for every PC. Real-time chat, remote assistance, and many other desktop applications can use the camera directly. However, in the current technology boom of moving desktops to the cloud, integrating cameras directly into the browser is also in high demand. Similar practical scenarios may include

  • Take a picture when filling out some online application forms
  • Read the QR code directly in the video stream with a camera of slightly better quality
  • In a bank or hospital and other institutions, use a good-quality camera to achieve scanner-level image acquisition

This article shows how to quickly use the local scanner and camera to get images on the same web page.

Environment

node

The Webcam Addon itself doesn't rely on Node.js, and it's needed in this article just because it's faster to get required files with its package manager (npm).

Steps

Step 1 Create a new directory, open the command line tool inside (shortcut is Ctrl+Shift+right click). Download the core control used in this article through npm

npm install dwt@15.0

Then you can see the following in this directory

PDF-Rasterizer-1.png

Step 2 Open to the following directory

node_modules\dwt\sample

where you can see

PDF-Rasterizer-2.png

Step 3 In this article, we are going to check ScanOrCapture.html. Double click it to open. If the SDK is not yet available, follow the prompt to install it

Desktop-Browser-Capture-1.png

Under normal circumstances, the installed files can be found in the C:\Windows\SysWOW64\Dynamsoft\DynamsoftService directory. The core files here are

DynamsoftService.exe

dwt_trial_15.0.0.0625.dll

DynamicWebcamx64_15.0.0.0625.dll

Step 4 After the installation is complete, refresh the page. If there are cameras locally, they will show up in the drop-down menu of the page

Desktop-Browser-Capture-2.png

Select a camera and the video stream will show up in the viewer

Desktop-Browser-Capture-3.png

Click on "Acquire From a Webcam" to capture a frame

Desktop-Browser-Capture-4.png

We can also click "Show Video" to show the video stream again.

Desktop-Browser-Capture-3.png

You can also select a scanner source from the dropdown list and then click "Acquire From a Scanner" to scan a document.

Desktop-Browser-Capture-5.png

How it works

Open ScanOrCapture.html in a text editor

References to the Core JavaScript files

<script type="text/javascript" src="../dist/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="../dist/dynamsoft.webtwain.config.js"></script>
<script type="text/javascript" src="../dist/addon/dynamsoft.webtwain.addon.pdf.js"></script>
<script type="text/javascript" src="../dist/addon/dynamsoft.webtwain.addon.webcam.js"></script>

Here the files referenced are

JS library for the core SDK Dynamic Web TWAIN

node_modules\dwt\dis\dynamsoft.webtwain.initiate.js node_modules\dwt\dis\dynamsoft.webtwain.config.js

And JS library for the Webcam Add-on

node_modules\dwt\dist\addon\dynamsoft.webtwain.addon.webcam.js

PDF Rasterizer is not necessary, check out PDF Rasterizer

node_modules\dwt\dist\addon\dynamsoft.webtwain.addon.pdf.js

If you have previously installed the Dynamic Web TWAIN locally, the same files can also be found in the following directory.

C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {version number} {Trial}\Sample\Scan+Webcam\Resources\

C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {version number} {Trial}\Sample\Scan+Webcam\Resources\addon\

Runtime initialization code

<div id="dwtcontrolContainer"></div>
function Dynamsoft_OnReady() {
    DWObject = Dynamsoft.WebTwainEnv.GetWebTwain(
        'dwtcontrolContainer'
    ); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
    document.getElementById('source').onchange = function () {
        if (document.getElementById('source').selectedIndex < webCamStartingIndex) {
            DWObject.Addon.Webcam.StopVideo();
            isVideoOn = false;
            document.getElementById("btn-grab").style.backgroundColor = "";
            document.getElementById('btn-grab').value = 'Acquire From a Scanner';
            document.getElementById("btn-switch").style.display = 'none';
        } else {
            DWObject.Addon.Webcam.SelectSource(document.getElementById("source").options[document
                .getElementById(
                    "source").selectedIndex].text);

            SetIfWebcamPlayVideo(true);

            document.getElementById('btn-grab').value = 'Acquire From a Webcam';
            document.getElementById("btn-switch").style.display = '';
        }
        document.getElementById("btn-grab").disabled = "";
    }
    if (DWObject) {
        if (!Dynamsoft.Lib.product.bChromeEdition) {
            DWObject.Height = 350;
            DWObject.Width = 270;
        }
        if (Dynamsoft.Lib.detect.ssl) {
            DWObject.IfSSL = true;
            DWObject.HTTPPort = 443;
        }
        document.getElementById('source').options.length = 0;
        var count = DWObject.SourceCount;
        for (var i = 0; i < count; i++) {
            document.getElementById('source').options.add(new Option(DWObject.GetSourceNameItems(i),
                i));
        }
        webCamStartingIndex = i;

        var arySource = DWObject.Addon.Webcam.GetSourceList();
        for (var i = 0; i < arySource.length; i++)
            document.getElementById("source").options.add(new Option(arySource[i]), i +
                webCamStartingIndex); // Get Webcam Source names and put them in a drop-down box
        document.getElementById('source').onchange();
    }
}

As shown in the above code, there is only one container (a DIV element) on the page during the initialization. It displays the video stream as well as the captured images from the webcams or scanners.

During the initialization, the method Addon.Webcam.GetSourceList() is used to get a list of all available Webcams. When selecting a webcam source, the method Addon.Webcam.SelectSource(strWebcamName) is used.

Use the addon

function SetIfWebcamPlayVideo(bShow) {
    if (bShow) {
        DWObject.Addon.Webcam.StopVideo();
        setTimeout(function () {
            DWObject.Addon.Webcam.PlayVideo(DWObject, 80, function () {});
            isVideoOn = true;
            document.getElementById("btn-grab").style.backgroundColor = "";
            document.getElementById("btn-grab").disabled = "";
            document.getElementById("btn-switch").value = "Hide Video";
        }, 30);
    } else {
        DWObject.Addon.Webcam.StopVideo();
        isVideoOn = false;
        document.getElementById("btn-grab").style.backgroundColor = "#aaa";
        document.getElementById("btn-grab").disabled = "disabled";
        document.getElementById("btn-switch").value = "Show Video";
    }
}
function SwitchViews() {
    if (isVideoOn == false) {
        // continue the video
        SetIfWebcamPlayVideo(true);
    } else {
        // stop the video
        SetIfWebcamPlayVideo(false);
    }
}
function CaptureImage() {
    if (DWObject) {
        if (document.getElementById('source').selectedIndex < webCamStartingIndex)      {
            DWObject.IfShowUI = true;
            DWObject.IfDisableSourceAfterAcquire = true;
            DWObject.SelectSourceByIndex(document.getElementById('source').selectedIndex);
            DWObject.CloseSource();
            DWObject.OpenSource();
            DWObject.AcquireImage();
        } else {

            var funCaptureImage = function () {
                setTimeout(function () {
                    SetIfWebcamPlayVideo(false);
                }, 50);
            };
            DWObject.Addon.Webcam.CaptureImage(funCaptureImage, funCaptureImage);
        }
    }
}

After selecting a webcam, the method Addon.Webcam.PlayVideo(DWObject, nQuality, onFrameCaptured) will be called to play the video stream in the container. You can then use Addon.Webcam.CaptureImage(OnCaptureSuccess, OnCaptureError) to capture a frame, and call Addon.Webcam.StopVideo() to stop the video stream so that the captured frame/image show up. If the video stream is still showing, the captured frame/image won't be visible which is due to the fact that the sample uses the same container for both the video stream and the images. You can also put two containers on the same page and use one for the stream and the other for the captured image(s).

A live demo is available online here.

results matching ""

    No results matching ""

    results matching ""

      No results matching ""