在Web程序中调用桌面摄像头

简介

桌面摄像头几乎是每台个人电脑必备的附件之一。实时聊天,远程协助等很多的桌面应用可以直接调用摄像头。然而在目前将桌面搬到云端的技术热潮中,在浏览器中直接集成摄像头也是一个热门需求。类似的实际应用场景可能有

  • 在填写一些在线申请表格时,拍摄头像
  • 通过质量略好的摄像头在视频流中直接读取二维码
  • 在银行医院等机构中,采用质量很好的摄像头(如高拍仪)来实现类似扫描仪级别的图像获取

本文将介绍一下如何快速的在同一个网页中调用本地扫描仪和摄像头来获取图像

开发测试环境

电脑上需要安装 node

步骤

一、新建一个目录,在里面打开命令行工具(快捷方式为Ctrl+Shift+右击)通过npm下载本文使用的核心控件

npm install dwt@14.1.0

然后在这个目录可以看到

二、打开到以下目录

node_modules\dwt\sample

可以看到

三、在本文中,我们要研究的是ScanOrCapture.html。直接双击打开。如果相关的控件尚未,则按照提示安装控件

正常情况下,安装的文件可以在C:\Windows\SysWOW64\Dynamsoft\DynamsoftService目录中找到。这里的核心文件主要是

DynamsoftService.exe

dwt_trial_14.1.0.0828.dll

dcs_trial_6100907.dll

四、安装完成后,刷新页面,如果本地有摄像头,则在页面的下拉菜单中会显示出来。选中一个摄像头并点击“Play Video”,然后点击“Grab An Image”。图中右侧为视频流,左侧为截取的一帧画面

我们还可以点击“Scan Documents”来调用本地扫描仪扫描一张图。

功能是怎么实现的

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

一、核心JS的引用

<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.camera.initiate.js"></script>
<script type="text/javascript" src="../dist/addon/dynamsoft.camera.config.js"></script>

这里引用的是

核心SDKDynamic Web TWAIN相关代码

node_modules\dwt\dist\dynamsoft.webtwain.initiate.js node_modules\dwt\dist\dynamsoft.webtwain.config.js

外加本示例中用到的Dynamsoft Camera SDK的相关代码

node_modules\dwt\dist\addon\dynamsoft.camera.initiate.js node_modules\dwt\dist\addon\dynamsoft.camera.config.js

PDF Rasterizer是额外的,并非必需。参考“文本PDF转图片”

node_modules\dwt\dist\addon\dynamsoft.webtwain.addon.pdf.js

如果您之前本地安装了Dynamic Web TWAINDynamsoft Camera SDK产品,则相同的文件也可以在以下目录找到

C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK 14.1 Trial\Resource

C:\Program Files (x86)\Dynamsoft\Dynamsoft Camera SDK 6.1 Trial\DCSResource

二、Dynamsoft Camera SDK运行时初始化代码

<div id="image-container" style="float:left; position: absolute; left:-1000px;"> </div>
<div id="video-container" style="float:left; margin-left: 20px; width:270px; height:350px; border:1px black solid"> </div>
dynamsoft.dcsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);
function onInitSuccess(videoViewerId, imageViewerId) {
    setTimeout(function () {
        dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
        imageViewer = dcsObject.getImageViewer(imageViewerId);
        imageViewer.ui.setSelectedImageBorderWidth(1);
        dcsObject.videoviewer.setMode(dcsObject.videoviewer.EnumMode.Image);
        var cameraList = dcsObject.camera.getCameraList();
        for (var i = 0; i < cameraList.length; i++)
            document.getElementById("sltCameraSource").options.add(new Option(cameraList[i], cameraList[i]));
    }, 100);
}

function onInitFailure(errorCode, errorString) {
    console.log('Init failed: ' + errorString);
}

如上代码所示,Dynamsoft Camera SDK在初始化过程中需要页面上有两个专用DIVvideo-container是用来显示视频流的,image-container用来显示视频拍摄结果(截图)。初始化完成后,控件的主对象储存在变量dcsObject中,图像显示器对象储存在imageViewer中。

二、使用插件

function playVideo() {
    var selectedCameraName = document.getElementById('sltCameraSource').value;
    if (selectedCameraName) {
        dcsObject.camera.takeCameraOwnership(selectedCameraName);

        if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
            curCameraName = '';
        } else curCameraName = selectedCameraName;

        dcsObject.camera.playVideo();

    } else {
        curCameraName = '';
        console.log('No camera is connected.');
    }
}

function grabImage() {
    if (dcsObject) {
        dcsObject.camera.captureImage('image-container');
        if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
            alert('Capture error: ' + dcsObject.getErrorString());
        }
        else {
            var count = imageViewer.image.getCount();
            if (count > 0) {
                imageViewer.io.copyToClipboard(count - 1);
                DWObject.LoadDibFromClipboard()
            }
        }
    }
}

playVideo函数中调用接口dcsObject.camera.takeCameraOwnershi来选中一个摄像头,然后用dcsObject.camera.playVideo来将视频流输出到video-container对应的DIV中。

grabImage函数中调用接口dcsObject.camera.captureImage直接将显示的视频流当前帧截取并显示到image-container中。由于本例中同时还用了Dynamic Web TWAIN控件,两个控件都有自带的图片显示器,我们选择只用Dynamic Web TWAIN的。所以图片从摄像头获取后我们直接将它拷贝过去。用到的接口为imageViewer.io.copyToClipboard(拷出),DWObject.LoadDibFromClipboard(拷入)。

results matching ""

    No results matching ""