Thursday, 24 July 2014

QR code scanning in a Windows Phone app

A recent Windows Phone app that I developed had a requirement to include QR code scanning, and to take an action based on the data contained in the QR code. A QR code is a type of machine readable barcode that contains data that can be extracted from patterns present in both horizontal and vertical components of the image. Initially this seemed like quite a big task, but with the help of a library it became an effortless task.

This blog post demos a simple Windows Phone 8 app for performing QR code scanning using ZXing.Net.Mobile. ZXing.Net.Mobile is a .NET library based on the widely used open source ZXing (Zebra Crossing) barcode library, whose goal is to make scanning barcodes as painless as possible in an app.

Implementation

The first step is to add the ZXing.Net.Mobile nuget package to your app, and import the ZXing.Mobile namespace into your class.

private MobileBarcodeScanner _scanner;
 
private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    _scanner = new MobileBarcodeScanner(this.Dispatcher);
    _scanner.UseCustomOverlay = false;
    _scanner.TopText = "Hold camera up to QR code";
    _scanner.BottomText = "Camera will automatically scan QR code\r\n\rPress the 'Back' button to cancel";
 
    var result = await _scanner.Scan();
    ProcessScanResult(result);
}

Scanning a QR code is as simple as creating an instance of the MobileBarcodeScanner class, and invoking it’s Scan method. Optional setup includes specifying text to display at the top and bottom of the page, while scanning a QR code, and a flag that indicates whether you want to use ZXings in-built overlay, or specify your own.

The following screenshot shows the app scanning a QR code (courtesy of Google Images).

image

When a QR code is successfully recognized the decoded result can be passed to a method for processing, in this case the ProcessScanResult method. Note that decoding of the image is all automatically performed by the ZXing.Net.Mobile library.

private void ProcessScanResult(ZXing.Result result)
{
    string message = string.Empty;
 
    message = (result != null && !string.IsNullOrEmpty(result.Text)) ? "Found QR code: " + result.Text : "Scanning cancelled";
 
    this.Dispatcher.InvokeAsync(() =>
        {
            MessageBox.Show(message);
        });
}

This method simply extracts the text from the ZXing.Result instance and displays it in a mesage box, as shown in the following screenshot.

image

Obviously in a real app you may choose to log the decoded QR code result somewhere, or in the case of a URL, open it in a web browser.

Summary

This blog post has demonstrated how to construct a simple app for performing QR code scanning, using the ZXing.Net.Mobile library. This library makes the scanning and decoding of bar codes effortless, leaving you to focus on other user experiences in your app.

The sample app can be downloaded here.

3 comments:

  1. if(result.Text.StartWith("http://")
    {
    WebBrowserTask browserTask=new WebBrowserTask();
    browserTask.Uri=new Uri(result.Text);
    browserTask.Show();
    }

    ReplyDelete
  2. Hello!
    Nice post.
    I tried download the sample project but the link is not available anymore.
    Can you reupload it please?
    Thank you so much!

    ReplyDelete
  3. Apologies. All my downloads links to OneDrive have broken. The updated link is:

    https://1drv.ms/u/s!AqqxnsyjuZgbgVgrlXBolhWKvU64

    ReplyDelete