barcode-scanner 相关问题

我想进行输入，在使用网络摄像头或手机摄像头扫描二维码或条形码扫描仪后可以自动填写。对于剧本我想象了这样的事情我想进行一个输入，在使用网络摄像头或手机摄像头扫描 QR 或条形码扫描仪后可以自动填写。对于剧本我想象的是这样的 <video autoplay = "true" id = "video-webcam"> </video> <input type = "text" id = "scanresult"> <script> external or internal script for scan qr or barcode. save result in variable = result html DOM getElementById ('scanresult'). value (result); </script> 我希望任何人都可以针对我的问题向我提供建议或反馈。谢谢你在此之前感谢 JaromandaX，我找到了使用网络摄像头在 Html5 上进行条形码扫描仪的脚本。这是我的index.html <!DOCTYPE html> <html> <head> <title>QR Code Scanner</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <link rel="stylesheet" href="style.css" /> <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script> </head> <body> <div id="container"> <h1>QR Code Scanner</h1> <a id="btn-scan-qr"> <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg"> <a/> <canvas hidden="" id="qr-canvas"></canvas> <div id="qr-result" hidden=""> <b>Data:</b> <span id="outputData"></span> </div> </div> <script src="qrCodeScanner.js"></script> </body> </html> qsCodeScanner.js //const qrcode = window.qrcode; const video = document.createElement("video"); const canvasElement = document.getElementById("qr-canvas"); const canvas = canvasElement.getContext("2d"); const qrResult = document.getElementById("qr-result"); const outputData = document.getElementById("outputData"); const btnScanQR = document.getElementById("btn-scan-qr"); let scanning = false; qrcode.callback = res => { if (res) { outputData.innerText = res; scanning = false; video.srcObject.getTracks().forEach(track => { track.stop(); }); qrResult.hidden = false; canvasElement.hidden = true; btnScanQR.hidden = false; } }; btnScanQR.onclick = () => { navigator.mediaDevices .getUserMedia({ video: { facingMode: "environment" } }) .then(function(stream) { scanning = true; qrResult.hidden = true; btnScanQR.hidden = true; canvasElement.hidden = false; video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen video.srcObject = stream; video.play(); tick(); scan(); }); }; function tick() { canvasElement.height = video.videoHeight; canvasElement.width = video.videoWidth; canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height); scanning && requestAnimationFrame(tick); } function scan() { try { qrcode.decode(); } catch (e) { setTimeout(scan, 300); } } 样式.css html { height: 100%; } body { font-family: sans-serif; padding: 0 10px; height: 100%; background: black; margin: 0; } h1 { color: white; margin: 0; padding: 15px; } #container { text-align: center; margin: 0; } #qr-canvas { margin: auto; width: calc(100% - 20px); max-width: 400px; } #btn-scan-qr { cursor: pointer; } #btn-scan-qr img { height: 10em; padding: 15px; margin: 15px; background: white; } #qr-result { font-size: 1.2em; margin: 20px auto; padding: 20px; max-width: 700px; background-color: white; } 有很多更好的库可以做到这一点，但我个人推荐QrScanner，因为它简单且直观。你的实时二维码扫描仪会是这样的...... 扫描仪.html <div id="holder"> <h3>Scan QR Code from Camera</h3> <div class="make"> <video id="scan"></video> </div> <div> <input type = "text" id = "scanresult"><br> <button id="start">Start</button> <button id="stop">Stop</button> </div> </div> 然后添加一点CSS：样式.css #holder{ width: 30%; margin:auto; } #holder .make { width: 99%; height: 30vh; margin-bottom: 15px; text-align: center; } video { width: 99%; margin:auto; } 然后添加您的 QrScanner 代码： <script type="module"> import QrScanner from "/path/to/qr-scanner.min.js"; QrScanner.WORKER_PATH = "/path/to/qr-scanner-worker.min.js"; // Scanner Object const scanner = new QrScanner( document.getElementById("scan"), function(result){ document.getElementById("scanresult").value = result; } ); document.getElementById("start").onclick = e => scanner.start(); document.getElementById("stop").onclick = e => scanner.stop(); </script> 然后连接相机并单击开始按钮...

javascript html5-video qr-code webcam barcode-scanner

回答 2 投票 0

是否有跨平台条码扫描仪应用程序以及适用于移动设备的 SDK？ [已关闭]

我想创建一个适用于 iPhone 和 Android 的条形码扫描应用程序。我找到了 iPhone 的“红色激光”http://www.redlaser.com/SDK.aspx。我想知道有什么软件...

android ios barcode-scanner

回答 2 投票 0

barcode-scanner 相关问题

最新问题