如何使用 zxing-cpp-emscripten 连续解码 Qr/barcode

Question

我目前正在处理需要 QR/条形码扫描仪的客户项目。 我发现zxing-cpp-emscripten非常有帮助，并且符合我的要求。 但我面临的一个问题是，它只扫描我希望它连续扫描的点击功能（每 5 秒递归一次）。 无需点击它。 这是我发现这个的教程。

我尝试每五秒钟使用 onclick 重新加载按钮。 但有时它会卡住。

var btnautoclick = document.getElementById('go');
setInterval(function () { btnautoclick.click(); }, 5000);

请任何人都可以向我建议我怎么能想出这个。

注意：我尝试插入Js fiddle但它根本不起作用。

 var videoElement = document.querySelector('video'); var canvas = document.getElementById('pcCanvas'); var mobileCanvas = document.getElementById('mobileCanvas'); var ctx = canvas.getContext('2d'); var mobileCtx = mobileCanvas.getContext('2d'); var videoSelect = document.querySelector('select#videoSource'); var videoOption = document.getElementById('videoOption'); var buttonGo = document.getElementById('go'); var barcode_result = document.getElementById('dbr'); var isPaused = false; var videoWidth = 640, videoHeight = 480; var mobileVideoWidth = 240, mobileVideoHeight = 320; var isPC = true; var ZXing = null; var decodePtr = null; var tick = function () { if (window.ZXing) { ZXing = ZXing(); decodePtr = ZXing.Runtime.addFunction(decodeCallback); } else { setTimeout(tick, 10); } }; tick(); var decodeCallback = function (ptr, len, resultIndex, resultCount) { var result = new Uint8Array(ZXing.HEAPU8.buffer, ptr, len); console.log(String.fromCharCode.apply(null, result)); barcode_result.textContent = String.fromCharCode.apply(null, result); buttonGo.disabled = false; if (isPC) { canvas.style.display = 'block'; } else { mobileCanvas.style.display = 'block'; } }; // check devices function browserRedirect() { var deviceType; var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { deviceType = 'phone'; } else { deviceType = 'pc'; } return deviceType; } if (browserRedirect() == 'pc') { isPC = true; } else { isPC = false; } // stackoverflow: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158 function dataURItoBlob(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString }); } // add button event buttonGo.onclick = function () { if (isPC) { canvas.style.display = 'none'; } else { mobileCanvas.style.display = 'none'; } isPaused = false; scanBarcode(); buttonGo.disabled = true; }; // scan barcode function scanBarcode() { barcode_result.textContent = ""; if (ZXing == null) { buttonGo.disabled = false; alert("Barcode Reader is not ready!"); return; } var data = null, context = null, width = 0, height = 0, dbrCanvas = null; if (isPC) { context = ctx; width = videoWidth; height = videoHeight; dbrCanvas = canvas; } else { context = mobileCtx; width = mobileVideoWidth; height = mobileVideoHeight; dbrCanvas = mobileCanvas; } context.drawImage(videoElement, 0, 0, width, height); var vid = document.getElementById("video"); console.log("video width: " + vid.videoWidth + ", height: " + vid.videoHeight); var barcodeCanvas = document.createElement("canvas"); barcodeCanvas.width = vid.videoWidth; barcodeCanvas.height = vid.videoHeight; var barcodeContext = barcodeCanvas.getContext('2d'); var imageWidth = vid.videoWidth, imageHeight = vid.videoHeight; barcodeContext.drawImage(videoElement, 0, 0, imageWidth, imageHeight); // read barcode var imageData = barcodeContext.getImageData(0, 0, imageWidth, imageHeight); var idd = imageData.data; var image = ZXing._resize(imageWidth, imageHeight); console.time("decode barcode"); for (var i = 0, j = 0; i < idd.length; i += 4, j++) { ZXing.HEAPU8[image + j] = idd[i]; } var err = ZXing._decode_any(decodePtr); console.timeEnd('decode barcode'); console.log("error code", err); if (err == -2) { setTimeout(scanBarcode, 30); } } // https://github.com/samdutton/simpl/tree/gh-pages/getusermedia/sources var videoSelect = document.querySelector('select#videoSource'); navigator.mediaDevices.enumerateDevices() .then(gotDevices).then(getStream).catch(handleError); videoSelect.onchange = getStream; function gotDevices(deviceInfos) { for (var i = deviceInfos.length - 1; i >= 0; --i) { var deviceInfo = deviceInfos[i]; var option = document.createElement('option'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'videoinput') { option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1); videoSelect.appendChild(option); } else {455 console.log('Found one other kind of source/device: ', deviceInfo); } } } function getStream() { buttonGo.disabled = false; if (window.stream) { window.stream.getTracks().forEach(function(track) { track.stop(); }); } var constraints = { video: { deviceId: {exact: videoSelect.value} } }; navigator.mediaDevices.getUserMedia(constraints). then(gotStream).catch(handleError); } function gotStream(stream) { window.stream = stream; // make stream available to console videoElement.srcObject = stream; } function handleError(error) { console.log('Error: ', error); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <h1>Pure JS Barcode Reader</h1> <div>Barcode result: <span id="dbr"></span></div> <div class="select"> <label for="videoSource">Video source: </label><select id="videoSource"></select> </div> <button id="go">Read Barcode</button> <div> <video muted autoplay id="video" playsinline="true"></video> <canvas id="pcCanvas" width="640" height="480" style="display: none; float: bottom;"></canvas> <canvas id="mobileCanvas" width="240" height="320" style="display: none; float: bottom;"></canvas> </div> <script async src="https://raw.githubusercontent.com/yushulx/zxing-cpp-emscripten/master/examples/js/zxing.js"></script>

Answer 1

在 onclick 按钮外调用 scanBarcode()，它会在页面加载时触发。

将此更改为

// add button event
buttonGo.onclick = function () {
  if (isPC) {
    canvas.style.display = 'none';
  } else {
    mobileCanvas.style.display = 'none';
  }

  isPaused = false;
  scanBarcode();
  buttonGo.disabled = true;
};

这个

// add button event
buttonGo.onclick = function () {
  if (isPC) {
    canvas.style.display = 'none';
  } else {
    mobileCanvas.style.display = 'none';
  }

  isPaused = false;
  buttonGo.disabled = true;
};

 scanBarcode();

如果要每五秒扫描一次，则需要设置时间间隔

setInterval(function () {
 scanBarcode();
}, 5000);

希望这个回答对你有帮助。