使用 Dynamsoft 从桌面网络摄像头拍照并上传到 Web 浏览器
使用 JavaScript 控制 IE、Firefox 和 Chrome 中的网络摄像头或内置笔记本电脑网络摄像头。
在某些场景下，例如政府部门的访客监控模块或医院的患者跟踪模块，我们可能需要拍摄人脸、患者图表、用户 ID 等照片，然后将其上传到中央服务器。我们如何为 Web 应用程序实现这一点？
如何在浏览器中与连接到计算机的网络摄像头进行交互？
JavaScript 无法直接访问网络摄像头。但是，可以通过以下选项实现：
- Flash – Web 应用程序请求使用摄像头的权限，用户会看到一个对话框，指示网站希望使用摄像头。用户接受后，应用程序将能够从摄像头捕获图像。
首先，您需要初始化并连接摄像头
- HTML5 – 最大的障碍是只有少数浏览器版本支持 HTML 5。详细信息 >>
- 第三方浏览器插件 – Internet Explorer 可以通过 ActiveX 控件与成像外围设备进行交互。Firefox 和 Chrome 可以通过 Netscape Plugin Application Programming Interface (NPAPI) 的插件执行相同的操作。
在本文中，我们将重点介绍第三种选项——ImageCapture Suite。与前两种选项不同，开发人员需要单独处理摄像头初始化、图像捕获、编辑编码和上传，而所有这些都在 ImageCapture Suite 中进行了封装。
网络摄像头库简介
Dynamsoft 的 ImageCapture Suite 是一个浏览器插件，它使用户能够从网络摄像头捕获图像、进行编辑，然后将图像上传/保存到数据库、Web 服务器或本地磁盘。此外，它还可以将实时视频流捕获到容器中，并抓取快照导出为文件/二进制数据。该插件适用于所有兼容 Windows Image Acquisition (WIA) 和 USB Video Class (UVC) 的网络摄像头。
为不同浏览器提供了三个版本：ActiveX 版本适用于 IE，Plugin 和 Mac 版本适用于 Windows 和 Mac OS X 上的 Firefox、Chrome、Safari。
| 客户端 | 服务器端 |
| JavaScript、VBScript、HTML | ASP.NET、PHP、JSP、ASP、VB.NET 等 |
ActiveX 版本 -  x86 x64插件版本 -     适用于 WindowsMac 版本 - 适用于 Mac OS X | IIS、Tomcat、Apache 等 |
在这里可以看到一个正在工作的应用程序：http://www.dynamsoft.com/Demo/Webcam/online_demo_scan.aspx
示例代码
客户端 JavaScript
1. 初始化 ImageCapture Suite
您可以在安装文件夹的Resources文件夹中找到用于部署的ImageCapture Suite相关文件。
- ImageCaptureSuite.cab
- ImageCaptureSuitex64.cab
- ImageCaptureSuitePlugIn.msi
- ImageCaptureSuiteMacEditionTrial.pkg
ActiveX 版本
有适用于 IE 对应版本的 32 位和 64 位 CAB 文件。请根据需要选择合适的版本。ImageCapture Suite 的试用版和完整版使用不同的类 ID。
// For IE, render the ActiveX Object
objString = "<object id='" + DW_ObjectName + "' style='width:" + DW_Width + "px;height:" + DW_Height + "px'";
if (DW_InWindowsX86)
objString += "codebase='" + DW_CABX86Path + "#version=" + DW_VersionCode + "' "; // For 32-bit IE, render the x86 cab file
else
objString += "codebase='" + DW_CABX64Path + "#version=" + DW_VersionCode + "' "; // For 64-bit IE, render the x64 cab file
var temp = DW_IsTrial ? DW_TRAILCLASSID : DW_FULLCLASSID;
objString += " classid='clsid:" + temp + "' viewastext>";
objString += " <param name='Manufacturer' value='DynamSoft Corporation' />";
插件和 Mac 版本
objString = " <embed id='" + DW_ObjectName + "'style='display: inline; width:" + DW_Width + "px;height:" + DW_Height + "px' id='" + DW_ObjectName + "' type='" + DW_MIMETYPE + "'";
objString += " OnPostTransfer='Dynamsoft_OnPostTransfer' OnPostAllTransfers='Dynamsoft_OnPostAllTransfers'";
objString += " OnMouseClick='Dynamsoft_OnMouseClick' OnPostLoad='Dynamsoft_OnPostLoadfunction'";
objString += " OnImageAreaSelected = 'Dynamsoft_OnImageAreaSelected'";
objString += " OnImageAreaDeSelected = 'Dynamsoft_OnImageAreaDeselected'";
objString += " OnMouseDoubleClick = 'Dynamsoft_OnMouseDoubleClick'";
objString += " OnMouseRightClick = 'Dynamsoft_OnMouseRightClick'";
objString += " OnTopImageInTheViewChanged = 'Dynamsoft_OnTopImageInTheViewChanged'";
objString += " OnGetFilePath='Dynamsoft_OnGetFilePath'";
if (DW_InWindows)
objString += " pluginspage='" + DW_MSIPath + "'></embed>"; // For non-IE on Windows, render the plugin edition
else
objString += " pluginspage='" + DW_PKGPath + "'></embed>";// For non-IE on Mac OS X, render the Mac edition
2. 视频预览
DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked; // Display the live video stream
3. 拍照
if (DW_InWindows) {
DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage();
4. 编辑
ImageCapture Suite 支持基本的图像编辑功能，包括旋转、裁剪、镜像、翻转、擦除和更改图像大小。它还支持多张图像选择、切换图像、放大/缩小。
5. 上传
DWObject.HTTPUploadThroughPostEx(
strHTTPServer,
DWObject.CurrentImageIndexInBuffer,
strActionPage,
uploadfilename,
strImageType
) ;
服务器端代码
ImageCapture Suite 支持 ASP.NET、PHP、JSP、ASP、VB.NET 等调用服务器端函数。以下是 C# ASP.NET 的一些示例。
捕获的图片可以上传到远程服务器的文件系统或数据库。之后，可以将其下载到客户端进行查看、编辑等操作。
1. 保存到数据库
这是使用 C# 将图像保存到数据库的示例
<%@ Page Language="C#" %>
<%
try
{
String strImageName;
int iFileLength;
HttpFileCollection files = HttpContext.Current.Request.Files;
HttpPostedFile uploadfile = files["RemoteFile"];
strImageName = uploadfile.FileName;
iFileLength = uploadfile.ContentLength;
Byte[] inputBuffer = new Byte[iFileLength];
System.IO.Stream inputStream;
inputStream = uploadfile.InputStream;
inputStream.Read(inputBuffer,0,iFileLength);
String strConnString;
strConnString = "Data Source=localhost\\sqlexpress;Initial Catalog=DemoWebcam;User ID=id;Pwd=pwd;";
System.Data.SqlClient.SqlConnection sqlConnection = new System.Data.SqlClient.SqlConnection(strConnString);
String SqlCmdText = "INSERT INTO tblWebcam (strImageName,imgImageData) VALUES (@ImageName,@Image)";
System.Data.SqlClient.SqlCommand sqlCmdObj = new System.Data.SqlClient.SqlCommand(SqlCmdText, sqlConnection);
sqlCmdObj.Parameters.Add("@Image",System.Data.SqlDbType.Binary,iFileLength).Value = inputBuffer;
sqlCmdObj.Parameters.Add("@ImageName",System.Data.SqlDbType.VarChar,255).Value = strImageName;
sqlConnection.Open();
sqlCmdObj.ExecuteNonQuery();
sqlConnection.Close();
}
catch
{
}
%>
将此文件命名为SavetoDB.aspx，您可以像使用SavetoFile.aspx一样使用它。还有许多其他用于保存文件的函数，例如 HTTPUploadThroughPostAsMultiPageTIFF、HTTPUploadAllThroughPostAsPDF、HTTPUploadThroughPostAsMultiPagePDF 等。
2. 从服务器下载文件
以下代码是用于将图像文件从服务器下载到客户端的示例。您需要将文件名、扩展名和图像索引传递给程序。
<%@ Page Language="C#"%>
<%
//get temp file name
System.Web.HttpRequest request = System.Web.HttpContext.Current.Request;
String strImageName;
String strImageExtName;
String strImageID;
strImageName = request["ImageName"];
strImageExtName = request["ImageExtName"];
strImageID = request["iImageIndex"];
String strConnString;
strConnString = "Data Source=localhost\\sqlexpress;Initial Catalog=DemoWebcam;User ID=id;Pwd=pwd;";
System.Data.SqlClient.SqlConnection sqlConnection = new System.Data.SqlClient.SqlConnection(strConnString);
System.Data.SqlClient.SqlCommand sqlCmdObj = new System.Data.SqlClient.SqlCommand("SELECT imgImageData FROM tblWebcam WHERE iImageID= " + strImageID, sqlConnection);
sqlConnection.Open();
System.Data.SqlClient.SqlDataReader sdrRecordset = sqlCmdObj.ExecuteReader();
sdrRecordset.Read();
long iByteLength;
iByteLength = sdrRecordset.GetBytes(0, 0, null, 0, int.MaxValue);
byte[] byFileData = new byte[iByteLength];
sdrRecordset.GetBytes(0, 0, byFileData, 0, Convert.ToInt32(iByteLength));
sdrRecordset.Close();
sqlConnection.Close();
sdrRecordset = null;
sqlConnection = null;
Response.Clear();
Response.Buffer = true;
if(strImageExtName == "bmp"){
Response.ContentType = "image/bmp";
}else if(strImageExtName == "jpg"){
Response.ContentType = "image/jpg";
}else if(strImageExtName == "tif"){
Response.ContentType = "image/tiff";
}else if(strImageExtName == "png"){
Response.ContentType = "image/png";
}else if(strImageExtName == "pdf"){
Response.ContentType = "application/pdf";
}
try{
String fileNameEncode;
fileNameEncode = HttpUtility.UrlEncode(strImageName, System.Text.Encoding.UTF8);
fileNameEncode = fileNameEncode.Replace("+", "%20");
String appendedheader = "attachment;filename=" + fileNameEncode;
Response.AppendHeader("Content-Disposition", appendedheader);
Response.OutputStream.Write(byFileData, 0, byFileData.Length);
}
catch(Exception){
Response.Flush();
Response.Close();
}
%>
获取示例
要亲自尝试上述功能，您可以下载ImageCapture Suite 的 30 天免费试用版。可以在 SDK 的安装文件夹中找到示例。
如果您有任何疑问，可以通过 support@dynamsoft.com 联系我们的支持团队。