掃描識別工具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最新版免費下載>>>】