QR Scanner wasm

user_10408255 0
Viewed 235

I have built a laravel app which implements this qr scanner: https://github.com/maslick/koder (I am using the Vanilla code version)

But when I visit the page where the qr scanner is enabled, camera starts but I can't see the video feed on the screen.

I don't get any console errors just these messages:

all.js:9 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

all.js:9 falling back to ArrayBuffer instantiation

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for http://localhost/my-qr/public/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Any suggestions why this is happening? I tried in chrome and in firefox but still tha same problem.

This is the blade code:

@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
webassembly laravel qr-code php javascript
1 Answers

I am the author of koder. Here is what you can try:

  1. Test the vanilla-js version here. You could try different devices, laptop, mobile phone, tablet.
  2. While testing/debugging your app, make sure you serve your app via https. You could use a self-signed certificate. It turns out in some web-browsers navigator.mediaDevices.getUserMedia is available only in secure contexts (HTTPS). See details here. As a result the browser does not start your camera.
  3. To debug, checkout the repo and run:
$ yarn run vanilla-js-live
$ open http://localhost:8081

This will start a simple webserver and serve the vanilla-js example app on port 8081. The 2nd command will open your web-browser.

Although it works when served on localhost via http on a laptop (I am running Mac OSX 11.6, Chrome 96.0.4664.110), it may not be the same in your case. Especially if you start the webapp on your laptop (e.g. on 0.0.0.0:8081) and connect to it (e.g. http://LAPTOP_IP:8081) from your mobile phone, which is on the same Wifi network. Keep this in mind.

All above is meant for debugging the demo app. Your web-app is served by PHP, and you should account for that. Never the less, there's not much difference, whether it is served by PHP, nginx or AWS S3, if integrated correctly.

user_29968670
Related