使用 HTML5 和 Web 浏览器进行 Webcam 条形码扫描

Dynamsoft

0/5 (0投票)

2016年5月16日

CPOL

2分钟阅读

89403

如何构建用于云服务的网络摄像头条形码扫描器？将 Dynamic Barcode Reader SDK 部署到您的 Web 服务器（IIS、Apache、Nginx 等）。在任何支持 HTML5 的 Web 浏览器中持续捕获网络摄像头中的图像，并将 base64 编码的图像数据发送到云条形码服务进行检测。

下载演示

引言

随着互联网连接速度越来越快，越来越多的人倾向于拥抱云服务。任何桌面应用程序都可以转换为云应用程序，从而具有更好的可维护性、安全性和稳定性。最终用户可以使用 Web 浏览器与社交朋友联系、存储大量个人数据、观看直播视频、编辑文档、发布博客文章甚至编写代码。在本文中，我们将简要了解如何使 Dynamic Barcode Reader SDK 与 Web 技术配合使用。您将看到一个基于云的条形码扫描器，它由网络摄像头、支持 HTML5 的 Web 浏览器、IIS Web 服务器和 .NET 条形码阅读器 SDK 组成。

为什么选择 Dynamsoft Barcode Reader

支持的 1D/2D 条码类型

1D：Code 39, Code 93, Code 128, Codabar, EAN-8, EAN-13, UPC-A, UPC-E, Interleaved 2 of 5 (ITF), Industrial 2 of 5 (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5), ITF-14
2D：QRCode, DataMatrix 和 PDF417

支持的图像类型

BMP、JPEG、PNG、GIF、TIFF 和 PDF

检测到的条码信息

条码类型
条形码计数
条码值（字符串形式）
条码原始数据（字节形式）
条码边界矩形
四个角的坐标
页码

特点

准确：读取选定图像的指定区域内的条形码。
有效：读取一个图像中的多个条形码。
强大：读取质量差和损坏的条形码。
灵活：以任何方向和旋转角度检测条形码。

支持的编程语言

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 + "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 "[]";
            }
            strResult = "Total barcode(s) found: " + listResult.Length + "";
            var i = 1;
            foreach (var item in listResult)
            {
                strResult = strResult + "&nbsp&nbspBarcode " + i + ":";
                strResult = strResult + "&nbsp&nbsp&nbsp&nbspType: " + item.BarcodeFormat + "";
                strResult = strResult + "&nbsp&nbsp&nbsp&nbspValue: " + item.BarcodeText + "";
                strResult = strResult + "&nbsp&nbsp&nbsp&nbspRegion: {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

public class WebcamBarcodeReader : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            try
            {
                // 1. Get Base64 Stream
                context.Request.InputStream.Position = 0;
                string jsonString;
                using (var inputStream = new StreamReader(context.Request.InputStream))
                {
                    jsonString = inputStream.ReadToEnd();
                }
                var postData = JsonConvert.DeserializeObject<PostData>(@jsonString);
                
                if (postData == null) return;
                
                // 2. reader barcode and output result
                var strResult = "";
                BarrecodeReaderRepo.Barcode(postData.Base64Data, postData.BarcodeType, 10, ref strResult);
                if (strResult.IndexOf("No barcode found", StringComparison.Ordinal) == -1)
                {
                    strResult = "|" + strResult; 
                }

                strResult += DateTime.Now;
                context.Response.Write(strResult);
            }
            catch (Exception exp)
            {
                context.Response.Write("Error: " + exp.Message);
            }
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }

        public class PostData
        {
            public string Base64Data { get; set; }
            public int BarcodeType { get; set; }
        }
    }

创建一个元素 <video></video>。使用 HTML5 API getUserMedia 在网页中打开网络摄像头

function toggleCamera() {
    var videoSource = videoSelect.value;
    var constraints = {
        video: {
            optional: [{
                sourceId: videoSource
            }]
        }
    };

    startCamera(constraints);
}

// Start camera preview on <video></video>
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);
// convert canvas to base64
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('|');

        // display barcode result
        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);
        }
    }
});

在线演示

立即尝试!

获取 SDK 和示例

对上述网络摄像头条形码扫描器演示感兴趣吗？下载 Dynamic Barcode Reader 的 30 天免费试用版来构建您的条形码应用程序。
Dynamic Barcode Reader 30 天免费试用

有关如何使用 Dynamic Barcode Reader SDK 的更多示例，请访问以下页面
Dynamic Barcode Reader 演示

再一点

Dynamsoft Barcode Reader SDK 不仅适用于 Windows，还适用于 Linux 和 Mac OS X。您可以在自己喜欢的平台上尽情使用它。如果您有任何疑问，请随时联系 support@dynamsoft.com。