Vue 3 - 输入类型=文件不读取二维码。有哪些替代方案？

Question

我正在构建一个 Web 应用程序，它有 2 个实例，一个用于桌面，一个用于移动设备，它们通过二维码同步。 我试图让用户在单击打开手机摄像头的按钮后扫描二维码（二维码扫描仪已经实现，它可以工作）。

使用输入类型=文件打开我的相机，但二维码无法扫描。 从手机上手动打开相机扫描二维码，我就可以导航到给定的链接。 我猜测由于输入类型=文件正在等待文件上传，因此扫描被禁用。

这是我用过的：

<input type="file" name="image" accept="image/*" capture="environment">

关于如何实现这个有什么想法吗？ 预先感谢！

Answer 1

您应该使用 Javascript 将相机作为网络摄像头进行访问。这将允许您在 JS 中处理视频流。有诸如 QR Scanner 之类的库提供了扫描 QR 码的方法。他们在自述文件中提供了一些示例代码：

<video id="webcam"></video>
<script src="path/to/qr-scanner.umd.min.js"></script>
<script>
    const videoElem = document.getElementById("webcam");
    const qrScanner = new QrScanner(
        videoElem,
        result => console.log('decoded qr code:', result),
        { /* your options or returnDetailedScanResult: true if you're not specifying any other options */ },
    );
</script>