扫描识别工具Dynamic Web TWAIN使用教程：桌面浏览器捕获（下）

本文将继续与大家分享如何在Web应用程序中使用桌面相机。

如何实现？

在文本编辑器中打开ScanOrCapture.html

对Core JavaScript文件的引用

<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>

这里引用的文件是

用于核心SDK Dynamic Web TWAIN的JS库
node_modules\dwt\dis\dynamsoft.webtwain.initiate.js
node_modules\dwt\dis\dynamsoft.webtwain.config.js

和用于网络摄像头附加组件（Webcam Add-on）的JS库
node_modules\dwt\dist\addon\dynamsoft.webtwain.addon.webcam.js

PDF Rasterizer不是必需的，但也可查看PDF Rasterizer
node_modules\dwt\dist\addon\dynamsoft.webtwain.addon.pdf.js

如果以前在本地安装了Dynamic Web TWAIN，则也可以在以下目录中找到相同的文件。

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\

运行时初始化代码

<div id="dwtcontrolContainer"></div>
function Dynamsoft_OnReady() {
    DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('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;
        }
        DWObject.Addon.Webcam.Download(Dynamsoft.WebTwainEnv.ResourcesPath + '/dist/DynamicWebcam.zip',
            function () {
                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();
            },
            function (errCode, errString) {
                console.log('Webcam DLL failed to download with error: ' + errString);
            });
    }
}

如上面的代码所示，在初始化期间页面上只有一个container（DIV元素）。它显示视频流以及来自网络摄像头或扫描仪的捕获图像。

在初始化期间，方法Addon.Webcam.GetSourceList（）用于获取所有可用网络摄像头的列表。选择网络摄像头源时，使用方法Addon.Webcam.SelectSource（strWebcamName）。

使用插件

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);
        }
    }
}

选择网络摄像头后，将调用Addon.Webcam.PlayVideo（DWObject，nQuality，onFrameCaptured）方法在container（容器）中播放视频流。然后，你可以使用Addon.Webcam.CaptureImage（OnCaptureSuccess，OnCaptureError）捕获帧， 并调用Addon.Webcam.StopVideo（）来停止视频流，以便捕获的帧/图像显示出来。如果视频流仍然显示，则捕获的帧/图像将不可见，这是由于样本对视频流和图像使用相同的container。你还可以将两个containers放在同一页面上，并使一个用于视频流，另一个用于捕获的图像。

你还可查看在线演示。

                                                                    【Dynamic Web TWAIN最新版免费下载>>>】