WebサイトからスマホのカメラでQRコードを読み取る(iOS13対応)

投稿者: | 2020年4月7日

以前の記事(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
dlダウンロード
ADs
  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)