Barcode Reader Example

Files:

• barcodereader/assets/main.qml
• barcodereader/src/main.cpp
• barcodereader/barcodereader.pro
• barcodereader/translations/barcodereader.pro

Description

The Barcode Reader example allows the user to scan a QR Code with the camera and view the decoded textual representation.

Overview

In this example we'll learn how to use the Camera and BarcodeDetector classes of the BB10 framework to scan a QR code and decode it.

The UI

The UI of this sample application consists of the Camera control only, which shows a preview of the current camera viewport.

    // The camera preview control
    Camera {
        id: camera

        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill

        onCameraOpened: {
            // Apply some settings after the camera was opened successfully
            getSettings(cameraSettings)
            cameraSettings.focusMode = CameraFocusMode.ContinuousAuto
            cameraSettings.shootingMode = CameraShootingMode.Stabilization
            applySettings(cameraSettings)

            // Start the view finder as it is needed by the barcode detector
            camera.startViewfinder()
        }

        attachedObjects: [
            BarcodeDetector {
                id: barcodeDetector
                camera: camera
                formats: BarcodeFormat.Any
                onDetected: {
                    if (resultLabel.text != data) {
                        resultLabel.text = data;
                        resultArea.visible = true;
                        scannedSound.play()
                    }
                }
            },
            SystemSound {
                id: scannedSound

                sound: SystemSound.GeneralNotification
            },
            CameraSettings {
                id: cameraSettings
            }
        ]
    }

The Camera control shows the video stream that is currently provided by the camera viewport. To enable the Camera control, we invoke the open() method on it after the start-up animation has started.

    onStarted: {
        camera.open()
    }

If the open() call was successful, the cameraOpened() signal is emitted, which we react to in the onCameraOpened() signal handler. There we retrieve the current settings of the Camera object, configure them to improve the scanning of barcodes and apply them back on the Camera object. Afterwards we start the view finder of the camera, since that one is needed by the BarcodeDetector to work correctly.

If the view finder was started successfully, the viewfinderStarted() signal is emitted. We react to it by setting the Camera object on the BarcodeDetector object. Now the barcode detector automatically scans the video stream to detect any QR code.

    attachedObjects: [
        BarcodeDetector {
            id: barcodeDetector
            camera: camera
            formats: BarcodeFormat.Any
            onDetected: {
                if (resultLabel.text != data) {
                    resultLabel.text = data;
                    resultArea.visible = true;
                    scannedSound.play()
                }
            }
        },
        SystemSound {
            id: scannedSound

            sound: SystemSound.GeneralNotification
        },
        CameraSettings {
            id: cameraSettings
        }
    ]

When a QR code is detected, the BarcodeDetector emits the barcodeDetected() signal with the decoded textual data as parameter. In our example we update the 'text' property of a Label with these data and play a sound to inform the user that a new barcode has been read.