Version 2.2.0
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);