cozmo / jsqr Goto Github PK

I Tried your Code by scanning Keyboard and partially keyboard's keys its show an output which is wrong behavior of qr code scanner and also its scans partially some qr code and outputs some thing different from the real code, and any think if I keep stable the mobile camera, its scanning.... it. any Idea on this issue

Can you make it detect multiple QR codes?

When opening the reader multiple times, the browser restarts and displays a script loading error.

Hi, Thanks for the good work on jsQR 1.x, The API is now clear and simple ;)

I'm using jsQR 1.0.1 in a typescript project and don't get why the jsqr 1.0.1 npm package does not contains the typings.

Could you publish a 1.0.2 with the typings included (and may be deprecate the 1.0.1 with a message inviting to upgrade to get typings), something like:

npm version patch -m "Upgrade to %s to include typings"
npm publish
npm deprecate [email protected] "Upgrade to >1.0.1 get typings"
git push
git push --tags

thanks ;)

1. Ipad mini Safari Browser opening front camera, OS version 11

2. Iphone 5S Safari its not working, OS version 10.3.3

3. Ipad both Safari and Chrome is not working, OS version 10.1.1

and also I made changes to your code for after scanning camera should close as it was taking more battery, so you add as a optional for library users

here is my code

		  var video = document.createElement("video");
		    var canvasElement = document.getElementById("canvas");
		    var canvas = canvasElement.getContext("2d");
		    var loadingMessage = document.getElementById("loadingMessage");
		    var outputContainer = document.getElementById("output");
		    var outputMessage = document.getElementById("outputMessage");
		    //var outputData = document.getElementById("outputData");
			//var outputData = document.getElementById("outputData");

		    function drawLine(begin, end, color) {
		      canvas.beginPath();
		      canvas.moveTo(begin.x, begin.y);
		      canvas.lineTo(end.x, end.y);
		      canvas.lineWidth = 4;
		      canvas.strokeStyle = color;
		      canvas.stroke();
		    }

		    // Use facingMode: environment to attemt to get the front camera on phones
		    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
		      video.srcObject = stream;
		      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
		      video.play();
		      requestAnimationFrame(tick);
		      localStream = stream;
		    })
		    .catch(function(err) {
		    	console.log(err);
		    	  /* handle the error */
		    });

		    function tick() {
		      loadingMessage.innerText = "⌛ Loading video..."
		      if (video.readyState === video.HAVE_ENOUGH_DATA) {
		        loadingMessage.hidden = true;
		        canvasElement.hidden = false;
		        outputContainer.hidden = false;

		        canvasElement.height = video.videoHeight;
		        canvasElement.width = video.videoWidth;
		        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
		        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
		        var code = jsQR(imageData.data, imageData.width, imageData.height);
		        if (code) {
		          drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
		          drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
		          drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
		          drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
		          outputMessage.hidden = true;
		          //outputData.parentElement.hidden = false;
		         // outputData.innerText = code.data;
		          if(code.data != "" && code.data != undefined){
		        	  var dataQR = "qrData=" + code.data;
			          document.cookie = dataQR;
			          
			          vidOff();
			          //var qrGetCookieData =   utility.readCookie("qrData");
			          //alert(qrGetCookieData);  
		          } //else {
		           //alert("qr code not detected")
		         // }
		         
		        } else {
		          outputMessage.hidden = false;
		          //outputData.parentElement.hidden = true;
		        }
		      }
		      requestAnimationFrame(tick);
		      function vidOff() {
			    	video.pause();
			    	video.src = "";
			    	video.srcObject.getVideoTracks().forEach(track => track.stop());
			        console.log("camera off");
			    }
		    }

When I decode this QR code:

With zxing.org I get:

HTTPS://API.NICETOMEET.ME/api/getmecard.php?nuid=9msSjd5YdOSOHxHbbTLlyesPC4V2&mid=9695d152212c894ee74bb07f0f551ea5

With jsQR I get:

api/getmecard.php?nuid=9msSjd5YdOSOHxHbbTLlyesPC4V2&mid=9695d152212c894ee74bb07f0f551ea5

I've verified it as far as: the input to byteArrayToString() does not contain the first part of the URL.

JSQR is requiring a lot of CPU on PC and Smartphone. I am using Google Chrome!. Please lighten this script.

I could not decode

this image.

JSQR is using a lot of CPU. When the cam is turned on, the use of cpu increases by 50%. How to solve this?

[17:23:31] typescript: node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 6
Enum type 'Mode' has members with initializers that are not literals.

   L5:  export interface ByteChunk {
   L6:      type: Mode.Byte | Mode.Kanji;
   L7:      bytes: number[];

[17:23:31] typescript: node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 6
Enum type 'Mode' has members with initializers that are not literals.

   L5:  export interface ByteChunk {
   L6:      type: Mode.Byte | Mode.Kanji;
   L7:      bytes: number[];

[17:23:31] typescript: node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 16
In ambient enum declarations member initializer must be constant expression.

  L15:  export declare enum Mode {
  L16:      Numeric = "numeric",
  L17:      Alphanumeric = "alphanumeric",

[17:23:31] typescript: node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 17
In ambient enum declarations member initializer must be constant expression.

  L16:  Numeric = "numeric",
  L17:  Alphanumeric = "alphanumeric",
  L18:  Byte = "byte",

[17:23:31] typescript: node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 18
In ambient enum declarations member initializer must be constant expression.

  L17:  Alphanumeric = "alphanumeric",
  L18:  Byte = "byte",
  L19:  Kanji = "kanji",

[17:23:31] typescript: node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 19
In ambient enum declarations member initializer must be constant expression.

  L18:      Byte = "byte",
  L19:      Kanji = "kanji",

When scanning a QR code with the following value:
YAZBNS5-T7TTTOJ-G4UZATU-BAF2SOG-LMXMDH2-Z5PDXF6-27SUVQ7-NS6FGA5
It returns this:
undefinedAundefinedBundefinedSundefined-undefined7undefinedTundefinedOundefined-undefined4undefinedZundefinedTundefined-undefinedAundefined2undefinedOundefined-undefinedMundefinedMundefinedHundefined-undefined5undefinedDundefinedFundefined-undefined7undefinedUundefinedQundefined-undefinedSundefinedFundefinedA5

I've had to create a large canvas and a small canvas because it will not scan the qr code if the main canvas is small. This is making my page extremely slow :/

This will throw an error in all files importing "BitMatrix" as the file can not be found on an OS which cares about this.

I expected bitmatrix.d.ts to be BitMatrix.d.ts

For some strange reason, I couldn't decode this image.

Would you mind to check? Thank you.

Edit :

• Already trying with various angle and camera, still not working for me.. But the other qr (that I have) works perfectly.
• Tested it with another scanner, it works there

Hello

There are few qr codes with white line on those big squares(please see file attached) that can't be recognised(because of those lines, it works fine if you will paint them in some photo editor).
Is it possible that you can fix that?

Many thanks

Thank you very much for your project, and in most cases it works correctly, except for this situation:

[Error]

If the screen is enlarged, it will work properly:

[Success]

For binary QR codes, string representation introduces a hassle—have to deal with parsing UTF-16 string encodings, dealing with endianness, etc. Provide a means for returning binary data (number array, ArrayBuffer, Buffer, or something).

The reader fails to read this image. I'm certain the parameters are correct.

let decoded = jsQR.decodeQRFromImage(qrCode, this.metrics.width, this.metrics.height);

No error is thrown. Only the decoded variable returns empty string.

It's expected to read: BAgAXA==Hhwpy/63yP6bwt1xKDRSAQRpokbYNTsVUX7EZ++mscvjLf0MawexNDY5CKlvcwf/DJosqOpakMLKgxzbEbw/E3wkSK9/

I am using this library in my application to scan QR code in a manufacturing industry to know the status of the product in the manufacturing process and to store details of the unit and retrieve and show it when needed.

Now the issue that i am facing is that while testing the qr detection in my office it was working great, but when i check it live in the industry, the qr code code is not detected. but with normal apps i was able to scan the QR.

How can i solve this problem??

Hi, i'm unable to scan smaller images. The library works perfectly only with large images. I've attached a sample image for your reference. Have tried all kinds of different angles, zoom levels, lighting etc, nothing worked.

Several issues have come with with the library incorrectly locating QR codes where there aren't any, returning malformed data (often manifesting as Chinese characters).

This is an central issue to track these issue on. I've been able to reproduce the error with this image
.

We'll use this image to try to catch the issue (thinking we're not correctly detecting error correction levels).

I got the following error in chrome console after a few moments (5-15min):

jsQR.js:90 Uncaught RangeError: Invalid typed array length: Infinity
at typedArrayConstructByLength ()
at new Uint8ClampedArray (native)
at Function.BitMatrix.createEmpty (https://cozmo.github.io/jsQR/jsQR.js:90:30)
at Object.extract (https://cozmo.github.io/jsQR/jsQR.js:9594:40)
at jsQR (https://cozmo.github.io/jsQR/jsQR.js:337:33)
at tick (https://cozmo.github.io/jsQR/:102:20)

Webcam keeps freezing. This happens on every laptop I use. FF has this problem also.

Hello I try to use you demo, in pc its works but in mobile phone not detect the camara.
`var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputMessage = document.getElementById("outputMessage");
var outputData = document.getElementById("outputData");

function drawLine(begin, end, color) {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}

// Use facingMode: environment to attemt to get the front camera on phones
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.play();
requestAnimationFrame(tick);
});

function tick() {
loadingMessage.innerText = "⌛ Loading video..."
if (video.readyState === video.HAVE_ENOUGH_DATA) {
loadingMessage.hidden = true;
canvasElement.hidden = false;
outputContainer.hidden = false;

canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
var code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
  drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
  drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
  drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
  drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
  outputMessage.hidden = true;
  outputData.parentElement.hidden = false;
  outputData.innerText = code.data;
} else {
  outputMessage.hidden = false;
  outputData.parentElement.hidden = true;
}

}
requestAnimationFrame(tick);
}
`

In some cases, especially when few QR cordes close to each other it decods in wrong way
http://prntscr.com/jwwr3o
or
http://prntscr.com/jwws79

Rather than returning a string on successful QR decode and null otherwise, return an object representing the result (location of QR code, data if successfully decoded, errors encountered, etc.).

There is number[] used for ImageData.data this should be Uint8ClampedArray, see: https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data

I tried and it does not seem to work, but I haven't found any explicit reference in the documentation whether the Cordova platform is supported.

my typescript version is 2.3.4,it's not support String Enums.
but i can't upgrade my typescript version,because it will cause more typescript complie wrong with ionic

when i was using it in my ionic project, typescript can't complie with it,i try almost every method to override index.d.ts in your package,but there no simple way
i think it may reduce the scope your project could use in

[13:03:02] typescript: ...rkspace/APP/banma_education/node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 6
Enum type 'Mode' has members with initializers that are not literals.

   L5:  export interface ByteChunk {
   L6:      type: Mode.Byte | Mode.Kanji;
   L7:      bytes: number[];

[13:03:02] typescript: ...rkspace/APP/banma_education/node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 6
Enum type 'Mode' has members with initializers that are not literals.

   L5:  export interface ByteChunk {
   L6:      type: Mode.Byte | Mode.Kanji;
   L7:      bytes: number[];

[13:03:02] typescript: ...rkspace/APP/banma_education/node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 16
In ambient enum declarations member initializer must be constant expression.

  L15:  export declare enum Mode {
  L16:      Numeric = "numeric",
  L17:      Alphanumeric = "alphanumeric",

[13:03:02] typescript: ...rkspace/APP/banma_education/node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 17
In ambient enum declarations member initializer must be constant expression.

  L16:  Numeric = "numeric",
  L17:  Alphanumeric = "alphanumeric",
  L18:  Byte = "byte",

[13:03:02] typescript: ...rkspace/APP/banma_education/node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 18
In ambient enum declarations member initializer must be constant expression.

  L17:  Alphanumeric = "alphanumeric",
  L18:  Byte = "byte",
  L19:  Kanji = "kanji",

[13:03:02] typescript: ...rkspace/APP/banma_education/node_modules/jsqr/dist/decoder/decodeData/index.d.ts, line: 19
In ambient enum declarations member initializer must be constant expression.

  L18:      Byte = "byte",
  L19:      Kanji = "kanji",

Hello
Using jsQR v1.0.0
I get this error sometimes:

ERROR TypeError: Cannot read property 'score' of undefined
    at scripts.bundle.js:10824
    at Array.map (<anonymous>)
    at Object.locate (scripts.bundle.js:10816)

From this piece of code:

Let's say I have a simple remote image url.

How can I use jsQR to decode it? I'm planning to do this on the Node backend. So no Canvas support.
Do I manually generate the binarizedImage from image buffer?

var location = locateQRInBinaryImage(binarizedImage);
if (!location) {
  return;
}
var rawQR = extractQRFromBinaryImage(binarizedImage, location);
if (!rawQR) {
  return;
}

It would be good if there is a convenience method to take image link as input.

Thanks!

Would you please help me?
The jsQr gives me error with these images?
Especially on colored qr codes.

Thank you in advance.

I am trying detaching user camera when its not needed.

I was trying to call pause() on video
I was trying change video.src
Maybe something should be done on media stream?

I hope someone here know much more than me how is that working, and tell me how to detach attached camera from app.

I am trying to implement your js in a jsp page,
where all other methods in one js and the two js i am calling in JSP page

first: jsQR.js
second my javascript file

when I try to upload it throws and error
the JS in AMD, how to use it as non AMD

var code = jsQR(imageData.data, imageData.width, imageData.height);

Hi cozmo , thank you for the fantastic jsqr port, i see that the 1st parameter is a 1d data array for image data but there are often cases like mine where we need to read image from a url, would it be possible for you to enhance the library to read qr data even from a URL like this

Thanks for your work in advance

My face returns some weird data.

https://prnt.sc/jxhmtz

Happened while i was just jiggling around in my chair.

Hi,

I have the problem that my CPU on "Google Chrome Helper" is raising up to 110% (?) when opening/closing the QR Scanner multiple times in a row (even with delays).
Getting massive Frame drops on the camera interface and my application overall, even after closing the scanner.
I read that it might be a problem in the decoding functionality, unneccessary encoding or operations.

Safari seems alright, no problems there.

Any ideas?

Hi,
Can I use the camera to read a QR code using this library?

also, can I parse the data out of the QR code and use a specific set of the data only and not everything?

Thanks

Make it faster. And not use so much CPU.

When I import an image that I've taken with my phone, it usually ends up saying there is no QR Codes, I've tried multiple ways to try to work around this issue even manipulating your own code to try and think the image was a video.

I am using jsQR with Quagga to scan qrcode using web camera. Getting this error:

Uncaught TypeError: Cannot read property 'score' of undefined

Happening at this line - https://github.com/cozmo/jsQR/blob/master/dist/jsQR.js#L9911

Hello.
Could you provide some code examples, how to scan qr code using web camera live view.
For ex. via video html tag
Thank you.

I finally got around to actually testing some of the images I want to scan qr codes in and the success-rate with jsQR ends up being on the edge of unusably low for me. I decided to try the JS port of ZXing and it's success rate was around the same... until I turned on the TRY_HARDER hint, now it almost seems to be able to scan anything I throw at it. Any chance that's a feature that could be easily added to jsQR?

I am on iPhone and it cannot access the camera from chrome. Can you suggest a workaround?

try this code

checkout this code using zxing and webqr it working, but not working in jsQR

I'm scanning a QR code from a base64 image like so:

      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var image = document.createElement('img');

      image.addEventListener('load', function() {
        ctx.drawImage(image, 0, 0);

        var imageData = ctx.getImageData(0, 0, image.width, image.height);
        var rgba = imageData.data;

        var binarizedImage = jsQR.binarizeImage(rgba, image.width, image.height);
        var location = jsQR.locateQRInBinaryImage(binarizedImage);

        var rawQR = jsQR.extractQRFromBinaryImage(binarizedImage, location);
        alert(jsQR.decodeQR(rawQR));
      });

      image.src = 'data:image/png;base64,' + data;

However, the result is null unless there are multiple QR codes in the image. Please advise.

I did a test with this plugin and it greatly increases CPU usage (Chrome - PC / Android).
how to make it lighter?

For a project I'm working on, it would be helpful to know the colors that the QR code I'm detecting is made out of (particularly the background). This seems like it might be a fairly useful and easy thing to add; assuming I end up using jsQR, I might be up for trying to implement it myself. If I do, any pointers for how/ where to start?

The right picture cannot be scanned.
How to solve this problem?

当我使用中文生成的一张二维码时，使用 decodeQRFromImage decode 出来的字符为乱码，二维码图片如下：

解析出来的结果为：'你好'，其实是 utf-8 的问题，需要转换成 utf-16。

解决办法：

...
const decoded =jsQR.decodeQRFromImage(imageData.data, imageData.width, imageData.height); // decoded is `'你好'`
const chineseStr = utf8to16(decoded); // chineseStr is '你好'

function utf8to16(str) {
    var out, i, len, c;
    var char2, char3;
    out = '';
    len = str.length;
    i = 0;
    while (i < len) {
        c = str.charCodeAt(i++);
        switch (c >> 4) {

        case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
            // 0xxxxxxx
            out += str.charAt(i - 1);
            break;
        case 12: case 13:
            // 110x xxxx   10xx xxxx
            char2 = str.charCodeAt(i++);
            out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
            break;
        case 14:
            // 1110 xxxx  10xx xxxx  10xx xxxx
            char2 = str.charCodeAt(i++);
            char3 = str.charCodeAt(i++);
            out += String.fromCharCode(((c & 0x0F) << 12) |
            ((char2 & 0x3F) << 6) |
            ((char3 & 0x3F) << 0));
            break;
        }
    }
    return out;
}

Hi,
I am trying to read the qr code from png/jpg files, i am currently converting the File to a img via readAsDataURL and getting a canvas element to convert the image to imageData.
1.image.src = reader.readAsDataURL(); //sample code
2. create canvas.
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
return ctx.getImageData(0, 0, 100, 100);
3. const code = jsQR(imageData.data, 100, 100); and get code as null.
I cannot use any decodeQRFromImage functions in jsQR, as my typescript app does not find it with
import jsQR from 'jsqr';
Can you please let me know how i can import png/jpg files with qr code to use this library.
I am using a simple png file.