QR / Barcode Scanner

Easily integrate QR code and barcode scanning into your mobile app using the device camera. Ideal for use cases such as:

• In-store retail shopping
• Warehouse and inventory management
• Data center asset tracking

The Median QR/Barcode Scanner Native Plugin is built on top of customized, open-source libraries and offers full functionality without licensing fees or usage limits.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/qr-barcode/

Underlying Open-Source Technologies

Android: Zebra Crossing library at https://github.com/zxing/zxing

iOS: hyperoslo library at https://github.com/hyperoslo/BarcodeScanner

UI Example

iOS	Android

Implementation Guide

Once the QR/Barcode Scanner Native Plugin has been added to your app, you may use the following Median JavaScript Bridge commands to access its functionality.

Start a QR/Barcode Scan

Use median.barcode.scan() to trigger the native scanner. The method supports both callback and Promise-based approaches:

↔️Median JavaScript Bridge

JavaScript

// Callback example
median.barcode.scan({'callback': process_barcode});

function process_barcode(data) { 
  if (data.success) {
     alert('got barcode', data.code); 
  }
}

// Promise example
median.barcode.scan().then(function (data) {
  if (data.success) {
    alert('got barcode', data.code); 
  }
});

The native scanner UI will launch within your app. Upon scan completion, focus will return to the webview where an object in the format below will be returned.

JavaScript

{
  success: true | false,
  type: "STRING",   // Symbology (e.g. 'qr', 'code128')
  code: "STRING",   // The actual scanned value
  error: "STRING"   // Error message if unsuccessful
}

Learn more about using promises and the Median JavaScript Bridge.

Customizing the Scanner Prompt

You can customize the message shown to users during scanning by setting a prompt in the plugin settings. To do this, go to Native Plugins > QR / Barcode Scanner, as shown below.

QR / Barcode Scanner including Custom Prompt Message

Set custom prompt message on runtime

You can also dynamically set the prompt message in-app using the setPrompt() method:

↔️Median JavaScript Bridge

JavaScript

median.barcode.setPrompt('Align the QR code or barcode within the frame to scan automatically');