The QR Component

The QR component provides an easy way to scan QR codes using the device's camera. It handles camera access, continuously scans the video feed for a QR code, and returns the decoded data through a simple callback function.

Starting QR Scanning#

To activate the camera and begin scanning for QR codes, call the start method. You can specify an optional cameraId to select which camera to use.

// Use the first available camera (often the back camera on mobile).
Protobject.QR.start(0);

Handling QR Data#

To process the data from a scanned QR code, set a callback function using the onData method. This callback will be executed as soon as a QR code is successfully detected, receiving the decoded data as a string.

Protobject.QR.onData((data) => {
    console.log("QR Code Detected:", data);
});

Showing the Camera Preview#

To display a live feed from the camera on your webpage, use the showPreview method. You can specify the position and dimensions of the preview window.

Protobject.QR.showPreview({ top: 50, left: 50, width: '640px', height: '480px' });

Hiding the Camera Preview#

If you no longer wish to display the live camera feed, you can hide it by calling the hidePreview method. The scanning will continue in the background.

Protobject.QR.hidePreview();

Stopping the Scan#

To completely stop the camera feed and release all resources, call the stop method. This is important for saving battery and ensuring user privacy.

Protobject.QR.stop();