在JavaScript中检测并捕获实时视频流中的二维码作为图像

Question

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

以下是我尝试过的方法：

<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侦听器添加一个回调，该侦听器随后读取捕获的二维码的尺寸并捕获该值(如示例中所示:在这里，它们使用window.requestAnimationFrame()在捕获的二维码周围绘制边界)。

Answer 2

我可以建议你在这个过程中这样做：

1. 您可以检测到二维码。因此，您不必裁剪和拼合照片，而是使用qrcode.js
2. 之类的api扫描它并将其值保存为变量，然后创建一个空画布
3. 声明一个变量：qrcode.makeCode(elText.value);
4. Then使用此代码将变量转换为另一个二维码：makeCode();
5. This通过将其放入函数中运行此命令：makeCode();
6. This将其显示为画布中的图像。

有关如何扫描二维码的参考信息，请参阅此链接：https://blog.minhazav.dev/qr-code-scanner-using-html-and-javascript/

有关如何在画布中显示它的参考信息，请参阅此链接：https://davidshimjs.github.io/qrcodejs/

如果你想要一个有效的代码示例，那么请分享你可以用来检测二维码的代码，我也许可以通过稍微编辑一下它并与你分享最终的代码来帮助你。