JavaScriptのjsQR.jsでQRコード読み取り後にカメラを終了させたい

Question

実現したいこと

JavaScriptのjsQR.jsを利用してQRコードを読み取り、
その情報をHTMLに渡して表示する機能を作成しています。

下記のURLを参考に「QRコードで読み取った情報をHTMLに渡して表示する」ことは実現できました。
https://iwb.jp/javascript-jsqr-code-browser-url-access/
下記HTMLでは、<div id="edit_area">test</div>にQRコードから読み取った値を
document.getElementById('edit_area').innerHTML = code.data;で入力します。

    <div id="edit_area">test</div>

    <script src="jsQR.min.js"></script>      
    <script>
        $(window).on('load', function(){
            const video = document.createElement('video');
            const canvasElement = document.getElementById('canvas');
            const canvas = canvasElement.getContext('2d');
            const loading = document.getElementById('loading');
            const output = document.getElementById('output');
            let isReadQR = false;
            
            navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
            .then((stream) => {
                video.srcObject = stream;
                video.setAttribute('playsinline', true);
                video.play();
                requestAnimationFrame(tick);
            });
            
            function tick() {
            loading.innerText = 'ロード中...';
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                loading.hidden = true;
                canvasElement.hidden = false;
                canvasElement.height = video.videoHeight;
                canvasElement.width = video.videoWidth;
                canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
                var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
                var code = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: 'dontInvert',
                });
                if (code && !isReadQR) {
                //location.href = code.data;
                document.getElementById('edit_area').innerHTML = code.data;
                isReadQR = true;
                
                }
            }
            requestAnimationFrame(tick);
            }
        });
    </script>

### 発生している問題・エラーメッセージ

しかしながら、読み取り後もカメラを終了することができません。
参考にしたサイトでは、QRコードに含まれるURLにジャンプしているため、
カメラを終了させる必要がないのだと思われます。


### 試したこと

videoエレメントやcanvasを非表示にするコードを各所に差し込んでみたのですが、
読み取り後でもカメラが終了しない、またはそもそもカメラが起動しない、のいずれかで期待通りの挙動になりませんでした。

私の勉強不足によるところではありますが、ご教授いただければ幸いです。

Comments

[NKTIDKSG]

>videoエレメントやcanvasを非表示にするコードを各所に差し込んでみたのですが、
>読み取り後でもカメラが終了しない、またはそもそもカメラが起動しない、のいずれかで期待通りの挙動になりませんでした。

試したコードを提示してください。

Answer 1

QRコードの読み取りが完了した後に、「追加箇所」のコードを挿入することで期待通りの挙動となりました。

                if (code && !isReadQR) {
                //location.href = code.data;
                document.getElementById('edit_area').innerHTML = code.data;
                isReadQR = true;
                
                //追加箇所
                stopStream(); // カメラを停止する
                canvasElement.hidden = true; // canvas を非表示にする

                }