pat*_*ick 5 javascript quagga getusermedia quaggajs
我想创建一个充当条形码和二维码扫描仪的 PWA。为了检测 QR 码，我使用 jsQR （请参阅：https: //github.com/cozmo/jsQR），对于条形码，我想使用 QuaggaJS （请参阅： https: //serratus.github.io/quaggaJS/）。为了选择应检测的代码类型，我的网站上有一些单选按钮，它们调用函数“triggerScannerInitialization()”（见下文）。扫描二维码已经可以使用，但扫描条形码会导致一些问题。相机图像未正确加载。如果我在仅使用 QuaggaJS 的测试站点上运行相同的代码，扫描条形码就会正常工作。我认为从同一相机打开两个相机流可能会导致问题。谁能给我提示如何使用相同的相机流？
\n// variables for stopping scanner types on next run\nlet stopJsQrOnNextRun = true;\n\nfunction triggerScannerInitialisation() {\n // get the selected code type\n let codeTypeSelector = document.querySelector(\'input[name="code_type_selector"]:checked\').value;\n\n switch (codeTypeSelector) {\n case \'barcode\':\n stopJsQrOnNextRun = true;\n startQuaggaJs();\n break;\n case \'qr\':\n stopQuaggaJs();\n stopJsQrOnNextRun = false;\n startJsQr();\n break;\n default:\n return false;\n }\n}\n\nfunction startQuaggaJs() {\n document.getElementById("barcode_camera_div").hidden = false;\n\n Quagga.init({\n inputStream: {\n name: "Live",\n type: "LiveStream",\n target: document.querySelector(\'#barcode_camera_div\'),\n constraints: {\n width: 480,\n height: 320,\n facingMode: "environment"\n },\n },\n decoder: {\n readers: [\n "code_128_reader",\n "ean_reader",\n "ean_8_reader",\n "code_39_reader",\n "code_39_vin_reader",\n "codabar_reader",\n "upc_reader",\n "upc_e_reader",\n "i2of5_reader"\n ],\n debug: {\n showCanvas: true,\n showPatches: true,\n showFoundPatches: true,\n showSkeleton: true,\n showLabels: true,\n showPatchLabels: true,\n showRemainingPatchLabels: true,\n boxFromPatches: {\n showTransformed: true,\n showTransformedBox: true,\n showBB: true\n }\n }\n },\n\n }, function (err) {\n if (err) {\n console.log(err);\n return\n }\n\n console.log("Initialization finished. Ready to start");\n Quagga.start();\n });\n\n Quagga.onProcessed(function (result) {\n var drawingCtx = Quagga.canvas.ctx.overlay,\n drawingCanvas = Quagga.canvas.dom.overlay;\n\n if (result) {\n if (result.boxes) {\n drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));\n result.boxes.filter(function (box) {\n return box !== result.box;\n }).forEach(function (box) {\n Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });\n });\n }\n\n if (result.box) {\n Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });\n }\n\n if (result.codeResult && result.codeResult.code) {\n Quagga.ImageDebug.drawPath(result.line, { x: \'x\', y: \'y\' }, drawingCtx, { color: \'red\', lineWidth: 3 });\n }\n }\n });\n\n\n Quagga.onDetected(function (result) {\n console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);\n });\n}\n\nfunction stopQuaggaJs() {\n // stop quagga JS\n Quagga.stop();\n\n document.getElementById("barcode_camera_div").hidden = true;\n}\n\nfunction startJsQr() {\n let video = document.createElement("video");\n let canvasElement = document.getElementById("canvas");\n let canvas = canvasElement.getContext("2d");\n let loadingMessage = document.getElementById("loadingMessage");\n\n function drawLine(begin, end, color) {\n canvas.beginPath();\n canvas.moveTo(begin.x, begin.y);\n canvas.lineTo(end.x, end.y);\n canvas.lineWidth = 4;\n canvas.strokeStyle = color;\n canvas.stroke();\n }\n\n // Use facingMode: environment to attemt to get the front camera on phones\n navigator.mediaDevices.getUserMedia({video: {facingMode: "environment"}}).then(function (stream) {\n video.srcObject = stream;\n video.setAttribute("playsinline", true); // required to tell iOS safari we don\'t want fullscreen\n video.play();\n\n console.log("JSQR triggered");\n\n requestAnimationFrame(tickQRcode);\n });\n\n function tickQRcode() {\n loadingMessage.innerText = "\xe2\x8c\x9b Video laden...";\n if (video.readyState === video.HAVE_ENOUGH_DATA) {\n loadingMessage.hidden = true;\n canvasElement.hidden = false;\n\n canvasElement.height = video.videoHeight;\n canvasElement.width = video.videoWidth;\n canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);\n let imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);\n let code = jsQR(imageData.data, imageData.width, imageData.height, {\n inversionAttempts: "dontInvert",\n });\n\n if (code) {\n drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");\n drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");\n drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");\n drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");\n codeFound(code.data, \'qr\');\n }\n }\n if (!stopJsQrOnNextRun) {\n requestAnimationFrame(tickQRcode);\n } else {\n stopJsQr();\n }\n }\n\n function stopJsQr() {\n // stop the stream\n video.srcObject.getTracks().forEach(function (track) {\n if (track.readyState === \'live\') {\n track.stop();\n }\n });\n\n // remove HTML element properties\n let canvasElement = document.getElementById(\'canvas\');\n canvasElement.setAttribute(\'hidden\', 1);\n canvasElement.removeAttribute(\'height\');\n canvasElement.removeAttribute(\'width\');\n }\n}\n感谢您的帮助！
\n