Androidのwebviewでカメラ画面が表示されない件

実現したいこと

前提

AndroidのwebviewでQR読み込みのため、カメラ機能を実装。(Android12、13)
・アプリ起動後、初回は正常にカメラが動作するが、一度前画面に戻り、再度「カメラ起動」ボタンを押下し、カメラ画面を表示させようとすると、カメラが表示されない
・前画面に戻ってもカメラが起動されたままになっている可能性あり
・iphoneは問題なし

該当のソースコード

HTML

1<a onclick="display_switch()"><div id="b1">カメラ起動</div></a> 2 3<div id="qrcamera"> 4<p>二次元コードをかざしてください</p> 5<canvas id="canvas" hidden></canvas> 6</div>

javascript

1//ボタン押下で表示非表示の切り替え2function display_switch(){3 navigator.mediaDevices.getUserMedia(cameraSetting).then(function(stream) {4 document.getElementById('qrcamera').style.display = "block";5 6 video.srcObject = stream;7 video.setAttribute("playsinline", true);8 video.play();9 video.onloadedmetadata = () => {10 requestAnimationFrame(tick);11 }12 })13 .catch((err) => {14 alert('カメラの使用が許可されていません。');15 });;16}17 18function tick() {19 canvasElement.hidden = false;20 canvasElement.height = video.videoHeight;21 canvasElement.width = video.videoWidth;22 canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);23 const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);24 const code = jsQR(imageData.data, imageData.width, imageData.height, {25 inversionAttempts: "dontInvert",26 });27 if (!code) {28 requestAnimationFrame(tick);29 return;30 }31 const data = JSON.parse(code.data);32 // リクエストパラメータ33 const params = {34 code : data.code,35 };36 $.ajax({37 url: "***",38 contentType: 'application/json; charset=utf-8',39 type: "POST",40 data: JSON.stringify(params),41 dataType: 'json'42 }).done(function (data) {43 alert("OK");44 }).fail(function (data) {45 alert('NG');46 }).always(function (data) {47 //要素の表示非表示切り替え48 document.getElementById('qrcamera').style.display = "none";49 });50 }51}

試したこと

カメラ起動前にカメラを止める処理を追加してみましたが改善しませんでした。

javascript

1//起動処理の前に停止2stop_camera();3 4+// カメラ停止5function stop_camera() {6 if (video.srcObject) {7 video.srcObject.getTracks().forEach(track => track.stop);8 }9}

コメントを投稿

0 コメント