# QR Code Reader

Links: [Home](../../../index.md)

Wrapper for the [jsQR](https://github.com/cozmo/jsQR) library. Reads and decodes QR codes from images or video frames.

## Loading

```js
Application.require("thirdparty/convert/image/qrcode/reader").then(function (jsQR) {
    // jsQR is the reader function
});
```

## Use Cases

### Decode a QR code from an image

```js
Application.require("thirdparty/convert/image/qrcode/reader").then(function (jsQR) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var img = document.getElementById('qr-image');

    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var code = jsQR(imageData.data, imageData.width, imageData.height);

    if (code) {
        console.log('QR Code data:', code.data);
        console.log('Location:', code.location);
    } else {
        console.log('No QR code found');
    }
});
```

### Live QR code scanning from webcam

```js
Application.require([
    "qr :: thirdparty/convert/image/qrcode/reader",
    "devices"
]).then(function (libs) {
    var video = document.getElementById('video');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
    .then(function (stream) {
        video.srcObject = stream;
        video.play();

        setInterval(function () {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            ctx.drawImage(video, 0, 0);
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var code = libs.qr(imageData.data, imageData.width, imageData.height);
            if (code) {
                document.getElementById('result').textContent = code.data;
            }
        }, 300);
    });
});
```

## Notes

- `jsQR(data, width, height)` takes raw RGBA pixel data (Uint8ClampedArray), not an image element.
- Returns `null` if no QR code is found, or an object with `.data` and `.location` properties.