掃瞄QRCODE

只靠 HTML 前端技術就可以使用相機，那麼最實用的功能就是掃瞄 QRCODE ，這裡提供一個最簡單易用的方式 使用函式庫：https://github.com/mebjas/html5-qrcode ``` $mmcode(r1) ``` <div class="mmresult r1"> <button id="b072401_idfront">Front</button> <button id="b072401_idback">Back</button> <button id="b072401_idstop">Stop</button> <input type="file" id="b072401_idfile" accept="image/*"> <hr> <div id="b072401_idresult"></div> <hr> <div id="b072401_reader" style="display:inline-block;width:320px;" ></div> <script> $(function() { const html5QrCode = new Html5Qrcode("b072401_reader"); const qrCodeSuccessCallback = (decodedText, decodedResult) => { $("#b072401_idresult").html(JSON.stringify(decodedResult,"",4)) }; const config = { fps: 10, qrbox: { width: 200, height: 200 } }; $("#b072401_idfront").on("click",function() { $("#b072401_idstop").click(); html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback); }) $("#b072401_idback").on("click",function() { $("#b072401_idstop").click(); html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback); }) $("#b072401_idstop").on("click",function() { try { html5QrCode.stop().then((ignore) => { console.log("stop ok") }).catch((err) => { console.log("stop err") }); } catch(e){} }) $("#b072401_idfile").on("change",function(e) { $("#b072401_idstop").click(); if (e.target.files.length == 0) { // No file selected, ignore return; } const imageFile = e.target.files[0]; // Scan QR Code html5QrCode.scanFile(imageFile, true) .then((decodedText) => { $("#b072401_idresult").html(decodedText) }) .catch(err => { console.log(`Error scanning file. Reason: ${err}`) }); }) }) </script> <script src="https://yiharng.github.io/html5-qrcode.min.js"></script> </div>