从JavaScript的实时视频流中检测并捕获QR码作为图像

Question

我正在一个项目中，我必须在该项目中从实时视频流中检测qr代码，然后将其捕获为图像。我正在成功扫描二维码，但不知道如何检测它并将该区域捕获为图像？

这是我尝试过的：

<video id="preview"></video>

<script type="text/javascript">

    let scanner = new Instascan.Scanner({video: document.getElementById('preview')});
    scanner.addListener('scan', function (content) {
        alert(content);
    });
    Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
            scanner.start(cameras[0]);
        } else {
            console.error('No cameras found.');
        }
    }).catch(function (e) {
        console.error(e);
    });
</script>

Answer 1

这是使用jsQR的演示：https://cozmo.github.io/jsQR/我不知道Instascan.Scanner，但我建议两者的工作原理相似。因此，您可以向instascan侦听器中添加一个回调，该回调然后读取捕获的QR代码的尺寸并进行捕获（例如在示例中：此处它们使用window.requestAnimationFrame（）在捕获的QR代码周围绘制边框）。