以前の記事(WebサイトからスマホのカメラでQRコードを読み取る(iOS12対応))の方法では、AndroidやiOSでうまくQRコードを読み取ることができませんでした。
そこで、ソースを見直し、Android9.xやiOS13でもスマホのビデオカメラでQRコードを読み取れるようにしてみました。
一番の変更点は、navigator.getUserMedia() がWeb標準から削除され、非推奨になったことでしょう。代わりに navigator.mediaDevices.getUserMedia() を使用します。
このほかに、iOSでのビデオオプションの指定方法も変更になったようです。また、iOS12以降ではビデオのサイズが、640×480、1280×720のいずれかとなり、これ以外は指定できなくなったようです。
いかに動作サンプルを置いています。
https://frostmoon.net/qr-test/
※実際に動かす場合は、SSLを使えるWebサーバーが必要になります。
※動作確認環境
・Android 9（Xperia XZ Premium）
・iOS 12.3.1（iPhone XR）
このコードを実行するには、以前のソースコードとは異なるライブラリが必要です。以下のライブラリを使用しています。
jsQR https://github.com/cozmo/jsQR
動作サンプルのソースコードを以下からダウンロードできます。
WEBサイトからQRコードを読み取るサンプル バージョン 2.0.0公開日: 2020/04/07 ファイル名: qr_read2.zip 1.47 KB
ダウンロード