jbialobr/jsqrscanner

JavaScript QR Code scanner for HTML5 supporting browsers

jsqrscanner's Issues

License not applied correctly

File LICENSE contains at the bottom of the license a paragraph that should probably be filled by @jbialobr

This is the tail of the license, check the first line:

Copyright {yyyy} {name of copyright owner}

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

It lacks of both metadata the year and the name.

IE 11

Internet Explorer 11 is not working, not even asking for camera access

demo not working on iOS: Chrome, FF, Safari

Cannot set property '__gwtex_wrap' of undefined
at setWrapper (jsqrscanner-0.js:7514)

Documentation

Hi,
I want firstly say: "thank you really much for this 'library'!"
Not only the code is really but incredible really fast, the code is also really stable and reliable!
Searching on Google I find always webcodecamjs, but your code is 10000 times better!
I can scan a QR code also when the code is not centered and also if is is in 10% of the screen, incredible (I wasn't able to do that with webcodecamjs).

What I miss is some documentation about the functions.
For example: stopScanning() to stop the scan, resumeScanning() to resume the scan - I found them but was hard. Sometimes it is also nice to stop the scan and start it again so that we don't need to leave the webpage (because every time the page ask to access the cam again).

Thank you again for this script!

Scanner Doesnt Work On Chrome

I have implemented the library successfully and it is all working as expected on Firefox (Windows - Using Localhost HTTP and deployed HTTPS) and Safari (iOS - Deployed HTTPS).

However it does not work at all on Chrome, either on Windows or Android and neither via Localhost HTTP or deployed HTTPS.

The demo page doesn't work either in Chrome (HTTPS).

https://jbialobr.github.io/JsQRScanner/

javascript error in demo

In Google Chrome Version 72.0.3626.121 (Official Build) (64-bit) on Mac, the following javascript error occurs whenever loading this page:

https://jbialobr.github.io/JsQRScanner/

jsqrscanner-0.js:7514 Uncaught TypeError: Cannot set property '__gwtex_wrap' of undefined
    at setWrapper (jsqrscanner-0.js:7514)
    at Object.<anonymous> (jsqrscanner-0.js:7394)
    at apply_0 (jsqrscanner-0.js:694)
    at entry0 (jsqrscanner-0.js:726)
    at new <anonymous> (jsqrscanner-0.js:716)
    at JsQRScannerReady ((index):145)
    at Array.init (jsqrscanner-0.js:1398)
    at initializeModules (jsqrscanner-0.js:95)
    at apply_0 (jsqrscanner-0.js:694)
    at entry0 (jsqrscanner-0.js:726)

The demo also does not launch camera window in Chrome on Android (Pixel 2 XL), but I don't know how to see if there are any javascript errors.

Problem remembering selection

I have a scenario in which on a tablet with windws 10 and with firefox I am allowed to remember the selection.
The situation is as follows, I open the address, at that moment I am asked permission to use the camera and what camera I want to use, I select the front camera and press the checkbox to remember this decision and I give it to allow, then everything works fine , until you press f5 to reload the page and then it no longer asks for your permissions but instead of capturing the video from the front camera, it changes to the back camera, therefore you have to remove the camera's permissions to refresh the page and reselect the front camera.

Is there a way through the JsQRScanner API to solve this, or maybe an example? I need to remember the selected camera or, failing that, a drop-down that can switch between the front or rear camera when the privileges are already granted

iOS - Works in Browser but Does Not Work From Home Screen

After adding the page to the home screen I get the dreaded black screen with a strikethrough line. Works fine when in Safari with the address bar showing but when started from the home screen, which hides the address bar it does not work.

Unable to deactivate the camera stream

My assumptions would be that using .removeFrom( htmlElement ) or .stopScanning() would deactivate the camera stream; however, I'm not having success with this. Does anyone have any suggestions on how to deactivate the camera stream setup when using .appendTo( htmlElement )?

Ajax calls do not work

Hey,
great work! amazing job with this scanner, but i have one problem. The function called after the QR is scanned, for some reason do not trigger ajax calls. No errors, it would do other stuff but not ajax.

Example:

function onQRCodeScanned(content)
{
$.ajax({
method: "POST",
url: "api.php?action=scan",
data: {id: 1, con: content}
})
.done(function(msg) {
console.log(msg);
})
.fail(function(msg) {
console.log(msg);
})
.always(function(msg) {
console.log(msg);
});
}

Sending results of QR read to GET request

Hi,
Sorry if this is the wrong place to post this but how can I send the read value as a GET to a php page please? Upon reading a QR, I need it sending without the user leaving the scanning page.
Thanks in advance for any assistance anyone can give.

License

Hello

What is the license for this software? Perhaps it is the Apache license same as https://github.com/zxing/zxing ?

How to set css ?

same

Front facing camera

Is it possible to switch to the Front facing camera i only get back facing....

Scanner API not working

HI, I face some problem on the Scanner API. Please help.

var jbScanner  = {};

function onQRCodeScanned(scannedText)
{
	var scannedTextMemo = document.getElementById("scannedTextMemo");
	if(scannedTextMemo)
	{
		scannedTextMemo.value = scannedText;
	}
}

//this function will be called when JsQRScanner is ready to use
function JsQRScannerReady()
{
    //create a new scanner passing to it a callback function that will be invoked when
    //the scanner succesfully scan a QR code
     jbScanner = new JsQRScanner(onQRCodeScanned);
    //reduce the size of analyzed images to increase performance on mobile devices
    jbScanner.setSnapImageMaxSize(300);
	var scannerParentElement = document.getElementById("scanner");
	if(scannerParentElement)
	{
	    //append the jbScanner to an existing DOM element
		jbScanner.appendTo(scannerParentElement);
	}        
}

jbScanner.isScanning();
jbScanner.isActive();

This 2 api always return true even without camera permission.

jbScanner.stopScanning()
jbScanner.resumeScanning()

.stopScanning API not working so i assume that .resumeScanning also not working

Support on browsers

Hi,
I have tested your library on android and it works great, also on PC, will test on Safari today,
but I tested on Microsoft Edge browser now and it didnt work, however Edge supports WebRtc
https://caniuse.com/#search=webrtc

why is it not working on Edge? on which browsers has this been tested?
all best

Error while running on release mode

When I try to use this library on a web application on release mode (it's a Flutter web application), I get the following error (works just fine on debug mode):

Could not start video source on Samsung Note 10+

I've tested the jsqrscanner on different devices and I can't run it in Samsung note 10+. It displays "Could not start video source".

I'm using chrome as browser.

Do not detect colors?

First of all, congratulations on the scanner and thanks for sharing.

I have created a QR code with colors and the reader does not read it. Can it be configured in any way?

If I try to read the code with the iPhone camera, it does recognize it.

I have done the test at https://www.qrcode-monkey.com. If I create a code in black on a white background, the scanner reads it. If I take, for example, yellow over red background, the scanner is not able to read it.

Thanks!

Uncaught (in promise) DOMException: Only secure origins are allowed

First of all thanks for this great plugin. i have managed to set it up and it is working but only on local host. When i try to test on the public ip address i get below error

Uncaught (in promise) DOMException: Only secure origins are allowed -Promise rejected (async)

Kindly assist..

Regards
Joel Kimilu

npm version?

this scanner works like a charm!
Do you have plan for npm version?

Insert in a Net Core Blazor App Server Side

I import this in a Net Core 3.1.200 Blazor App.
Run with SSL Encryption.
On Reload the site, the video camera load, but after a while the camera-video close.
I can't debug with my mobile, pls help me.

Example page silently fails when served via unsecured connection (http)

Hi,

the example page unfortunately does not work on a Mac when served over http:// without any warning or error message. The dialog for the camera permission doesn't appear, nothing happens.
If I load the same page via https:// everything works fine, just as expected and in the same way as the live example page.
I do not own a Windows or Linux Machine, but only Mac browsers are affected in particular. I double-checked on Safari/Firefox/Chome – same issue in all browsers, also on on iOS/Safari.

This is obviously an intended security behaviour of any of the implemented technologies and browser features. Maybe the error or warning has been catched or suppressed somewhere?

There should be a message to make this issue transparent.

Do you have any ideas to isolate, localize or fix this?

Not working on Chrome iOS

Hello, MediaStreamTrack.getSources has been deprecated and is not working anymore on iOS.
I believe this is the replacement. But it does not seem to work on iOS either
Any solution to this problem ?

Memory leak?

When camera is active for a longer time (>5-10 min) most browsers (safari on iPad, chrome an a Huawei, chrome on Acer) freeze and often the message "app does not respond" appears.
Testing on my nokia 7.1 even blocks the whole device and I must reboot.

It doesn't read a .club domain :(

The reader is able to read a .com or .es domain but is not able to read a .club domain (which is also part of the Internet!). Does anyone know how to fix it?

demo broken due to 404 on jsqrscanner.nocache.js

QR code scanner doesn't work on Chrome on iPhone

Error:
(TypeError) : undefined is not a function (near '...MediaStreamTrack.getSources...')

Deprecated URL.createObjectURL

Please help get up and running with HTML and inline scripts

Good Evening,

I am hoping you can help getting me up and running with HTML and inline scripts.

I have been using instascan but the support and lack of rear camera support as well as lack of ios support is a problem. I would like to change over to yours however, I am batteling to get up and running. With instascan I was using the sample HTML with modifications to use the rear camera so was pretty easy.

I may be completely off but I am trying to use yours in a similar way by setting my HTML to load on page as per attached
jsqrscan.txt

Apologies if I am completely off, but this is my first project using QR scanners so not sure how to go about this

[Violation] Avoid using document.write(). Warning

Hi,

I have a Warning on jsqrscanner.nocache.js ( who works like a charm by the way)

jsqrscanner.nocache.js:3 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write

Seems to be located on :
function Bb(){var e,f=q,g;ob.write(r+f+s);...

I didn't found anything on that, are you already aware of that ?

Thanks for the job 👍

Feature request: Code 128 and others

Since this great scanner is based on zxing which supports Code128 (most common) and other 1D barcodes, do you think it will be hard to add support for those?

Thanks,
Dimitar

Data Matrix support?

I managed to work script with QR codes very nice. I have also Data Matrix types of 2D codes and they are not recognized, even though ZXing supports this.

Is there any setup to do, any hints?

thanks
Uroš

Scan with camera id

How to start scann with specified camera id?

switch for flashlight

Hi,
thanks for the scanner, it works really great once you get it started.

Is there a chance to have a switch to control the flashlight, to turn it on an off?
i searched a lot but couldn't find anything...

onQRCodeScanned repeatedly called

when a code is found onQRCodeScanned is called,
and then i do an action

but onQRCodeScanned keeps getting call after a detection, infinitely,
even if i point phone in another direction,

it should be called once, and just once after a detection, any help?

Not working on IOS

Hi ,

Code not working on IOS mobile browser.

Please help.

Thanks,
Rahul

Unsafe function .write()

Hi, I Notice in jsqrscanner.nocache.js on line 4, you are using a .write() function. So this unsafe function is blocked by my App's Content Security Policy (CSP), However, even though it is blocked it the plugins still works fine in chrome for android, but the problem arise in safari for iOs. So the plugins only works in safari iOs, if I allow 'unsafe-inline' and 'unsave-eval' in my CSP, which is not a good security practice.

So can you update your plugin code, please, to replace the .write() function with the saver one.

QR scanner?

Hi @jbialobr any plan to support qr code?

QR Scaner Web

how to use?

Cannot read property 'createScanner' of undefined"

iOS - safari - front camera

Although the QR scanning works perfectly on safari it selects the front camera (with no way of changing) which is quite a downside for scanning QR-codes haha.

Am I doing something wrong or are more people having this issue?

QQ browser does not use the rear camera

I run this demo in android chrome success，but i run in ios Safari ，video can not display 。this program can run in ios Safari ？

How do I listen for the scan results interface，thanks

Can't figure out how to use .removeFrom

Hi, i'm using the quick version to scan a qr code.

var scannerParentElement = document.getElementById("scanner"); if(scannerParentElement) { //append the jbScanner to an existing DOM element jbScanner.appendTo(scannerParentElement); }
And it works fine.
But when i need to remove the element, with :
var scannerParentElement = document.getElementById("scanner"); if(scannerParentElement) { //append the jbScanner to an existing DOM element jbScanner.removeFrom(scannerParentElement); }
I have an error about DOM and Node :

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is > not a child of this node.

Thanks

Does not seem to read QR-codes generated by https://www.qr-code-generator.com

I generate a simple text QR containing word "test" on https://www.qr-code-generator.com

I try this project's live demo page on my phone (Samsung Galaxy Xcover 4, chrome) and try to read the generated QR code from the monitor (trying different angles etc for a minute ) and nothing happens.

I try some other online js QR decoder and it works.

I save the qr and upload it to zxing.org and it decodes it fine:

Raw text	test
Raw bytes	71 a4 04 74 65 73 74 00 ec 11 ec 11 ec 11 ec 11 ec 11 ec
Barcode format	QR_CODE
Parsed Result Type	TEXT
Parsed Result	test

What is going on?