HOW TO scan a barcode with Android smartphone camera from a web page
If you need a barcode to be scanned from a mobile web app & then get back the code as text from the scanner, the ZXing ("Zebra Crossing") open-source, multi-format 1D/2D barcode image processing library & ZXing Barcode Scanner (630K+ downloads from Google Play Store in April 2021) can help.
Note that this web page will only work when opened within an Android browser & smartphone with camera having ZXing Barcode Scanner installed
Jan 2024 Update:
Here are the steps for a simple demo:
1. Create a webpage to initiate the bar code scanner through anchor tag.
When the ZXing Barcode Scanner application is installed on an Android device, a URL call to: zxing://scan/?ret=http://example.azurewebsites.net/desc.html?code={CODE}
..will bring up the device bar code reader so that the user can scan the barcode. The code is returned via the callback URL parameter supplied in the zxing URL.
2. ZXing Barcode Scanner will present the code to the file desc.html. To show that the code is in fact returned, I use a document.write(location.href); to show the returned barcode text
Click on the three vertical dots to open Settings and scroll to the Result settings section
Note that this web page will only work when opened within an Android browser & smartphone with camera having ZXing Barcode Scanner installed
Jan 2024 Update:
See HOW TO Turn Your Mobile Browser into a Barcode Scanner for Web Apps - — no app required, just HTML and JavaScript
Check this related code sample that uses Minhaz's HTML5 QR Code & Barcode Scanner JavaScript library. It works on any modern mobile web browser and can scan using smartphone's camera.
1. Create a webpage to initiate the bar code scanner through anchor tag.
When the ZXing Barcode Scanner application is installed on an Android device, a URL call to: zxing://scan/?ret=http://example.azurewebsites.net/desc.html?code={CODE}
..will bring up the device bar code reader so that the user can scan the barcode. The code is returned via the callback URL parameter supplied in the zxing URL.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Read related post: http://mvark.blogspot.in/2016/03/how-to-scan-barcode-with-android.html --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| </head> | |
| <body> | |
| <a href="zxing://scan/?ret=http://example.azurewebsites.net/desc.html?code={CODE}">Scan</a> | |
| </body> | |
| </html> |
2. ZXing Barcode Scanner will present the code to the file desc.html. To show that the code is in fact returned, I use a document.write(location.href); to show the returned barcode text
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Read related post: http://mvark.blogspot.in/2016/03/how-to-scan-barcode-with-android.html --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Desc</title> | |
| </head> | |
| <body> | |
| <script>document.write(location.href);</script> | |
| </body> | |
| </html> |
Rather than initiate ZXing Barcode Scanner from a web page, you can also scan a barcode directly from the app installed on an Android smartphone and send related output to a custom web page as URL parameters. Here's how -
Note the Settings option indicated by three dots & Custom Search in the screenshot
You can choose to pass the barcode to a Google Form & save it with some notes by specifying the substitution placeholder thus in the URL of a pre-created Google Form -
https://docs.google.com/forms/d/e/somekey/viewform?usp=pp_url&entry.2034813082=%s
After this setting is in place, the next time you click on Custom search after scanning a barcode, you will be redirected to a Android smartphone browser window & the custom page you've defined will open up & the barcode will be available for use through JavaScript as a URL querystring parameter.
Opening an installed app from a browser is often referred to as “deep linking”.
A URI scheme can be any string without special characters, such as http, zxing, fb or myapp.
Comments
Post a Comment