QR Scanner wasm

Question

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

Do you get the exact same error in all browsers? It doesn't appear to be anything to do with PHP or Laravel, though — ADyson, Jun 17 '21 at 08:32
Thats true I just added this information just in case it is usefull... Yes same messages in firefox too — netdev, Jun 17 '21 at 08:35
Actually I don't think the errors are relevant - see https://stackoverflow.com/questions/61339968/devtools-failed-to-load-sourcemap-could-not-load-content-for-chrome-extension — ADyson, Jun 17 '21 at 08:59
If you don't see a video when the camera starts then maybe a) you've not selected the correct device, b) the camera isn't working or isn't connected, c) you didn't give Chrome permission to use your camera for the site that your code is on, or d) someone put sticky tape over the lens :-) — ADyson, Jun 17 '21 at 09:00
@ADyson I dont see the canvas... I get the permission dialog, I see my laptop's camera light on but I dont see the canvas with the actual video feed on the page — netdev, Jun 17 '21 at 09:04
Ok. Sorry, before I should have said that I meant the second set of errors isn't relevant. The first one almost certainly is though. This looks like a very similar scenario, perhaps one of the answers will help you: https://stackoverflow.com/questions/50589083/typeerror-failed-to-execute-compile-on-webassembly-incorrect-response-mime . It looks like the webassesmbly failed to download properly because of the incorrect MIME type the server is giving it. — ADyson, Jun 17 '21 at 09:19
Then you need to work out what has changed since it stopped working, and revert those changes one by one until it works again. — ADyson, Jun 17 '21 at 09:39
Make sure you serve your webapp via ``https``. See details here: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia — maslick, Dec 23 '21 at 10:58

maslick · Answer 1 · 2021-12-27T21:20:12.030

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

Test the vanilla-js version here. You could try different devices, laptop, mobile phone, tablet.
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.
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.

QR Scanner wasm

1 Answers1