QR scanning

Dear Lazyweb,

Is it possible for JavaScript on iOS to scan a QR code using the camera, and return the scanned data to the caller?

As always, please only respond with things that you have seen working with your own eyeballs. I see a few things that maybe purport to do this, but they don't work.

We check people off of our guest lists using a JavaScript-heavy web page on various tablets, and it might be a little faster if, instead of needing to scroll to the customer's name, we could just point the tablet's camera at a QR code that the customer is waving at us.

Update: This one seems to work well so far.

Previously, previously, previously.

Tags: , , , ,

21 Responses:

  1. Nick says:

    A Bluetooth scanner gun (barcode/QR) used in inventory control just acts as a keyboard input. Pair to your tablet and have your JS setup to automatically process input based on the length?

    • Derpatron9000 says:

      First sentence:

      Is it possible for JavaScript on iOS to scan a QR code using the camera...

  2. 1

    I am 💯 getting owned for saying this without reproducing the full functionality first but I know this could be done with Shortcuts on iOS/iPadOS. There is already an action in Shortcuts that can scan QR codes and return the data. From there it can be hooked up to functionality that checks against the guestlist.

  3. Seg says:

    Yes! At least for the concept of JavaScript as live QR detector. The code will have to be served from a HTTPS site to make video permissions work, you do not need to send video to a server. It can run on-device.

    I can not give warrantee of how well this works in action as I haven't done this approach (yet). But the basic idea:

    * <video /> tag for local camera video stream.
    * Process the video stream for QR code shape detection.
    * Process said QR image as string.
    * Filter out only accepted DNA Lounge ticket string.
    * Profit!

    For a starting reference, check out QR Scanner for one of many different libraries on their approach. I'm sorry I'm not too knowledgeable in that area, but that should get you on the right track. It's annoying that Apple hasn't attached a hook to CIQRCodeFeature to BarcodeDetector, but I digress.

    What I don't know is how permissions can be set long-term on the devices -- whether or not you can set it and forget it or it nags you constantly. I know it must be HTTPS or it's a non-starter. Hopefully worse case push the "Remember" option every 30 days.

    Again, this is how I would start this project, but I haven't actually done a project like this yet. The last time I worked on a browser based webcam project was in 2005-7. It required Flash to work and a server to make it a JPG, so I'm very thankful for we can do something native and on-device now.

    • 1

      Can confirm that this approach works. There are a couple of off the shelf JS libraries on npm that do this using WASM for the QR-code scanning.

      I think we shipped a thing at work using one of these but I can't remember which. Sorry!

  4. the hatter says:

    Not my area(s) of expertise, but sure seems like it. yeovalley.co.uk does this to scan QR codes collecting 'yeokens' (just hit the top-right button), sign up, allow it camera access on your iphone, then I guess you'd use dev tools to poke around and steal their JS. There's no shutter button, it enters the token code when the camera finally focuses properly on a valid code.

  5. Jon Evans says:

    If you go step through this site (select “Continue without an account”) then towards the end where you have to enter the code off the test strip, you get the option to scan it with the camera.


    Maybe you can reverse engineer something from that.

  6. Sebastian says:

    ZXing (https://zxing-js.github.io/library/) and HTML5-Qrcode (https://github.com/mebjas/html5-qrcode) both do a pretty good job for scanning qr-codes in the browser on iOS. We use the ZXing in production for a customer's webapp.

  7. thielges says:
    Ok so the hyperlink worked just fine but the image embed failed.  Maybe this is user error?

    I pasted a url for a valid JPG file into the paper clip text box and clicked “embed”

  8. jwz says:
    Also, test posts over here, plz.
  9. stb says:

    We chose a slightly different approach for the same use case: have the QR code point to our web app (e.g. conference.example.com/checkin/?token=waltrihsdgyish) which can be scanned by any device, as long as the link opens in the web browser. Staff will log in to the management UI on their own phone, then open the customers QR code. Without the login, the link doesn't do anything. No need to have any fancy code on our site.

  • Previously