如何使用 Web Workers 和 jsQR 在 Web 浏览器中扫描二维码

近年来，二维码变得越来越流行。它们被广泛用于传递信息和方便签到。虽然最常见于原生移动应用程序的一部分，但您也可以将 QR 扫描整合到您的网站中。

下面介绍如何将流行的 jsQR 库与 Web Workers 结合使用，以在 Web 上提供高性能的 QR 扫描体验。我们假设您已经熟悉 JavaScript 基础知识，并且您已经拥有一个可以向其中添加代码的正常运行的站点。

1. 入门

首先以预编译的可分发格式下载jsQR 库。确保它可以在您的网络服务器上公开访问；在本文中，我们假设 URL 是/jsQR.js. 如果您配置了构建例程，jsQR 也可以作为 npm 包使用。

该软件包可实时检测视频流中可见的二维码。它检索代码中的数据并将其提供给您的应用程序。

2. 获取相机信息

下一步是从浏览器获取一个 MediaStream。使用mediaDevicesAPI 从用户的相机获取新流：

const getCamera = async () => {
   
 
    if (!navigator.mediaDevices) {
   
        throw new Error("mediaDevices API unavailable.");
    }
 
    const devices = await navigator.mediaDevices.enumerateDevices();
    const cameras = devices.filter(d => (d.kind === "videoinput"));
    return cameras[0];
 
}