javascript - 如何多次使用相机流

Question

我想创建一个 PWA，它充当条形码和 QR 码扫描仪。为了检测二维码，我使用 jsQR（参见：https ://github.com/cozmo/jsQR ），对于条形码，我想使用 QuaggaJS（参见：https ://serratus.github.io/quaggaJS/ ）。要选择应检测的代码类型，我的站点上有一些单选按钮，它们调用函数“triggerScannerInitialisation()”（见下文）。扫描 QR 码已经开始工作，但扫描条码会导致一些问题。相机图像未正确加载。如果我在仅使用 QuaggaJS 的测试站点上运行相同的代码，则扫描条形码可以正常工作。我认为从同一个摄像头打开两个摄像头流可能会导致问题。谁能给我一个提示，告诉我如何将两者与同一个相机流一起使用？

// variables for stopping scanner types on next run
let stopJsQrOnNextRun = true;

function triggerScannerInitialisation() {
    // get the selected code type
    let codeTypeSelector = document.querySelector('input[name="code_type_selector"]:checked').value;

    switch (codeTypeSelector) {
        case 'barcode':
            stopJsQrOnNextRun = true;
            startQuaggaJs();
            break;
        case 'qr':
            stopQuaggaJs();
            stopJsQrOnNextRun = false;
            startJsQr();
            break;
        default:
            return false;
    }
}

function startQuaggaJs() {
    document.getElementById("barcode_camera_div").hidden = false;

    Quagga.init({
        inputStream: {
            name: "Live",
            type: "LiveStream",
            target: document.querySelector('#barcode_camera_div'),
            constraints: {
                width: 480,
                height: 320,
                facingMode: "environment"
            },
        },
        decoder: {
            readers: [
                "code_128_reader",
                "ean_reader",
                "ean_8_reader",
                "code_39_reader",
                "code_39_vin_reader",
                "codabar_reader",
                "upc_reader",
                "upc_e_reader",
                "i2of5_reader"
            ],
            debug: {
                showCanvas: true,
                showPatches: true,
                showFoundPatches: true,
                showSkeleton: true,
                showLabels: true,
                showPatchLabels: true,
                showRemainingPatchLabels: true,
                boxFromPatches: {
                    showTransformed: true,
                    showTransformedBox: true,
                    showBB: true
                }
            }
        },

    }, function (err) {
        if (err) {
            console.log(err);
            return
        }

        console.log("Initialization finished. Ready to start");
        Quagga.start();
    });

    Quagga.onProcessed(function (result) {
        var drawingCtx = Quagga.canvas.ctx.overlay,
            drawingCanvas = Quagga.canvas.dom.overlay;

        if (result) {
            if (result.boxes) {
                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                result.boxes.filter(function (box) {
                    return box !== result.box;
                }).forEach(function (box) {
                    Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
                });
            }

            if (result.box) {
                Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
            }

            if (result.codeResult && result.codeResult.code) {
                Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
            }
        }
    });


    Quagga.onDetected(function (result) {
        console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
    });
}

function stopQuaggaJs() {
    // stop quagga JS
    Quagga.stop();

    document.getElementById("barcode_camera_div").hidden = true;
}

function startJsQr() {
    let video = document.createElement("video");
    let canvasElement = document.getElementById("canvas");
    let canvas = canvasElement.getContext("2d");
    let loadingMessage = document.getElementById("loadingMessage");

    function drawLine(begin, end, color) {
        canvas.beginPath();
        canvas.moveTo(begin.x, begin.y);
        canvas.lineTo(end.x, end.y);
        canvas.lineWidth = 4;
        canvas.strokeStyle = color;
        canvas.stroke();
    }

    // Use facingMode: environment to attemt to get the front camera on phones
    navigator.mediaDevices.getUserMedia({video: {facingMode: "environment"}}).then(function (stream) {
        video.srcObject = stream;
        video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
        video.play();

        console.log("JSQR triggered");

        requestAnimationFrame(tickQRcode);
    });

    function tickQRcode() {
        loadingMessage.innerText = "⌛ Video laden...";
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
            loadingMessage.hidden = true;
            canvasElement.hidden = false;

            canvasElement.height = video.videoHeight;
            canvasElement.width = video.videoWidth;
            canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
            let imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
            let code = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: "dontInvert",
            });

            if (code) {
                drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
                drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
                drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
                drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
                codeFound(code.data, 'qr');
            }
        }
        if (!stopJsQrOnNextRun) {
            requestAnimationFrame(tickQRcode);
        } else {
            stopJsQr();
        }
    }

    function stopJsQr() {
        // stop the stream
        video.srcObject.getTracks().forEach(function (track) {
            if (track.readyState === 'live') {
                track.stop();
            }
        });

        // remove HTML element properties
        let canvasElement = document.getElementById('canvas');
        canvasElement.setAttribute('hidden', 1);
        canvasElement.removeAttribute('height');
        canvasElement.removeAttribute('width');
    }
}

谢谢您的帮助！