ブラウザでQRコードを読めるようにした際のメモ

サマリ

先日作成したwebcamの動画ストリーミングアプリにQRコードの読み取り機能を設けました。

成果物

こちらにアクセスするだけで使えます。ソースコードもOSSでどうぞ。

使い方については、前回の記事を参照してください。
カメラが起動したらQRコードが大きく映るようにカメラ前においてください。無事に読み取りができれば、→側のテキスト領域に読み込んだデータが追記されていきます。

SWのポイント

QRコード読みとりのライブラリ

こちらの記事を参考にさせていただき、モダンな記載になっていて、その中でもメジャーなjsQR(@cozmo)を選択してみました。結果的に、すごい簡単に使えて最＆高です。どれくらい簡単か↓

index.html

  <!-- QR decoding -->
  <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>

index.js

// imageData is data written in a canvas
const code = jsQR( imageData.data, imageData.width, imageData.height, {
  inversionAttempts: "dontInvert",
} );
console.log( code.data );

嘘だろっていうくらい簡単にデコードできました。とりあえず300msecくらい毎のデコードでいいかなと思って設定していますが、100msec毎でも問題なく動いていたので、パフォーマンス上げたい方は変更してもらえますと幸いです。
なお、カメラのピントを合わせることが出来なかったり、たくさんQRコードが存在するとどれを読んでいるのか不明だったりするので、その辺は読み取り方に工夫がいります。

お役立ち: VSCode LiveServerのHTTPS対応

今回の実装をするにあたり、超絶便利なVSCode LiveServerはデフォルト設定から変更しています。ローカルのPC環境でiPhoneからもLiveServerにアクセスしてほしいのですが、カメラを使用するには、localhostかhttpsでないといけないので、そのあたりの設定を変更しています。やるべきことは下記の2点です。

VSCode LiveServerのHTTPS化

こちらの記事にばっちり手順が書いてあります。Windowsですとopensslをインストールする必要があるので、そちらは事前にやっておきましょう。opensslがあれば、たった1行でオレオレ証明書cert.pem, key.pemが作成できます。どこか適当なフォルダに配置しパスをLiveServerのsettingに書いておきましょう。

Serverへのアクセス先をローカルホストから変更

外部のスマホからアクセスしたいので、こちらもLiveServerの設定からIPアドレスを変更します。具体的には下記の設定に、自分のPCのIPアドレスを設定します。Windowsであれば、cmdからipconfigして取得してください。

iOS側で確認

PCとiPhoneなどが同一のネットワークにつながっていれば、iPhoneのSafariから<IP Address>:5500にアクセスするとスマホ側からもLiveServer機能が使えるはずです。ちゃんとコード編集すると自動リロードしてくれます。。。が、コードの編集が反映されていない時が多いので、その場合はSafariの設定からキャッシュの削除をしてみてください。その点は面倒ですね。

以上ですが、LiveServerの便利さを伝えたかっただけの記事です。失礼しました。