How can I create my own QRCode scanner from Webcam using Jquery

[sagnik]

I need to create a QRCode reader, which immediately gives the data of qrcode as it has read successfully and produces a beep sound. I've tried to find that type of library but I couldn't find almost anything. But yes, I've found one named "WebCodeCamJquery" but I couldn't implement it properly so it doesn't works. Here is the link to "WebCodeCam": https://atandrastoth.co.uk/main/pages/plugins/webcodecamjs/. It works perfectly on the website but not in mine.

[Krydos]

What is the link to your implementation?

[sagnik]

https://whatsnew.cf/mpanel

The link will require you to login. But you have root access so here is the path to the file: "/home/sgn/public_html/wn/mpanel/accounts/login.php"

[Krydos]

I can't tell anything from that.

[sagnik]

I can provide you the script which is in a zip archive. Will it be good for you?

[Krydos]

No, install your qrcode thing somewhere that isn't password protected.

[sagnik]

Okay.

[sagnik]

Here is the link to my implementation: https://m.whatsnew.cf/test.php

[Krydos]

Fix this

Uncaught DOMException: Failed to construct 'Worker': Script at 'https://cdn.sgnetworks.cf/jquery/plugins/WebCodeCam/js/DecoderWorker.js' cannot be accessed from origin 'https://m.whatsnew.cf'.
    at Plugin.init (https://cdn.sgnetworks.cf/jquery/plugins/WebCodeCam/js/webcodecamjquery.js:547:32)
    at https://m.whatsnew.cf/test.php:68:12

[sagnik]

I've not seen the error before. Anyway it looks like the script is not accessible outside the domain. I hope I've got it right!

[sagnik]

Well I couldn't see such an error. Only I'm seeing is an Warning:

navigator.mozGetUserMedia has been replaced by navigator.mediaDevices.getUserMedia

And I'm using Mozilla Firefox.

[sagnik]

Yeah! I got it. The error is shown in Google Chrome. But I don't understand why the script is not accessible in chrome when Firefox is getting the script properly. Here is my .htaccess of "cdn.sgnetworks.cf":

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^ver-[0-9]+.[0-9]+.[0-9]+(.*)$ $1 [L,NC]
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteRule ^(.*)$ index.php?/$1 [QSA,L]
	RewriteBase /
	RewriteOptions InheritDown
</IfModule>
<IfModule mod_headers.c>
	Header set Access-Control-Allow-Origin "*"
	Header set Access-Control-Allow-Credentials "true"
	Header set Access-Control-Max-Age "86400"
	Header set Access-Control-Allow-Methods "GET"
	Header set Access-Control-Allow-Headers: x-requested-with 
</IfModule>

Okay, I fixed that now. Actually Chrome doesn't allows Cross-Origin Service Workers and I fixed it but still it's not working.

You can check it here: https://m.whatsnew.cf/test.php

[sagnik]

Can anyone help me to fix this out?

[Krydos]

It looks like the error is now

DOMException: Requested device not found

[sagnik]

What does it means? What type of device?

If you meant the WebCam, then I don't have an Webcam on my PC so I'm using my Android phone as Webcam with DroidCamX to test the QRCode scanner.

And I've not got the error before.