JSFiddle - React, Tailwind, and code Playground

by DynamsoftTeam

HTML

<!DOCTYPE html>
<html>

<body>
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/dbr.js"></script>
    <script>
        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.0.2&utm_source=guide&product=dbr&package=js to get your own trial license good for 30 days. 
        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
        // Initializes and uses the library
        (async () => {
            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
            scanner.onFrameRead = results => {
                if (results.length > 0) console.log(results);
            };
            scanner.onUniqueRead = (txt, result) => {
                alert(txt);
            };
            scanner.onPlayed = async info => {
                let sideLen = Math.min(info.width,info.height)*0.4;
                let precentW = Math.round(sideLen/info.width*100)
                let precentH = Math.round(sideLen/info.height*100);
                let rs = await scanner.getRuntimeSettings();
                rs.region.regionLeft = (100 - precentW) / 2;
                rs.region.regionRight = (100 + precentW) / 2;
                rs.region.regionTop = (100 - precentH) / 2;
                rs.region.regionBottom = (100 + precentH) / 2;
                rs.region.regionMeasuredByPercentage = 1;
                await scanner.updateRuntimeSettings(rs);
						};
            await scanner.show();
        })();
    </script>
</body>

</html>