Html5Qrcode QRコードがiPad縦向きの時だけ読み込めない

実現したいこと

Webサイト(PHP+HTML+jQuery)上で、デバイスのカメラを起動してQRコードを読み込む仕組みを制作しています。

発生している問題・分からないこと

ライブラリはHtml5Qrcodeを使用して、QRコードの読み取りが実現できています。
iPadを縦向け(横1024px)にした時だけ、外カメラが正しく起動するのですが、QRコードが読み取れません。

該当のソースコード

jQuery

1 startButton.addEventListener('click', () => { 2 if (!html5QrCode) { 3 html5QrCode = new Html5Qrcode("qr-reader"); 4 } 5 qrPopup.style.display = 'block'; 6 overlay.style.display = 'block'; 7 8 const qrboxSize = Math.min(250, 250); 9 const facingMode = "environment"; // 外向きカメラを指定 10 const cameraConfig = { 11 facingMode: facingMode, 12 width: 1280, // 解像度の幅を指定 13 height: 720 // 解像度の高さを指定 14 }; 15 16 html5QrCode.start( 17 { facingMode: "environment" }, 18 { 19 fps: 10, 20 qrbox: qrboxSize, 21 aspectRatio: 4 / 3, 22 videoConstraints: cameraConfig 23 }, 24 onScanSuccess 25 ).catch(err => { 26 console.error(`Unable to start QR scanner: ${err}`); 27 }); 28 });

試したこと・調べたこと

上記の詳細・結果

ライブラリはHtml5Qrcodeを使用して、PC上ではQRコードの読み取りが実現できています。

デバイスがiPad(Safari)でも横向きの場合は正しくQRコードが読み取れます。
ただしiPadを縦向け(横1024px)にすると、外カメラが正しく起動するのですが、QRコードが読み取れません。
(PCでChromeのモバイルシミュレーターでも実現できています)

iPadのデフォルトカメラアプリでは縦向けでもQRは読み取れます。

対処法が分かる方がおられましたら、ご教授頂けますでしょうか。

補足

QRコードの向きを変えたり、アップにしたりQRコードを変えたりしましたが、iPad縦向きの時だけQRコードに反応しません。

iPad横向きで、カメラを起動するとQRコードは回転しても読み取れます。
Webシステムではなく、デフォルトカメラアプリの場合はiPadが縦向きでもQRコードが読み取れます。
iPhoneの場合は縦・横どちら向きでも読み取れます。

jQuery v3.4.1
Html5Qrcode Ver2.3.8

iPad Pro 12.9inch 第6世代 (iOS17.4.1)

コメントを投稿

0 コメント