Qrcode generator

I have a Moto G3 and used the app about a month ago.
I added it to my homescreen
I tried to open it today while offline, and I get an error "This webpage is not available - ERR_FAILED"

Wasn't it supposed to work offline? Is this an issue of chrome clearing its local serviceworker cache?

It appears that you're no longer able to use the live camera feed to detect codes on iOS devices – something to do with an update to the camera API maybe?

Tested on iPhone 7, X, Xs; Safari and Firefox.
All running iOS 12.

Most new phones these days have 3 or more cameras. Currently it's only possible to toggle between two of them...

How do I modify the code to toggle between any available camera?
Anyone know if there's any any forks available, with this feature?

TLDR needs a playsinline attribute.

Can not scan QR code because the webcam images is invaded/flip like in a mirror.
https://www.the-qrcode-generator.com/scan work.

As a user, I want to see the destination of the URL before I open it.

Currently, I don't see the URL.

Firefox 35.0.1 on Ubuntu.

I would like the code to be a lot more modular. Right now it is a heap of code that is just function objects and it;s not clear what each bit does.

I would like to have a notion of:

• Views: There will be a view for fallback camera one for realtime camera
• Dialogs: For the popups that happen when a QR code is found, or a user presses help.
• Controllers: For actually doing the QR Code logic

<input type="file" accept="image/*;capture=camera">

Some thoughts on making this work progressively:

1. <input type="file" accept="image/*;capture=camera"> when there is no JS enabled it will have to be a normal form that uploads to a server and tries to scan the image. Redirect the user to a dialog with the URL that they can click - don't take them directly to the URL.
2. <input type="file" accept="image/*;capture=camera"> when there is JS but there is no getUserMedia we want to get the image and scan the image with JS
3. getUserMedia - what we have now.

Not a huge deal, but was struggling with demo until I got the chance to hook up my iOS phone to Safari devtools and see what was going on. I have a content blocker which was blocking GA tracking, and snapping a code leads to Unhandled Promise Rejection: ReferenceError: Can't find variable: ga.

I noticed that the performance of qrsnapper can sometimes be quite sluggish. I looked at the profiler and saw huge amounts of time being spent in addImage and then in getImageData (this ended up busting the frame).

It turns out I am taking a 640x480 video, adding it to a fullscreen canvas and then chopping a small portion out of it for the main view.

I suspect that is where a lot of my addImage and getImageData perf issues are

Hi Paul,
When I open the app on the browser it works fine, however after I add it to Home Screen to work as an app on my iphone it doesn't work, the camera is not activated.
Am I doing something wrong? or forgetting to do something?

It always picks the user facing camera.

It litterally gives me nothing of value.

Hey,

Your application works like a charm, but I (and not the only one I think) would like to integrate it into my apps. Damn this work with iOS 11 finally !

Why did you distribute it as an complete web app instead of a library ?
Could you package it and publish it to npm so anyone can use it ?

Thanks a lot

It should be possible to launch the API with a callback to a URL that will post the results there

Ideal UI

• When URL detected, open up the dialog with the OPEN, CANCEL, SHARE button in
• Include a new button with the name of the app and the domain of the callback
• Ideally we should validate the callback against the referrer. So we only share back to the same domain (for now)

Some additional research

• x-callback-url http://x-callback-url.com/ (Zxing seems to use this), useful way to call back directly into the APP - we can't check the referrer though because it uses a custom scheme
• Could use an intent URL on Android and target and app, we probably want to disable this for now unless we know it is going back directly into the calling app.
• window.open and postMessage are options to send back data, it has a relatively complex API and it won't work with out JS. with x-callback-url, I could do it on the server.

Issues

x-callback-url:

• It's incrediblly hard to workout which web site called you and directly get back into the running instance of the site that invoked your app, instead you can only manage forward only requests. App->QR->App and that might mean a new page load etc, network round trips and also offline issues.

jsqrcode has decent performance in the webworker, but its is much less accurate than zbar + WASM. Also zbar gives back the four corners of the qrcode's shape which makes it a better candidate for a proper polyfill to BarcodeDetector.

Did some proof of concept work here: https://github.com/monteslu/qr_perf

Live demo here: https://qrperf.netlify.com/

After re-factoring the web cam support. static upload no longer works.

The assumption at the moment is that the whilst the system thinks the video is ready, the actual stream is not ready and thus the video has no height or width and everything fails at Infinity... let's wait until we have at least some knowledge of the video size.

It would be awesome to see your extension at the Firefox Add-Ons website.

We now have async await which means that we could possibly remove the processingFrame global because we just don't need to schedule a requestAnimationFrame

When trying to swap to back camera of given device, the output will not be shown correctly to the user. Output will be orrientated incorrectly. This might not be visible or true for all orrientations, so try to spin around given device in order to produce the same issue.

MediaStreamTrack.get Sources is deprecated.

For now, temporarily disable it.

In iOS 12.2, the legacy callback API navigator.getUserMedia was removed in favor of the new promise-based navigator.mediaDevices.getUserMedia API. The project should migrate to the new API.

I don't care about the actual URL, that is private to the user

The scanning results should be allowed to select and copy at the QR Code Found dialog.

please check this video => http://recordit.co/leE3Y4xAdH

Vibrate the device or play sound effect when the QR is detected 😄

I'm sorry my english is not so good

When I speak of a mobile phone inside the camera is out of focus (blur) I must make a big QR to scan it
how can i fix it maybe with cam filter when you can fix it please help me

and when its ok in offline i tray to scann thets dont read the QR code i download thet from hier
what did i do wrong

How can i use this? Is there a READ ME file?

The app/index.html supposed to open a page like the demo?

Using the Nokia 2 on Android 8.1 with Chrome 80, the app freezes after a while with
'This page uses soo much memory, so Chrome removed some content'.

This combination of hardware, platform and browser version has been verified to support ShapeDetection API.

Note that Google distributed this phone model to developers at some point with the indication it would be a prototypical example of low-power smartphone often found in developing countries.

So for QR snapper to be useful to the next billion users, the app and/or Google Chrome needs some serious performance work.

Note that merely switching exclusively to the browser's ShapeDetection API will not work in general, since on too many devices this may not work (needs cooperation with Google Play Services, has been observed to fail in the field even with up-to-date Services). Hence an unaccelerated software fallback like what is used in QR snapper is still needed, greatly reducing the benefit of ShapeDetection API .

Please fix this.

I found your website doesn’t end with closing tag as </html> while I see your source code on Firefox. Is there anyway to fix that?

Hi Paul!
When I use Chrome on iPhone (OS 11.3) I get the upload button option, which is expected. I am able to launch the camera and take a picture but then it goes back to the initial page:

Is that normal? Where is that photo stored? Maybe I could upload it and decode the qr code at the server level?

We are now getting the camera feed in, but not detecting.

When I'm trying this application with chrome://flags/#enable-experimental-web-platform-features turned on I only see, that this error is thrown:

err; // -> DOMException: Failed to get pixels for current frame.
err.code; // -> 11
err.message; // -> "Failed to get pixels for current frame."
err.name; // -> "InvalidStateError"

The code of the application under this URL might be out of date and Google Analytics might has shown this error already. But I wanted to let you know.

Edit Oh, didn't see, that this issue has been filed already.

Turning off the experimental web platform features and using the polyfill does not work either, though. But there is certainly a different reason for this.

As a user, I expect the display to act like a mirror.

If my QR is too far to the left of the screen, I expect that I have to move my hand to the right. At the moment, if I move right, the image on screen moves further to the left!

Excuse me, I've got some problem when build and learn your project.
After I run the project by "gulp serve" at local, nether can asking from desktop web or app web got the camera.
Error is like:
GET http://my-url/scripts/main.min.js 404 (Not Found)
my-url/:1 Uncaught (in promise) DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
What can be the result?Thanks!