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 Camera SDK 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@14.2.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 related controls are not yet available, follow the prompts to install them

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 mainly

DynamsoftService.exe

dwt_trial_14.1.0.0828.dll

dcs_trial_6100907.dll

Step 4 After the installation is complete, refresh the page. If there is a camera locally, it will show up in the drop-down menu of the page. Select a camera and click on "Play Video", then click on "Grab An Image". In the figure, the right side is the video stream, and the left side is the captured frame

Desktop-Browser-Capture-2.png

We can also click "Scan Documents" to scan a document.

Desktop-Browser-Capture-3.png

How it is done

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.camera.initiate.js"></script>
<script type="text/javascript" src="../dist/addon/dynamsoft.camera.config.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 Dynamsoft Camera SDK

node_modules\dwt\dist\addon\dynamsoft.camera.initiate.js node_modules\dwt\dist\addon\dynamsoft.camera.config.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 and Dynamsoft Camera SDK locally, the same files can also be found in the following directory.

C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {version number} {Trial}\Resource

C:\Program Files (x86)\Dynamsoft\Dynamsoft Camera SDK {version number} {Trial}\DCSResource

Dynamsoft Camera SDK runtime initialization code

<div id="image-container" style="float:left; position: absolute; left:-1000px;"> </div>
<div id="video-container" style="float:left; margin-left: 20px; width:270px; height:350px; border:1px black solid"> </div>
dynamsoft.dcsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);
function onInitSuccess(videoViewerId, imageViewerId) {
    setTimeout(function () {
        dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
        imageViewer = dcsObject.getImageViewer(imageViewerId);
        imageViewer.ui.setSelectedImageBorderWidth(1);
        dcsObject.videoviewer.setMode(dcsObject.videoviewer.EnumMode.Image);
        var cameraList = dcsObject.camera.getCameraList();
        for (var i = 0; i < cameraList.length; i++)
            document.getElementById("sltCameraSource").options.add(new Option(cameraList[i], cameraList[i]));
    }, 100);
}

function onInitFailure(errorCode, errorString) {
    console.log('Init failed: ' + errorString);
}

As shown in the above code, Dynamsoft Camera SDK requires two dedicated DIVs on the page during initialization, video-container is used to display the video stream, and image-container is used to display the video capture result. After the initialization is complete, the main object of the control is stored in the variable dcsObject, and the image display object is stored in imageViewer.

Use the addon

function playVideo() {
    var selectedCameraName = document.getElementById('sltCameraSource').value;
    if (selectedCameraName) {
        dcsObject.camera.takeCameraOwnership(selectedCameraName);

        if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
            curCameraName = '';
        } else curCameraName = selectedCameraName;

        dcsObject.camera.playVideo();

    } else {
        curCameraName = '';
        console.log('No camera is connected.');
    }
}

function grabImage() {
    if (dcsObject) {
        dcsObject.camera.captureImage('image-container');
        if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
            alert('Capture error: ' + dcsObject.getErrorString());
        }
        else {
            var count = imageViewer.image.getCount();
            if (count > 0) {
                imageViewer.io.copyToClipboard(count - 1);
                DWObject.LoadDibFromClipboard()
            }
        }
    }
}

In the playVideo function, call the interface dcsObject.camera.takeCameraOwnershi to select a camera, then use dcsObject.camera.playVideo to output the video stream to the DIV corresponding to video-container.

The grabImage function calls the interface dcsObject.camera.captureImage to directly intercept the current frame of the displayed video stream and display it in image-container. Since the Dynamic Web TWAIN control is also used in this example, both controls have their image viewer. We choose to use only the viewer of Dynamic Web TWAIN. So after the image is taken from the camera, we copy it over directly. The interfaces used are imageViewer.io.copyToClipboard (copy out), DWObject.LoadDibFromClipboard (copy in).

results matching ""

    No results matching ""

    results matching ""

      No results matching ""