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

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

如何实现/strong>

对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_modulesdwtdisdynamsoft.webtwain.initiate.js
node_modulesdwtdisdynamsoft.webtwain.config.js

和用于 络摄像头附加组件（Webcam Add-on）的JS库
node_modulesdwtdistaddondynamsoft.webtwain.addon.webcam.js

PDF Rasterizer不是必需的，但也可查看PDF Rasterizer
node_modulesdwtdistaddondynamsoft.webtwain.addon.pdf.js

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

C:Program Files (x86)DynamsoftDynamic Web TWAIN SDK {version number} {Trial}SampleScan+WebcamResources

C:Program Files (x86)DynamsoftDynamic Web TWAIN SDK {version number} {Trial}SampleScan+WebcamResourcesaddon

运行时初始化代码

<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相关信息的朋友可以点击” 咨询在线客服 “~

标签：扫描识别图像处理扫描与图像