A Barcode

The Barcode is a machine-readable code, like a 'code-128' Barcode, or a 'qr-code' scanned by the Barcode Scanner - either via the <CodeScanner /> view, the Barcode Scanner CameraOutput, or the BarcodeScanner directly from a Frame Processor.

Barcode Formats

There are different standardized Barcode Formats, which are represented as BarcodeFormat. Typically, you should configure your Barcode Scanner pipeline to only detect the BarcodeFormats that are relevant to your use-case, not 'all'.

Access a Barcode's format via format:

const barcode = ...
console.log(barcode.format) // "qr-code"

Barcode Value

Value Type

A Barcode can contain different types of values, like 'url', 'text', 'wifi', or more (see BarcodeValueType). To get a Barcode's value type, use valueType:

const barcode = ...
console.log(barcode.valueType) // "url"

Raw Value

If a Barcode's value can be decoded to a string, it can be accessed via rawValue:

const barcode = ...
console.log(barcode.rawValue) // "https://margelo.com"

Raw Bytes

You can also get the Barcode's value as a raw ArrayBuffer:

const barcode = ...
const buffer = barcode.rawBytes
const data = new Uint8Array(buffer)
console.log(data) // [104, 116, 116, 112, ...]

Display Value

Some Barcodes are encoded with non-human-friendly values, like 'wifi'. In this case you can use displayValue to get a human-friendly representation of the code:

const barcode = ...
console.log(barcode.rawValue) // "WIFI:T:WPA;S:MyNetwork;P:password;;"
console.log(barcode.displayValue) // "MyNetwork"

Corner Points and Bounding Box

A Barcode's precise location in the Camera can be accessed via boundingBox (a rectangle covering the barcode), or cornerPoints (points for each corner):

const barcode = ...
console.log(barcode.boundingBox) // { left: 0.421, right: 0.278, top: 0.345, bottom: 0.597 }
console.log(barcode.cornerPoints) // [{ x: 0.421, y: 0.345 }, ...]

Converting Barcode coordinates to View coordinates

These coordinates are always relative to the Frame this code was detected in. To convert the coordinates to Preview View coordinates, first convert them to Camera coordinates using Frame.convertFramePointToCameraPoint(...), and then PreviewView.convertCameraPointToViewPoint(...):

const barcode = ...
const frame = ...
const preview = ...
for (const barcodePoint of barcode.cornerPoints) {
  const cameraPoint = frame.convertFramePointToCameraPoint(barcodePoint)
  const viewPoint = preview.convertCameraPointToViewPoint(cameraPoint)
  console.log(viewPoint)
}