iOS Camera-Based Barcode Scanner via URL

ios html camera barcode
quietmint picture quietmint · Dec 21, 2012 · Viewed 8.6k times · Source

How can I read linear (one-dimensional, such as Code 128) barcodes using the camera on an iOS device from a web page?

Essentially, I suppose I'm looking for a free barcode scanner app that I can install on an iPad but that can be used by my web app. I want to launch the barcode scanner from the web browser and then receive the scanned data. How does this process look on iOS? Does the barcode scanner app need to support a callback scheme like someProtocol://scanBarcode?callback=http://example.com/scan.do%3Fscanned= so it can "relaunch" my web app? Are there other ways to accomplish this type of data transfer/interaction between web apps and native apps on iOS?

Answer

quietmint picture quietmint · Jan 3, 2013

In the same way that it supports Android, the free and open source Zxing Barcode Scanner on iOS version 1.1 now supports web-based scanning with a URL callback.

zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13

Simply use a zxing://scan/ URL with {CODE} as a placeholder in the callback URL. For example, the above example would load http://foo.com/products/01234/description if the barcode 01234 were scanned.

Unfortunately, only QR codes are supported in version 1.1.

Related questions

Camera access through browser

We are creating an HTML5 website for mobile and need to get camera access through the web browser without being a native app. We are having trouble making this work in iOS. Is anyone aware of a solution for this?

Read More
How do you disable viewport zooming on Mobile Safari?

I've tried all three of these to no avail: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; …

Read More
How do I remove the blue styling of telephone numbers on iPhone/iOS?

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add? I only have this in place for the number: <…

Read More