1. 软市首页
  2. 软件教程

使用Dynamic Web TWAIN从 络摄像头捕获图像的综合指南

• 软件教程

络摄像头使用户可以实时捕获图像和视频流。它通常内置于笔记本电脑中或通过USB端口物理连接到计算机。 络摄像头可用于许多情况，包括视频电话会议，面部识别，安全监控，计算机视觉和文档扫描。

Dynamic Web TWAIN正式版

如何通过浏览器访问 络摄像头/strong>

HTML5 为Web开发人员提供了JavaScript API MediaDevices.getUserMedia（）。在本指南中，我们将使用Dynamic Web TWAIN SDK 络摄像头插件构建一个在线 络摄像头演示。

为什么选择Dynamic Web TWAIN 络摄像头附加组件

为什么有免费的选项时考虑付费选项们列出了HTML5不提供的 络摄像头附加组件的一些高级功能。

  • 浏览器兼容性 – HTML5与某些较旧的浏览器不兼容，例如Internet Explorer 8。
  • 精确控制 络摄像头 –您可以完全控制摄像机，例如摇摄，倾斜，滚动，变焦，曝光，光圈和自动对焦。
  • 分辨率设置 –使用GetResolution（），SetResolution（）API获取和设置分辨率
  • 扫描仪质量的图像 – Dynamsoft提供了多种图像增强技术来帮助用户生成高质量的图像，包括自动边界检测，噪声消除和透视校正。
  • 上载到服务器 – SDK提供了内置方法，供用户将图像上载到服务器端。

如果您要构建一个健壮的，功能齐全的企业级应用程序，那么选择Dynamsoft的SDK这样的商业SDK将会为您带来巨大的投资回 。

关于Dynamic Web TWAIN 络摄像头附加组件

Dynamic Web TWAIN 络摄像头附加组件使Web开发人员可以使用JavaScript代码从 络摄像头捕获图像。 络摄像头SDK支持在Windows，macOS和Linux上的所有主流浏览器中嵌入视频流。Dynamic Web TWAIN还支持从移动相机捕获图像。

设备支持

  • 兼容UVC（USB视频类）的 络摄像头
  • 内置笔记本电脑摄像头
  • 文件相机

浏览器支持（跨平台）

  • Internet Explorer 8+
  • 边缘
  • 火狐浏览器
  • 铬

服务器端支持

  • Web服务器：Nginx，IIS，Tomcat，Apache等。
  • 操作系统：Linux，Windows等。
  • 语言：ASP.NET（C＃/ VB.NET），PHP，JSP等

如何逐步使用 络摄像头附加组件

在这里，我们将向您展示如何使用SDK轻松地将HTML 页中的 络摄像头捕获和视频预览集成。首先，下载Dynamic Web TWAIN并将Resources文件夹复制到您的项目中。然后创建一个新的 页HelloWorld.html。

步骤1添加参考

<head>    <script src="Resources/dynamsoft.webtwain.initiate.js"> </script>    <script src="Resources/dynamsoft.webtwain.config.js"> </script>    <script src="Resources/addon/dynamsoft.webtwain.addon.webcam.js"> </script></head>

步骤＃2创建一个容器

<div id="dwtcontrolContainer"></div>

步骤＃3输入一个下拉列表和两个按钮

步骤＃4通过调用Dynamsoft_OnReady（）初始化对象

<script type="text/javascript">        var DWObject;        var isVideoOn = true;        function Dynamsoft_OnReady() {            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embedded in the div with id 'dwtcontrolContainer'            if (DWObject) {                DWObject.Width = 504;                DWObject.Height = 600;                var arySource = DWObject.Addon.Webcam.GetSourceList();                for (var i = 0; i < arySource.length; i++)                    document.getElementById("source").options.add(new Option(arySource[i], arySource[i]), i); // Get Webcam Source names and put them in a drop-down box            }            document.getElementById('source').onchange = function () {          DWObject.Addon.Webcam.SelectSource(document.getElementById("source").options[document.getElementById("source").selectedIndex].value);                SetIfWebcamPlayVideo(true);               }            document.getElementById('source').onchange();        }    </script>

步骤＃5控制 络摄像头

您可以使用以下API播放和停止视频流：DWObject.Addon.Webcam.StopVideo（）和DWObject.Addon.Webcam.PlayVideo（DWObject，80,function（）{}）。

 function enableButton(element) {            element.style.backgroundColor = "";            element.disabled = "";        }        function disableButton(element) {            element.style.backgroundColor = "#aaa";            element.disabled = "disabled";        }        function SetIfWebcamPlayVideo(bShow) {            if (bShow) {                DWObject.Addon.Webcam.StopVideo();                DWObject.Addon.Webcam.PlayVideo(DWObject, 80, function () { });                isVideoOn = true;                enableButton(document.getElementById("btn-grab"));                document.getElementById("btn-switch").value = "Hide Video";            }            else {                DWObject.Addon.Webcam.StopVideo();                isVideoOn = false;                disableButton(document.getElementById("btn-grab"));                document.getElementById("btn-switch").value = "Show Video";                 }        }        function SwitchViews() {            if (isVideoOn == false) {                // continue the video                SetIfWebcamPlayVideo(true);            } else {                // stop the video                SetIfWebcamPlayVideo(false);            }           }

步骤＃6通过使用CaptureImage（）捕获图像

        function CaptureImage() {            if (DWObject) {                var funCaptureImage = function () {                    SetIfWebcamPlayVideo(false);                };                DWObject.Addon.Webcam.CaptureImage(funCaptureImage, funCaptureImage);            }        }

如何同时从扫描仪和 络摄像头捕获图像

文档/记录管理应用程序通常需要通过Web浏览器从扫描仪和 络摄像机捕获图像。您可以使用Dynamic Web TWAIN核心SDK和 络摄像头附加组件轻松实现此目的。

′JavaScript

让我们继续在HelloWorld.html 页上进行工作。

步骤＃1重写函数Dynamsoft_OnReady（）

要控制TWAIN扫描器，请调用API：DWObject = Dynamsoft.WebTwainEnv.GetWebTwain（’dwtcontrolContainer’）

        Dynamsoft.WebTwainEnv.AutoLoad = false;        Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady); // Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used        var webCamStartingIndex;//This is used to separate scanners and webcams        var DWObject;        var isVideoOn = true;        function Dynamsoft_OnReady() {            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embedded in the div with id 'dwtcontrolContainer'            if (DWObject) {                DWObject.Width = 504;                DWObject.Height = 600;                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], arySource[i]), i + webCamStartingIndex); // Get Webcam Source names and put them in a drop-down box } document.getElementById('source').onchange = function () { if (document.getElementById('source').selectedIndex < webCamStartingIndex) { if (arySource.length > 0)                        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].value);                    SetIfWebcamPlayVideo(true);                    document.getElementById('btn-grab').value = 'Acquire From a Webcam';                    document.getElementById("btn-switch").style.display = '';                }                document.getElementById("btn-grab").disabled = "";            }            document.getElementById('source').onchange();        }

步骤＃2捕获图像

        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 () { SetIfWebcamPlayVideo(false); }; DWObject.Addon.Webcam.CaptureImage(funCaptureImage, funCaptureImage); } } }

如何将扫描的图像上传到服务器端

步骤＃1添加用于上传的按钮

步骤＃2上传图片
准备好图像后，您可以通过调用HTTPUploadThroughPost（）将其上传到Web服务器。

        function upload() {            if (DWObject) {                // If no image in buffer, return the function                if (DWObject.HowManyImagesInBuffer == 0)                    return;                var strHTTPServer = location.hostname; //The name of the HTTP server. For example: "www.dynamsoft.com";                var CurrentPathName = unescape(location.pathname);                var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);                var strActionPage = CurrentPath + "filename"; // Action page                DWObject.IfSSL = false; // Set whether SSL is used                DWObject.HTTPPort = location.port == "" 80 : location.port;                var Digital = new Date();                var uploadfilename = Digital.getMilliseconds(); // Uses milliseconds according to local time as the file name                //Upload image in JPEG                DWObject.HTTPUploadThroughPost(strHTTPServer, DWObject.CurrentImageIndexInBuffer, strActionPage, uploadfilename + ".jpg", OnHttpUploadSuccess, OnHttpUploadFailure);            }        }

该SDK支持ASP.NET（C＃/ VB.NET），PHP，JSP，ASP等，以在服务器端接收图像数据。

PHP代码

<hp$strJson = "{"success"":false}"";try{$file = $_FILES[""RemoteFile""];$fileName = $_POST[""fileName""];        if ($fileName == """" || $fileName == null) $fileName = $file[""name""];        $filePath = dirname(__FILE__) . ""/upload/"";        if (!file_exists($filePath)) {            mkdir($filePath);        }        if (file_exists($filePath . $fileName))        {            $iniNum = 0;            if (strpos($fileName

                                                        


声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！
0
上一篇 2020年6月19日
下一篇 2020年6月19日

相关推荐

发表回复

登录后才能评论
首页
软件超市
企服市场
会员中心