Skip to content

Version 2.2.0

Compare
Choose a tag to compare
@mebjas mebjas released this 19 Feb 10:16
· 84 commits to master since this release
86af5f0

Version 2.2.0

  • config.qrbox now supports consuming function of type

    /**
     * A function that takes in the width and height of the video stream 
    * and returns QrDimensions.
    * 
    * Viewfinder refers to the video showing camera stream.
    */
    export type QrDimensionFunction =
        (viewfinderWidth: number, viewfinderHeight: number) => QrDimensions;

    This will allow developers to define custom QR box dimensions for their
    implementations.

    Example:

    function onScanSuccess(decodedText, decodedResult) {
        // handle the scanned code as you like, for example:
        console.log(`Code matched = ${decodedText}`, decodedResult);
    }
    
    // Square QR box with edge size = 70% of the smaller edge of the viewfinder.
    let qrboxFunction = function(viewfinderWidth, viewfinderHeight) {
        let minEdgePercentage = 0.7; // 70%
        let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
        let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
        return {
            width: qrboxSize,
            height: qrboxSize
        };
    }
    
    let html5QrcodeScanner = new Html5QrcodeScanner(
        "reader",
        { fps: 10, qrbox: qrboxFunction },
        /* verbose= */ false);
    html5QrcodeScanner.render(onScanSuccess);