高拍仪和一般家用的USB webcam的主要区别就是提供高质量的镜头,用于扫描文档,证件,书籍。学校,银行,政府部门用的比较多。这篇文章分享下在网页中使用高拍仪的方法。
原理
要在网页中打开摄像头有两种方法:
1. 使用JavaScript接口getUserMedia()在浏览器客户端直接获取视频流。
2. 创建一个服务进程去获取视频流数据,然后通过WebSocket或者HTTP请求发送到浏览器客户端中。
第一种方法虽然方便,但需要浏览器对H5有比较好的支持,限制比较多。第二种方法直接使用HTML的img元素,兼容所有的浏览器,客户端设置简单。这里分享第二种方法。
使用Dynamsoft Camera SDK在浏览器中控制高拍仪
Dynamsoft Camera SDK提供了一个后台进程,用于获取USB摄像头或者高拍仪的图像。开发者可以调用前端的JavaScript接口来创建Web应用。
想要体验的话,可以访问 https://www.dynamsoft.com/Products/dynamsoft-webcam-sdk.aspx.
图像获取:
function onCapture() {
if (!dcsObject) return;
dcsObject.camera.captureImage('image-container');
if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
alert('Capture error: ' + dcsObject.getErrorString());
}
}
图像上传:
function onUpload() {
if (!dcsObject || !imageViewer) return;
if (imageViewer.image.getCount() === 0) {
alert('Please grab an image first.');
return;
}
var counter,
url = getCurPagePath() + 'upload',
fileName = new Date().getMilliseconds() + '.jpg',
imageType = imageViewer.io.EnumImageType.JPEG,
bMultiImages = false,
imageIndexArray = [];
if (bMultiImages) {
for (counter = 0; counter < imageViewer.image.getCount(); counter++) imageIndexArray.push(counter);
} else {
imageIndexArray.push(imageViewer.image.getIndex());
}
imageViewer.io.setHTTPFormFields({
"fileName": fileName
});
imageViewer.io.httpUploadAsync(url, imageIndexArray, imageType, onUploadSuccess, onUploadFailure);
}
这里的url就是用于server端接收数据,上传图像的页面。支持的语言包括Python, PHP, Java, Node.js等。