HTML5

[HTML5] QRコードリーダーを作成する

今回はHTML5の機能を利用した「QRコードリーダー」を作成します。
以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。

PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。

HTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。

カメラの映像が向かって左側に写り続け、良いタイミングで下にある「シャッター」ボタンをクリックすると、右側に撮影した静止画が表示されます。ボタンをクリックするとシャッター音も再生されます。
続きを読む