扫描识别工具Dynamic Web TWAIN使用教程:桌面浏览器捕获(下)

翻译|使用教程|编辑:黄竹雯|2019-02-25 14:02:47.000|阅读 47 次

概述:本文介绍如何快速使用本地扫描仪和相机在同一网页上获取图像。

相关链接:

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

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

如何实现?

在文本编辑器中打开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相关信息的朋友可以点击" 咨询在线客服 "~


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

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Dynamic Web TWAIN

Dynamic Web TWAIN 应用于Web应用程序的TWAIN扫描识别工具,支持所有主流浏览器

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat