web浏览器端识别条形码

最近做需求的时候遇到一个场景需要在浏览器端调用摄像头实现前端识别条形码，于是搜刮了一番，找了一下相关的资料整理如下

chrome自带的条形码识别

Chrome 57 之后的版本实现了一批图形图像识别的API，Shape Detection API 相关的信息如下

• 人脸识别（FaceDetector）：可以给编码器或自动对焦放放提供提示，也可以给识别的用户做标记等。

• 文本识别（TextDetector）：OCR 配合语音接口（语音能力下文也有提及），朗读图片中的文字等。

• 条码识别（BarcodeDetector）：识别网页中的条形码/二维码，并作相应的动作，比如链接跳转等

实际操作

在实际操作之前，我们需要先在 Chrome 浏览器中打开实验性功能chrome://flags页面，然后搜索 Experimental web Platform features 功能并启用（Enabled）即可。注意这里启用功能之后需要重新启动 Google Chrome 之后才能生效。然后我们可以用下面命令在 Console 中检测功能是否正常

window.FaceDetector
window.BarcodeDetector
window.TextDetector

实际的使用可以见一下链接

• https://wicg.github.io/shape-detection-api/index-zh-cn.html#barcode-detection

• https://www.vtrois.com/chrome-shape-detection-api.html

条码识别（BarcodeDetector）示例如下

    const barcodeDetector = new BarcodeDetector();
    const imageSource = document.querySelector('img');
 
    barcodeDetector.detect(imageSource)
    .then(handleDetectedBarcodes)
    .catch(console.error);

此API总结：

实际上移动端的APP使用的更多的识别条形码的库是zxing,这个库也是谷歌的，所以我个人推测chrome的条形码识别的API底层也许是用这个库，这个库的API有个缺点就是不能识别斜着的条形码。摄像头的视图需要和条形码视图保持平行.如果他们两个有一定夹角，那么是识别不出条形码的内容的。

下面介绍一下另外一个条形码识别的库

quaggajs

这个库是专门识别条形码的。官网链接如下https://serratus.github.io/quaggaJS/ 打开官网就会看到相关的示例，这里不做过多的描述，下面放一个实际示例 

可以看到他的识别准确率是很高的

这里重点介绍一下相关参数的调节

打开在线链接https://serratus.github.io/quaggaJS/examples/livewlocator.html 会有以下几个参数可以根据实际需要调节

• Barcode-Type
  

• Resolution (long side)
  

• Patch-Size
  

• Half-Sample
  

• Workers
  

• Camera

Barcode-Type

条形码的类型,实际上条形码有很多种类型，每种类型的编码规则不一样，这里根据你的需要设置

Resolution 分辨率,Patch-Size 条形码尺寸

这两个参数是互相影响的，根据实际的摄像头分辨率和你的条形码尺寸来自己调节，以达到最好的识别效果， ex：我的高拍仪设置的参数是：1600px 和small的时候识别率最高

Workers

在识别条形码的过程中调用的workers数量。默认4个，使用4个感觉已经很快了。

现代计算机的CPU中有多个物理处理器内核（通常为两个或四个内核），但每个物理内核通常也能够使用高级调度技术一次运行多个线程。因此，例如，四核CPU可能提供八个逻辑处理器内核。逻辑处理器内核的数量可用于测量可以一次有效运行的线程数量，而无需进行上下文切换

navigator.hardwareConcurrency //获取能实际调用的内核数量

Half-Sample

可以根据实际场景确定是否需要开启

温馨提示

实际测试的时候建议不要手持条形码测试，因为手绘抖动，影响摄像头的识别。建议把条形码放在高拍仪下面或者静止的物体上。 这样能提高识别率