以前の記事(WebサイトからカメラでQRコードを読み取る(完全版) – Android、iOS対応)を掲載してから時間が経ち、AndroidやiOSもバージョンアップしています。これによって、以前の方法ではビデオカメラから画像を取得できなくなってしまいました。
そこで、前回のソースを見直し、Android9.xやiOS12でもスマホのビデオカメラでQRコードを読み取れるようにしてみました。
一番の変更点は、navigator.getUserMedia() がWeb標準から削除され、非推奨になったことでしょう。代わりに navigator.mediaDevices.getUserMedia() を使用します。
このほかに、iOSでのビデオオプションの指定方法も変更になったようです。また、iOS12ではビデオのサイズが、640×480、1280×720のいずれかとなり、これ以外は指定できなくなったようです。
新しいコードは以下からダウンロードできます。
WEBサイトからQRコードを読み取るサンプル バージョン 1.0.0
公開日: 2019/08/10 ファイル名: qr_read.zip 2.48 KB
ダウンロード
以下のURLで、実際にサンプルを動作させています。
https://frostmoon.net/qr-test/
※実際に動かす場合は、SSLを使えるWebサーバーが必要になります。
※iOS12（iPhone）では最初に「カメラから読み取れない」というアラートが表示されますが、その後カメラの映像が表示されます。
※動作確認環境
・Android 9（Xperia XZ Premium）
・iOS 12.3.1（iPhone XR）
このコードを実行するには、以下のライブラリが必要となります。
LazarSoft/jsqrcode https://github.com/LazarSoft/jsqrcode
実際に試してみようと思う方は、以下のサイトを参考にして、ライブラリを改変する必要があります(または、改変したライブラリをダウンロードします)。
ネイティブアプリ不要！モバイルWebサイトにQRコードリーダーを実装する方法
iOS12対応コード公開、ありがとうございます。
サンプルサイトで、ビデオカメラからQRコードが読み取れないのですが、たまたまでしょうか。
いくつかのQRコードで試してみましたが、読み取れませんでした。。（インプット欄に文字が表示されません。）
通常カメラでは読み取れす。
コードを見ても、きちんとインプット欄に表示されるように思いますが、何か手がかりありますでしょうか。組み込んだ自作サイトでも試しておりますが、なかなか上手く行きません。
確かにカメラ画像は表示されますが、QRコードは読み取れていないようです。
分かりました。返信ありがとうございます。
こちらでもデバックしてみます。
236行目を .fail から .catch に書き直すと動作しました。
コード公開、ありがとうございます。大変参考になりました。サンプルコードの「通常カメラでの読み取りに切り替え」→ 「QRコードを読み取る」でカメラアプリが起動して、QR取得して、ブラウザに戻すことができるのかと思いましたが、うまく動きませんでした（ずっとカメラアプリのまま）。可能でございましたら、こちらの利用方法をご教授いただけるととても参考になります。