随着云计算技术的不断发展，许多传统的桌面应用程序正在被转换为云应用程序。这种转变带来了许多优势，包括更好的可维护性、安全性和稳定性。用户现在可以通过网络浏览器与朋友社交、存储大量个人数据、观看实时视频、编辑文档、发布博客文章甚至编写代码。本文将探讨如何使动态条码扫描器SDK与Web技术协同工作。将看到一个基于云的条码扫描器，它由网络摄像头、支持HTML5的网络浏览器、IIS网络服务器和.NET条码阅读器SDK组成。
Dynamsoft条码阅读器支持多种1D和2D条码类型，包括但不限于Code 39、Code 93、Code 128、Codabar、EAN-8、EAN-13、UPC-A、UPC-E、QRCode、DataMatrix和PDF417。它还支持多种图像类型，如BMP、JPEG、PNG、GIF、TIFF和PDF。此外，它能够检测条码信息，如条码类型、条码数量、条码值、条码原始数据、条码边界矩形、四个角的坐标和页码。
Dynamsoft条码阅读器的特点包括准确性、效率、强大的功能和灵活性。它能够在指定的图像区域内读取条码，一次性读取多个条码，并且能够读取质量差和损坏的条码。此外，它能够检测任何方向和旋转角度的条码。
Dynamsoft条码阅读器支持多种编程语言，包括C#、VB.net、Java、C++、PHP、JavaScript、Python等。
测试环境包括Microsoft Edge、Firefox、Chrome和Opera。下面是一个简单的示例代码，展示了如何在Visual Studio中创建一个新的Web项目，导入Dynamsoft.BarcodeReader.dll，并创建一个C#类BarrecodeReaderRepo来处理服务器端的条码检测。
using System;
using System.Drawing;
using System.IO;
using Dynamsoft.Barcode;
namespace BarcodeDLL
{
public class BarrecodeReaderRepo
{
private static readonly char CSep = Path.DirectorySeparatorChar;
private static readonly string StrPath = AppDomain.CurrentDomain.BaseDirectory + CSep + "Images";
private static readonly string CollectFolder = StrPath + CSep + "Collect";
public static string Barcode(string strImgBase64, Int64 iformat, int iMaxNumbers, ref string strResult)
{
if (string.IsNullOrEmpty(strImgBase64.Trim()))
throw new Exception("No barcode exist.");
return DoBarcode(strImgBase64, iformat, iMaxNumbers, ref strResult);
}
private static string DoBarcode(string strImgBase64, Int64 format, int iMaxNumbers, ref string strResult)
{
strResult = "";
var strResturn = "[";
var listResult = GetBarcode(strImgBase64, format, iMaxNumbers);
if (listResult == null || listResult.Length == 0)
{
strResult = "No barcode found. ";
return "[]"; // No barcode found
}
strResult = "Total barcode(s) found: " + listResult.Length + "";
var i = 1;
foreach (var item in listResult)
{
strResult = strResult + "  Barcode " + i + ":";
strResult = strResult + "  Type: " + item.BarcodeFormat + "";
strResult = strResult + "  Value: " + item.BarcodeText + "";
strResult = strResult + "  Region: {Left: " + item.ResultPoints[0].X + ", Top: " + item.ResultPoints[0].Y + ", Width: " + item.BoundingRect.Width + ", Height: " + item.BoundingRect.Height + "}";
i++;
}
strResturn = strResturn.Substring(0, strResturn.Length - 1);
strResturn += "]";
return strResturn;
}
public static BarcodeResult[] GetBarcode(string strImgBase64, Int64 format, int iMaxNumbers)
{
var reader = new Dynamsoft.Barcode.BarcodeReader();
var options = new ReaderOptions
{
MaxBarcodesToReadPerPage = iMaxNumbers,
BarcodeFormats = (BarcodeFormat)format
};
reader.ReaderOptions = options;
reader.LicenseKeys = "693C401F1CC972A511F060EA05D537CD";
return reader.DecodeBase64String(strImgBase64);
}
}
}
接下来，创建一个通用处理器WebcamBarcodeReader.ashx来处理HTTP请求。解析流以获取base64字符串，然后将其传递给BarrecodeReaderRepo。
在Web页面上创建一个元素，使用HTML5 API getUserMedia打开网络摄像头。
function toggleCamera() {
var videoSource = videoSelect.value;
var constraints = {
video: {
optional: [{
sourceId: videoSource
}]
}
};
startCamera(constraints);
}
function successCallback(stream) {
window.stream = stream;
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
}
function errorCallback(error) {
console.log("Error: " + error);
}
function startCamera(constraints) {
if (navigator.getUserMedia) {
navigator.getUserMedia(constraints, successCallback, errorCallback);
} else {
console.log("getUserMedia not supported");
}
}
如何将预览图像发送到远程服务器？在隐藏的画布上持续绘制帧。将画布数据转换为base64字符串，并通过Ajax发送。如果没有检测到任何内容，使用setTimeout方法再次发送预览数据进行检测。
context.drawImage(videoElement, 0, 0, width, height);
var base64 = dbrCanvas.toDataURL('image/png', 1.0);
var data = base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "");
var imgData = JSON.stringify({
Base64Data: data,
BarcodeType: getBarcodeFormat()
});
$.ajax({
url: 'WebcamBarcodeReader.ashx',
dataType: 'json',
data: imgData,
type: 'POST',
complete: function (result) {
console.log(result);
if (isPaused) {
return;
}
var barcode_result = document.getElementById('dbr');
var aryResult;
aryResult = result.responseText.split('|');
if (result.responseText.indexOf("No barcode") == -1) {
resetButtonGo();
barcode_result.innerHTML = result.responseText.substring(aryResult[0].length + 1);
} else {
barcode_result.innerHTML = result.responseText;
setTimeout(scanBarcode, 200);
}
}
});
想要尝试上述网络摄像头条码扫描器演示吗？下载Dynamic Barcode Reader的30天免费试用版，开始构建条码应用程序。
Dynamic Barcode Reader 30天免费试用