native-bar-code-detector.ts

/**
 * @fileoverview
 * {@interface QrcodeDecoder} wrapper around experimental BarcodeDetector API.
 * 
 * @author mebjas <minhazav@gmail.com>
 * 
 * Read more about the experimental feature here:
 * https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector
 * 
 * The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
 * http://www.denso-wave.com/qrcode/faqpatent-e.html
 */

import {
    QrcodeResult,
    QrcodeResultFormat,
    Html5QrcodeSupportedFormats,
    QrcodeDecoderAsync,
    Logger
} from "./core";

declare const BarcodeDetector: any;

/** Config for BarcodeDetector API. */
interface BarcodeDetectorConfig {
    formats: Array<string>;
}

/**
 * Interface for BarcodeDetector result.
 * 
 * Forked from
 * https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector#methods
 */
interface BarcodeDetectorResult {
    /**
     * A DOMRectReadOnly, which returns the dimensions of a rectangle
     * representing the extent of a detected barcode, aligned with the image.
     */
    boundingBox: DOMRectReadOnly;

    /**
     * The x and y co-ordinates of the four corner points of the detected
     * barcode relative to the image, starting with the top left and working
     * clockwise. This may not be square due to perspective distortions within
     * the image.
     */
    cornerPoints: any;

    /**
     * The detected barcode format. 
     */
    format: string;

    /**
     * A String decoded from the barcode data.
     */
    rawValue: string;
}

/**
 * ZXing based Code decoder.
 */
 export class BarcodeDetectorDelegate implements QrcodeDecoderAsync {

    // All formats defined here
    // https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API#supported_barcode_formats
    private readonly formatMap: Map<Html5QrcodeSupportedFormats, string>
        = new Map([
            [ Html5QrcodeSupportedFormats.QR_CODE, "qr_code" ],
            [ Html5QrcodeSupportedFormats.AZTEC, "aztec" ],
            [ Html5QrcodeSupportedFormats.CODABAR, "codabar" ],
            [ Html5QrcodeSupportedFormats.CODE_39, "code_39" ],
            [ Html5QrcodeSupportedFormats.CODE_93, "code_93" ],
            [ Html5QrcodeSupportedFormats.CODE_128, "code_128" ],
            [ Html5QrcodeSupportedFormats.DATA_MATRIX,  "data_matrix" ],
            [ Html5QrcodeSupportedFormats.ITF, "itf" ],
            [ Html5QrcodeSupportedFormats.EAN_13, "ean_13" ],
            [ Html5QrcodeSupportedFormats.EAN_8, "ean_8" ],
            [ Html5QrcodeSupportedFormats.PDF_417, "pdf417" ],
            [ Html5QrcodeSupportedFormats.UPC_A, "upc_a" ],
            [ Html5QrcodeSupportedFormats.UPC_E, "upc_e" ]
        ]);
    private readonly reverseFormatMap: Map<string, Html5QrcodeSupportedFormats>
        = this.createReverseFormatMap();

    private verbose: boolean;
    private logger: Logger;
    private detector: any;

    /**
     * Returns true if this API is supported by the browser.
     * 
     * TODO(mebjas): Add checks like this 
     * https://web.dev/shape-detection/#featuredetection
     * TODO(mebjas): Check for format supported by the BarcodeDetector using
     * getSupportedFormats() API.
     * @returns 
     */
    public static isSupported(): boolean {
        if (!("BarcodeDetector" in window)) {
            return false;
        }
        const dummyDetector = new BarcodeDetector({formats: [ "qr_code" ]});
        return typeof dummyDetector !== "undefined";
    }

    public constructor(
        requestedFormats: Array<Html5QrcodeSupportedFormats>,
        verbose: boolean,
        logger: Logger) {
        if (!BarcodeDetectorDelegate.isSupported()) {
            throw "Use html5qrcode.min.js without edit, Use "
                + "BarcodeDetectorDelegate only if it isSupported();";
        }
        this.verbose = verbose;
        this.logger = logger;

        // create new detector
        const formats = this.createBarcodeDetectorFormats(requestedFormats);
        this.detector = new BarcodeDetector(formats);

        // check compatibility
        if (!this.detector) {
            throw "BarcodeDetector detector not supported";
        }
    }

    async decodeAsync(canvas: HTMLCanvasElement): Promise<QrcodeResult> {
        const barcodes: Array<BarcodeDetectorResult>
            = await this.detector.detect(canvas);
        if (!barcodes || barcodes.length === 0) {
            throw "No barcode or QR code detected.";
        }

        // TODO(mebjas): Today BarcodeDetector library seems to be returning
        // mutliple barcodes if supported. But the documentation around it is
        // not the best. As of now, we are returning just the largest code
        // found. In future it'd be desriable to return mutli codes if supported
        // and found.
        let largestBarcode = this.selectLargestBarcode(barcodes);
        return {
            text: largestBarcode.rawValue,
            format: QrcodeResultFormat.create(
                this.toHtml5QrcodeSupportedFormats(largestBarcode.format))
        };
    }

    private selectLargestBarcode(barcodes: Array<BarcodeDetectorResult>)
        : BarcodeDetectorResult {
        let largestBarcode: BarcodeDetectorResult | null = null;
        let maxArea = 0;
        for (let barcode of barcodes) {
            let area = barcode.boundingBox.width * barcode.boundingBox.height;
            if (area > maxArea) {
                maxArea = area;
                largestBarcode = barcode;
            }
        }
        if (!largestBarcode) {
            throw "No largest barcode found";
        }
        return largestBarcode!;
    }

    private createBarcodeDetectorFormats(
        requestedFormats: Array<Html5QrcodeSupportedFormats>):
        BarcodeDetectorConfig {
            let formats: Array<string> = [];
            for (const requestedFormat of requestedFormats) {
                if (this.formatMap.has(requestedFormat)) {
                    formats.push(
                        this.formatMap.get(requestedFormat)!);
                } else {
                    this.logger.warn(`${requestedFormat} is not supported by`
                        + "BarcodeDetectorDelegate");
                }
            }
            return { formats: formats };
    }

    private toHtml5QrcodeSupportedFormats(barcodeDetectorFormat: string)
        : Html5QrcodeSupportedFormats {
        if (!this.reverseFormatMap.has(barcodeDetectorFormat)) {
            throw `reverseFormatMap doesn't have ${barcodeDetectorFormat}`;
        }
        return this.reverseFormatMap.get(barcodeDetectorFormat)!;
    }

    private createReverseFormatMap(): Map<string, Html5QrcodeSupportedFormats> {
        let result = new Map();
        this.formatMap.forEach(
            (value: string, key: Html5QrcodeSupportedFormats, _) => {
            result.set(value, key);
        });
        return result;
    }
}