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

実現したいこと

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;で入力します。

HTML
1    <div id="edit_area">test</div>
2
3    <script src="jsQR.min.js"></script>      
4    <script>
5        $(window).on('load', function(){
6            const video = document.createElement('video');
7            const canvasElement = document.getElementById('canvas');
8            const canvas = canvasElement.getContext('2d');
9            const loading = document.getElementById('loading');
10            const output = document.getElementById('output');
11            let isReadQR = false;
12            
13            navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
14            .then((stream) => {
15                video.srcObject = stream;
16                video.setAttribute('playsinline', true);
17                video.play();
18                requestAnimationFrame(tick);
19            });
20            
21            function tick() {
22            loading.innerText = 'ロード中...';
23            if (video.readyState === video.HAVE_ENOUGH_DATA) {
24                loading.hidden = true;
25                canvasElement.hidden = false;
26                canvasElement.height = video.videoHeight;
27                canvasElement.width = video.videoWidth;
28                canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
29                var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
30                var code = jsQR(imageData.data, imageData.width, imageData.height, {
31                inversionAttempts: 'dontInvert',
32                });
33                if (code && !isReadQR) {
34                //location.href = code.data;
35                document.getElementById('edit_area').innerHTML = code.data;
36                isReadQR = true;
37                
38                }
39            }
40            requestAnimationFrame(tick);
41            }
42        });
43    </script>
44
45### 発生している問題・エラーメッセージ
46
47しかしながら、読み取り後もカメラを終了することができません。
48参考にしたサイトでは、QRコードに含まれるURLにジャンプしているため、
49カメラを終了させる必要がないのだと思われます。
50
51
52### 試したこと
53
54videoエレメントやcanvasを非表示にするコードを各所に差し込んでみたのですが、
55読み取り後でもカメラが終了しない、またはそもそもカメラが起動しない、のいずれかで期待通りの挙動になりませんでした。
56
57私の勉強不足によるところではありますが、ご教授いただければ幸いです。

NKTIDKSG

2023/05/09 12:24

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

回答1件

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

javascript
1                if (code && !isReadQR) {
2                //location.href = code.data;
3                document.getElementById('edit_area').innerHTML = code.data;
4                isReadQR = true;
5                
6                //追加箇所
7                stopStream(); // カメラを停止する
8                canvasElement.hidden = true; // canvas を非表示にする
9
10                }