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
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.
Related
I am trying to run the sample code for cisco jabber/web communication and get the following console outputs:
[cwic.ext] 12:23:32.632 loaded with origin: http://localhost cwic_plugin.js:1
[cwic.ext] 12:23:32.642 append_iframe onload cwic_plugin.js:1
[cwic.ext] 12:23:32.645 initializing extension channel Object contentscript.js:1
[cwic.ext] 12:23:32.645 Content script connected to Cisco extension: mbhnoblcplfcookpoennihpndjobapeo contentscript.js:1
[cwic.ext] 12:23:32.645 forward ciscoSDKClientMessage 'init' to background script contentscript.js:1
[cwic.ext] 12:23:32.791 send ciscoChannelServerMessage 'HostDisconnect' to client contentscript.js:1
[cwic][ERROR][12:23:32.792] Connection with add-on has been lost e here Logger.js:110
It tried to run an own application that only initialize the cwic and get the same problem. I tried it with two other devices, with firefox and edge. Same issue. Is there something i forgot?!
Many Thanks for help!
I am using:
Cisco Framework Version 11.8.3
Cisco Web Communicator
Chrome Add-On Version 11.8.2.1
Google Chrome Version 103.0.5060.134 (64-Bit)
Apache Version 2.4.53
OpenSSL Version 1.1.1n
PHP Version 8.1.6
I am using Expo SDK Version: 36 to generate a PWA.
curl http://$LOCAL_IP:19006/expo-service-worker.js: OK 200
curl http://localhost:19006/expo-service-worker.js: FAIL => Instead of serving expo-service-worker.js it serve the static asset index.html.
It cause the following error in the console:
Failed to register service-worker DOMException: Failed to register a ServiceWorker for scope ('http://localhost:19006/') with script ('http://localhost:19006/expo-service-worker.js'): The script has an unsupported MIME type ('text/html').
The file expo-service-worker.js is not served and this is problematic when you must implement web push notification because only localhost can work without it when site is not served with HTTPS.
Related issues:
https://github.com/expo/expo-cli/issues/2063
https://github.com/expo/expo-cli/issues/2468
How can I fix it?
Is Mozilla Thimble explicitly doing something to prevent service-workers from loading?
I am preparing a tutorial for teenagers on how to create a web game and install it on their smartphone. I am getting them to use Mozilla Thimble so that they can see the results of their changes immediately.
In order to trigger the web app installation banner on Android, the game needs to register a service worker. However, I am getting the following error in Google Chrome.
ServiceWorker registration failed:
TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
The service-worker.js is registered inside a main.js script. I have checked that the URL provided in the main.js script is correct. I have loaded the service-worker.js script directly through the index.html page, to ensure that it loads. I have checked within the service-worker.js script that its URL is exactly the same as what main.js is asking for. Mozilla Thimble is delivered over the "https://" protocol.
In Firefox, the error is different:
ServiceWorker registration failed:
ServiceWorker script at https://mozillathimblelivepreview.net/...dd2e/service-worker.js
for scope https://mozillathimblelivepreview.net/...dd2e/ encountered an error during installation.
Empty String
When I upload the files to my own site, they run with no problem:
ServiceWorker registration successful with scope: https://dev.example.com/thimble/
Is there some way I can encourage Mozilla Thimble to get the service-worker script to load? If so, it will considerably simplify the production process for my students.
I have a node js server on a docker container runing on digital ocean, that serve an angular 2 application bundeled and traspiled with webpack.
When I try to get the application from any computer it works, but if I try to get it from my android device or ipad it fails to load the js files.
The browsers shows this errors:
Failed to load resource: net::ERR_CONNECTION_REFUSED common.js
Failed to load resource: net::ERR_CONNECTION_REFUSED vendor.js
Failed to load resource: net::ERR_CONNECTION_REFUSED app.js
Again it works on desktop chrome/firefox/safari.
Did you check if you has AdBlock or something similar in your devices? Sometimes it can cause errors like this.
Check too if you are using a proxy in the devices connection.
I hope my answer will be helpfulp!
I am using samsung galaxy s2 version 2.3.3, i open a web page in android default web browser.
In the Page i put console.log("some info") to debug the page, but i am unable to see the console.log output in my device.Please help me in this.Thanks in advance.
Warning: No Longer Working!
This solution appears to no longer be functional as the web tool has not been maintained over the years.
Try using JSConsole.com. It's a remote debugger for JavaScript. The setup is basically just injecting a <script> tag in your page. Once connected you can read all the console.log calls from the remote page on JSConsole, as well as execute commands on the client.
Steps to Setup
Go to JSConsole Home Page, and type :listen.
Copy the resulting <script src="http://jsconsole.com/remote.js?..."></script>.
Drop that into the page you need to debug.
Open your page in any browser (phone, tablet, desktop, etc). All console.log calls will be forwarded to the JSConsole.com window.
There are more details plus a couple of useful videos on the Remote Debugging Page.
In Two ways we can see console.log messages
Using WEINRE
Using Eclipse
Method 1:
Use WEINRE remote WEb Inspector in REmote. it is a nodejs package. Steps to install WEINRE.
Install nodejs
run this command to install weinre :npm install -g weinre (for
MACsudo npm install -g weinre)
Then launch WEINRE: weinre --boundHost -all- --httpPort 8082, here
8082 is port number where WEINRE is launched.
Then add the following script tag in the HTML/web page you want to
debug or to see console messages, <script
src="http://xx.xx.xx.xx:8082/target/target-script-min.js#weinredemo"></script>
xx.xx.xx.xx is the IP of your machine.
weinredemo is the ID for your page and you can use any of our own.
Then open the page , where you want to see console messages in any mobile device.
Open this page any webkit
browser,http://localhost:8082/client/#weinredemo
There go to console tab and see the messages.
Method 2:
please connect your mobile via USB drive and see the phone listed in ECLIPSE and need to install ANDROID ADT plugin for eclipse to see the console messages in Eclipse.