search

schmich / instascan

HTML5 QR code scanner using your webcam
https://schmich.github.io/instascan/
MIT License
2.97k stars 865 forks source link

Upload file manually when camera is not available #62

Open mairh opened 7 years ago

mairh commented 7 years ago

In many mobile browsers (in my case iPhone - running iOS 10.3.3) mobile camera is not accessible when opening the demo site / instascan in general.

Do you have any plan to support switching to manual file upload from gallery and decode the barcode when the camera is not accessible?

image uploaded from ios

schmich commented 7 years ago

In case you haven't seen it, see this note about compatibility. According to #54, it looks like WebRTC compat will be present in iOS 11, which I definitely want to support.

Scanning a user-supplied image is definitely possible and something I've thought about, but it just ended up being a lower-priority feature. It's mostly about updating the API to support other sources besides the camera.

Unfortunately, I can't think of any one-line hack to add this yourself since the camera, scanner, and analyzer are pretty entangled. Mostly, it comes down to the canvas that the Analyzer uses as a source (see scanner.js).

Let's keep this issue open for tracking this feature.

amosboldor commented 7 years ago

I whipped up some code in code pen: Full Page: https://codepen.io/amosboldor/full/brNvOw/ Editor Page: https://codepen.io/amosboldor/pen/brNvOw/

But I noticed if you don't get a good photo of the QR-Code then it will fail. That's why video[Instascan] is much better so if the first frame didn't get it the next one might be at a better angle for it to work. Making me think if I should make it work to take a photo and a video.

If any one knows how to improve this code please comment.

jsmithdev commented 7 years ago

Just fyi, in iOS11 beta the <video /> element needs attribute playsinline . Seemed to be a bug for awhile but now that it's out of beta soon idk...

https://github.com/serratus/quaggaJS/commit/e8352c7017a2f7a7500fa054f342b9689ff5d8b7#diff-afd7828cb7f3e7a1f8fe7305f50b5021

https://github.com/PaulKinlan/qrcode/commit/b79718b2391969b2291db93ba388b4c2b2f3f9d4