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

Question

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

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

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

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

注意：我尝试插入 Js 小提琴，但它根本不起作用。

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

点击按钮外调用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);

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