从浏览器检测条形码！！！

背景

我刚刚安排了我的首场演唱会，将于12月中旬在香港举行。在整理售票流程时，我决定自己搭建一个简单的系统。人们可以通过Stripe支付链接购票。然后会触发一个Webhook，生成一封带有二维码的电子邮件。演唱会当天，观众可以在门口扫描二维码入场。我在寻找二维码检测解决方案时，发现了这个很棒的条形码检测API。

我还没看过太多相关的教程，所以决定记录一下我的探索过程。希望你会喜欢！

文章概要

本文将分为两部分：

从摄像机获取信息
从摄像头中检测条形码

第 1 部分：从摄像头获取信息

在本节中，我们的目标是将摄像机流放到页面上。

首先，我们需要一个<video>元素来显示摄像机流。

<video id="stream" style="width: 100vw; height: 100vh;" />

然后，我们可以简单地使用它getUserMedia来抓取媒体流；将该流直接传递给视频元素。

const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    facingMode: { ideal: 'environment' }
  },
  audio: false
});
const videoEl = document.querySelector('#stream');
videoEl.srcObject = stream;
await videoEl.play();

请注意，此{ ideal: 'environment' }选项仅用于使用手机后置摄像头。点击此处了解更多信息。

通过这几行代码，我们捕获了摄像头的图像并将其显示在屏幕上。详情请参阅 codepen。

第 2 部分：从摄像头图像中检测条形码

条形码检测 API提供了一个简单的条形码检测 API。您只new BarcodeDetector(...)需要barcodeDetector.detect(videoElement)。

因此我们将添加这两行：

/* code from part one */


const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
const barcodes = await barcodeDetector.detect(videoEl)

现在，条形码检测器将在视频开始播放的那一刻激活。我们可能不会期望在人们打开摄像头的那一刻找到任何二维码。因此，我们需要持续查看视频流并进行通话，.detect(...)直到找到一些条形码。

为了做到这一点，我们可以.detect每隔 X 毫秒执行一次，直到获取到一些条形码。只需使用window.setInterval这个即可。

/* code from part one */

const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
window.setInterval(async () => {
  const barcodes = await barcodeDetector.detect(videoEl);
  if (barcodes.length <= 0) return;
  alert(barcodes.map(barcode => barcode.rawValue));
}, 1000)

现在摄像头每秒都会扫描一次条形码！查看 Codepen，尝试加载二维码进行测试！这是“hello world”的二维码。

结尾

最终结果（codepen）：

<video id="stream" style="width: 100vw; height: 100vh;"/>

(async () => {
const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    facingMode: {
      ideal: "environment"
    }
  },
  audio: false
});
const videoEl = document.querySelector("#stream");
videoEl.srcObject = stream;
await videoEl.play();

const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
window.setInterval(async () => {
  const barcodes = await barcodeDetector.detect(videoEl);
  if (barcodes.length <= 0) return;
  alert(barcodes.map(barcode => barcode.rawValue));
}, 1000)
})();

编码愉快！

文章来源：https://dev.to/ycmjason/detecting-barcode-from-the-browser-d7n