QR 扫描仪答案

【问题标题】：QR Scanner wasmQR 扫描仪
【发布时间】：2021-09-02 00:56:42
【问题描述】：

我已经构建了一个实现这个二维码扫描器的 laravel 应用程序：https://github.com/maslick/koder （我使用的是香草代码版本）

但是当我访问启用 qr 扫描仪的页面时，相机会启动，但我无法在屏幕上看到视频源。

只有这些消息，我没有收到任何控制台错误：

all.js:9 wasm 流编译失败：TypeError：无法在“WebAssembly”上执行“编译”：响应 MIME 类型不正确。预期的“应用程序/wasm”。

all.js:9 回退到 ArrayBuffer 实例化

DevTools 无法加载源地图：无法加载内容铬扩展：//fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map： HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME DevTools 未能加载源地图：无法加载内容 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME DevTools 未能加载源地图：无法加载内容 http://localhost/my-qr/public/js/popper.js.map：HTTP 错误：状态代码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE

有什么建议为什么会发生这种情况？我在 chrome 和 firefox 中尝试过，但仍然是同样的问题。

这是刀片代码：

@extends('layouts.app')

@section('content')
<div class="canvas" style="width:100%;">
    <canvas id="canvas"></canvas>
</div>
<div class="scanBtn">
    <a id="btnStart" class="myHref">start scan</a>
    <a id="btnStop" class="myHref">stop scan</a>
</div>
<div class="barcode" id="result" style="background:white"></div>
@endsection

【问题讨论】：

您在所有浏览器中都得到完全相同的错误吗？不过，这似乎与 PHP 或 Laravel 没有任何关系
没错，我只是添加了这些信息，以防万一它有用...是的，Firefox 中也有同样的消息
实际上我认为这些错误无关紧要 - 请参阅*.com/questions/61339968/…
如果您在相机启动时没有看到视频，那么可能 a) 您没有选择正确的设备，b) 相机不工作或未连接，c) 您没有允许 Chrome 将您的相机用于您的代码所在的网站，或者 d) 有人在镜头上贴了胶带:-)
@ADyson 我没有看到画布...我得到了权限对话框，我看到笔记本电脑的摄像头灯亮着，但我没有看到页面上带有实际视频源的画布

标签： javascript php laravel qr-code webassembly

【解决方案1】：

我是koder 的作者。您可以尝试以下方法：

测试vanilla-js 版本here。您可以尝试不同的设备，笔记本电脑、手机、平板电脑。
在测试/调试您的应用时，请确保您通过https 为您的应用提供服务。您可以使用自签名证书。事实证明，在某些网络浏览器中，navigator.mediaDevices.getUserMedia 仅在安全上下文 (HTTPS) 中可用。详情见here。因此，浏览器不会启动您的相机。
要调试，请检查 repo 并运行：

$ yarn run vanilla-js-live
$ open http://localhost:8081

这将启动一个简单的 webserver 并在端口 8081 上提供 vanilla-js 示例应用程序。第二个命令将打开您的网络浏览器。

虽然它在笔记本电脑上通过http 在本地主机上服务时有效（我运行的是 Mac OSX 11.6，Chrome 96.0.4664.110），但在您的情况下可能不一样。特别是如果您在笔记本电脑上启动 webapp（例如在 0.0.0.0:8081 上）并从您的手机连接到它（例如 http://LAPTOP_IP:8081），它在同一个 Wifi 上网络。请记住这一点。

以上所有内容都是为了调试demo app。您的 web 应用程序由 PHP 提供服务，您应该考虑到这一点。无论如何，如果集成正确，无论是由 PHP、nginx 还是 AWS S3 提供服务，都没有太大区别。

【讨论】：