我已经建立了一个laravel应用程序,实现了这个qr扫描仪:https://github.com/maslick/koder(我使用的是Vanilla代码版本)
但是当我访问启用qr扫描仪的页面时,相机启动,但我看不到屏幕上的视频源。
我没有得到任何控制台错误只是这些消息:
all. js:9 wasm流式编译失败:TypeError:在“WebAssembly”上执行“编译”失败:响应MIME类型不正确。预期的“应用程序/wasm”。
all. js:9回退到ArrayBuffer实例化
DevTools无法加载源代码映射:无法加载chrome-扩展的内容://fheoggkfdfchfphcefdbepaooicaho/source Map/chrome/iframe_handler.map:HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEMEDevTools无法加载源代码映射:无法加载chrome-扩展的内容://fheoggkfdfchfphceefdbepaooicaho/source ceMap/chrome/content.map:HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEMEDevTools无法加载源代码映射:无法加载http://localhost/my-qr/public/js/popper.js.map的内容:HTTP错误:状态代码404,net::ERR_HTTP_RESPONSE_CODE_FAILURE
有什么建议为什么会发生这种情况吗?我在chrome和fire fox中尝试过,但仍然是同样的问题。
这是刀片代码:
@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
我是koder的作者。以下是你可以尝试的:
vanilla-js
版本。您可以尝试不同的设备,笔记本电脑,手机,平板电脑。https
为您的应用程序提供服务。您可以使用自签名证书。事实证明,在某些Web浏览器中,Navigator. mediaDevices.getUserMedia
仅在安全上下文(HTTPS)中可用。查看此处的详细信息。因此浏览器不会启动您的相机。$ yarn run vanilla-js-live
$ open http://localhost:8081
这将启动一个简单的网络服务器并在端口8081上提供vanila-js
示例应用程序。第二个命令将打开您的网络浏览器。
虽然它在笔记本电脑上通过超文本传输协议
在localhost上提供服务时有效(我运行的是Mac OSX 11.6,Chrome96.0.4664.110),但在您的情况下可能不一样。特别是如果您在笔记本电脑上启动webapp(例如0.0.0.0:8081)并从您的手机连接到它(例如超文本传输协议://LAPTOP_IP: 8081),它位于同一Wifi网络上。请记住这一点。
以上所有内容都是为了调试演示应用程序。您的网络应用程序由PHP提供服务,您应该考虑到这一点。无论如何,如果集成正确,无论是PHP、nginx还是AWSS3提供服务,都没有太大区别。