javascript - カメラ ストリームを複数回使用する方法

Question

バーおよび QR コード スキャナーとして機能する PWA を作成したいと考えています。QR コードの検出には jsQR ( https://github.com/cozmo/jsQRを参照) を使用し、バーコードには QuaggaJS ( https://serratus.github.io/quaggaJS/を参照) を使用します。検出するコードの種類を選択するために、サイトにいくつかのラジオ ボタンがあり、関数「triggerScannerInitialisation()」を呼び出します (以下を参照)。QR コードのスキャンは既に機能していますが、バーコードのスキャンはいくつかの問題を引き起こします。カメラ画像が正しく読み込まれていません。QuaggaJS のみを使用するテスト サイトで同じコードを実行すると、バーコードのスキャンは正常に機能します。同じカメラから 2 つのカメラ ストリームを開くと問題が発生する可能性があると思います。同じカメラ ストリームで両方を使用する方法についてヒントを教えてもらえますか?

// 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');
    }
}

ご協力ありがとうございました！