Barcode Scanner for Mobile Phone for Website in Form

Scan barcodes from a mobile web site?

As nothing seems to come out, I'll explain the best solution I found.

The thing is to use the app "pic2shop". It is a barcode scanning app that is available on Android, iOS and Windows Phone 8.
It is possible to request this app from a web page, let it scan the barcode and then callback you web site with the scanned information.

window.location="pic2shop://scancallback=http%3A//www.google.com/m/
products%3Fg‌l%3Dus%26source%3Dmog%26hl%3Den%26source%3Dgp
2%26q%3DEAN%26btnProductsHome%3DSear‌​ch%2BProducts

The above example will open the app and when the user scans a barcode, open the web browser on a google search for the scanned product barcode.

If pic2shop is not installed on the phone, the call will fail. The thing is to set a timeout that will redirect to the store (to download the app) if the call fails.
User agents can be used to know to which store it should redirect.

Full example (Android store redirection) :

<SCRIPT LANGUAGE="JavaScript">
         function trygoogle() {
          setTimeout(function() {
          // if pic2shop not installed yet, go to App Store
          window.location = "market://details?id=com.visionsmarts.pic2shop";
         }, 25);
         // launch pic2shop and tell it to open Google Products with scan result
         window.location="pic2shop://scan?callback=http%3A//www.google.com/m/products%3Fgl%3Dus%26source%3Dmog%26hl%3Den%26source%3Dgp2%26q%3DEAN%26btnProductsHome%3DSearch%2BProducts";
         }
</SCRIPT>

Documentation : http://www.pic2shop.com/developers.html

Android barcode scanner integration with web page

Using a javascript interface and loadurl(javascript...) you can communicate with your webpage from Android

public void loadScript(String script){      
    webview.loadUrl("javascript:(function() { " + script + "})()");             
}

private class JavaScriptInterface {     
    public void startQRScan() {
        ...
    }
}

There are plenty of examples on google.

Scanning barcode in Desktop-Browser using mobile

If you want to use an Android device camera, you don't need to connect the device to the USB port. Not like a webcam, there's no driver for opening Android camera straightforward on PC.

A possible workaround:

1. Use WebSocket for communication between the desktop browser (E.g. desktop.htm) and the mobile browser (E.g. mobile.htm).
2. Use WebRTC (getUserMedia) to open Android camera in the mobile browser.
3. Embed a JavaScript barcode SDK (E.g. ZXing or Dynamsoft JavaScript Barcode SDK) into your mobile web app.
4. Read barcodes and sync results from mobile.htm to desktop.htm via WebSocket.

Use integrate barcode scanner with Xamarin Forms

I found an issue to my problem.

In my xaml file

<Entry x:Name="myEntry"
       Unfocused="Entry_Unfocused" />

In my c# file

private void Entry_Unfocused(object sender, FocusEventArgs e)
{
    this.myEntry.Focus()
}

---

Related Topics