概要
Webサイトからスマホのカメラを起動し、QRコードを読み取らせていろいろやる、という案件がいくつかありました。
スチルカメラ（静止画）の場合、<input type=”file”> を用意しておけば、ユーザーがカメラを選択してQRコードを撮影できます。Webサイトでやるのは、撮影された静止画からQRコードを取得するだけです。
画像からQRコードを取得するには、jsQRなどのライブラリが公開されているので、それを使用すれば簡単です。
静止画を使ったQRコードの読み取りの場合、撮影する瞬間にぶれてしまい、読み取り精度が落ちてしまうという問題点があります。QRコードの読み取りに失敗した場合、再度カメラを起動してといった煩わしさもあります。
そこで、ビデオカメラ（動画）でQRコードを読み取れるようにします。ビデオカメラの画像を定期的にキャプチャし、QRコードのライブラリにキャプチャ画像を渡せば、より確実にQRコードを読み取れるようになります。一般的なQRコード読み取りアプリと同じ動作をするイメージです。
動作条件
Androidでは、よほど古いバージョンでなければ問題ないと思います。使用するブラウザによっては動作しないこともあるかもしれません。
iOSの場合、iOS11以上が必須条件です。iOS10以下はブラウザからビデオカメラにアクセスできません。また、動作するブラウザはSafariだけです。
iOS14の場合は検証していませんが、おそらく動くと思います。ただし、デフォルトのブラウザをSafariから別のブラウザに変更した場合、動作は保証できません。
Webサイトからビデオカメラにアクセスするには、Webサイトがhttps://になっている必要があります。http://の場合は動作しません。
サンプル
以下のURLにQRコードを読み取るサンプルWebサイトを置いています。スマートフォンでアクセスして、動作を確認できます（カメラ付きのパソコンでも動作できます）。
https://frostmoon.net/qr-test/
必要なライブラリ
以下のライブラリを使用しています。
jsQR
https://github.com/cozmo/jsQR
ソースコード
上記のサンプルWebサイトで使用しているソースコードを、以下からダウンロードできます。
WEBサイトからQRコードを読み取るサンプル バージョン2.0.0公開日 2020/09/22 ファイルサイズ 30.85 KB
ダウンロード