How to use the webcam

The webcam add-on is based on the Microsoft DirectShow API. As an additional image capture engine, it has quite a few APIs.

Basic APIs

Addon.Webcam.Download, Addon.Webcam.GetSourceList, Addon.Webcam.SelectSource Addon.Webcam.CaptureImage, Addon.Webcam.CloseSource, Addon.Webcam.GetMediaType Addon.Webcam.SetMediaType, Addon.Webcam.GetResolution, Addon.Webcam.SetResolution Addon.Webcam.GetFrameRate, Addon.Webcam.SetFrameRate

Advanced APIs

Addon.Webcam.GetCameraControlPropertySetting Addon.Webcam.GetCameraControlPropertyMoreSetting Addon.Webcam.SetCameraControlPropertySetting Addon.Webcam.GetVideoPropertySetting Addon.Webcam.GetVideoPropertyMoreSetting Addon.Webcam.SetVideoPropertySetting

At the same time, there are 3 JS files and 2 zip files directly related to this add-on, they are found under /Resources/addon/

image031

Make sure you reference the file dynamsoft.webtwain.addon.barcode.js when using this add-on.

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

Let's start with a simple code snippet

function CaptureImage() {
    if (DWObject) {
        DWObject.Addon.Webcam.Download(
            "http://localhost/dwt/addon/Webcam.zip", doCapture, 
            function (errorCode, errorString) { alert(errorString); });
    }
}
function doCapture() {
        DWObject.Addon.Webcam.SelectSource('Integrated Camera');
        var showUI = false; var OnCaptureStart = function () { };
        var OnCaptureError = function (error, errorstr) { alert(errorstr); }
        var OnCaptureSuccess = function () { }; var OnCaptureEnd = function () { };
        DWObject.Addon.Webcam.CaptureImage(showUI, OnCaptureStart, OnCaptureSuccess, 
                                               OnCaptureError, OnCaptureEnd);
}

The first thing to note here is also the JS-style 'asynchronous syntax' of the method 'Download'.

Here is how the 'download' method works

Syntax .Addon.Webcam.Download(remoteFile, [optionalAsyncSuccessFunc, optionalAsyncFailureFunc])

Workflow

image032

When the webcam add-on (DLLs) is in place, you can start capturing from webcams. Let's check how the method 'CaptureImage' works.

Syntax

.Addon.Webcam.CaptureImage(bool bIfShowUI, OnCaptureStart, OnCaptureSuccess, OnCaptureError, OnCaptureEnd);

Workflow
Condition:
bIfShowUI == false

image033

Condition: bIfShowUI == true

image034

Setting up the Webcam

Finally, let's check out how to set up the webcam for capturing. We'll take 'resolution' as an example

function doCapture() {
    DWObject.Addon.Webcam.SelectSource('Integrated Camera');        
    DWObject.Addon.Webcam.SetResolution("1280 x 720");
    DWObject.Addon.Webcam.CaptureImage(……
}

3 things to note here

  1. To select a webcam, you need to use the name string of the camera to select it. If you wish to use an index (like the method SelectSourceByIndex), you can do something like this
DWObject.Addon.Webcam.SelectSource(DWObject.Addon.Webcam.GetSourceList()[0]);//Selects the 1st
  1. To set up a property like 'Resolution', you also need to pass a string to the method SetResolution. However, the string must be one of the supported ones which means you need to first know about all the strings that you can use. To do this, you can use the method GetResolution. The following APIs work similarly in pairs

Addon.Webcam.GetMediaType  &  Addon.Webcam.SetMediaType Addon.Webcam.GetResolution  &  Addon.Webcam.SetResolution Addon.Webcam.GetFrameRate  &  Addon.Webcam.SetFrameRate

The following code lists all available media types, resolutions and frame rates of the selected camera

HTML

<select size="1" id="source" style="position: relative; width: 220px;" onchange="updatePage();"></select>

<select size="1" id="mediaType" style="position: relative; width: 220px;"></select>

<select size="1" id="Resolution" style="position: relative; width: 220px;"></select>

<select size="1" id="frameRate" style="position: relative; width: 220px;"></select>

JavaScript

function updatePage() {
    DWObject.Addon.Webcam.SelectSource(document.getElementById("source").options[
        document.getElementById("source").selectedIndex].text);
    var mediaType = DWObject.Addon.Webcam.GetMediaType();
    document.getElementById("mediaType").options.length = 0;
    for (var i = 0; i < mediaType.GetCount(); i++)
        document.getElementById("mediaType").options.add(new Option(mediaType.Get(i)));
    var Resolution = DWObject.Addon.Webcam.GetResolution();
    document.getElementById("Resolution").options.length = 0;
    for (var i = 0; i < Resolution.GetCount() ; i++)
        document.getElementById("Resolution").options.add(new Option(Resolution.Get(i)));
    var frameRate = DWObject.Addon.Webcam.GetFrameRate();
    document.getElementById("frameRate").options.length = 0;
    for (var i = 0; i < frameRate.GetCount() ; i++)
        document.getElementById("frameRate").options.add(new Option(frameRate.Get(i)));
    DWObject.Addon.Webcam.CloseSource();
}

The following code sets up the properties with supported values

DWObject.Addon.Webcam.SelectSource(document.getElementById("source").options[
    document.getElementById("source").selectedIndex].text);
DWObject.Addon.Webcam.SetMediaType(document.getElementById("mediaType").options[
    document.getElementById("mediaType").selectedIndex].text);
DWObject.Addon.Webcam.SetResolution(document.getElementById("Resolution").options[
    document.getElementById("Resolution").selectedIndex].text);
DWObject.Addon.Webcam.SetFrameRate(document.getElementById("frameRate").options[
    document.getElementById("frameRate").selectedIndex].text);
DWObject.Addon.Webcam.CaptureImage(false, OnCaptureStart, OnCaptureSuccess, OnCaptureError, 
    OnCaptureEnd);

3. For more advanced settings, the add-on provides the following methods

Addon.Webcam.GetCameraControlPropertySetting Addon.Webcam.GetCameraControlPropertyMoreSetting Addon.Webcam.SetCameraControlPropertySetting Addon.Webcam.GetVideoPropertySetting Addon.Webcam.GetVideoPropertyMoreSetting Addon.Webcam.SetVideoPropertySetting

The following is a simple code snippet on getting and setting the property Zoom

/*Get*/
var zoom = DWObject.Addon.Webcam.GetCameraControlPropertySetting(EnumDWT_CameraControlProperty.CCP_ZOOM);
alert(zoom.GetValue());
alert(zoom.GetIfAuto());
/*Set*/
DWObject.Addon.Webcam.SetCameraControlPropertySetting(EnumDWT_CameraControlProperty.CCP_ZOOM, 10, true);

Please make sure the values you set to the properties are supported by the current webcam.