近年QRコードはだいぶ広まってきました。
URLを筆頭に長い文字や数字を打ち込むのが面倒なときの入力補助ツールになっています。
そこで今回はブラウザからカメラを起動させて、QRコードから値を取得してみたいと思います。
早速サンプルです。
以下のボタンを押してQRコードを撮影してみてください。（カメラが対応しないブラウザはファイルアップロードになってしまいます）
あなたが読み込んだQRコードには
「ここにQRコードで読み込まれた文字列を表示」
という情報がありました。
上記にQRコードが持っている文字情報が表示されたら成功です。
このサンプルはこちらのライブラリを使っています。
https://github.com/sitepoint-editors/jsqrcode
まず、上記のライブラリからqr_packed.jsをDLするかして、JSを読み込んでください。
その後のJSはこちら
HTMLはinputタグを使っているのですが、デザインをいじりにくいのでinputタグを非表示にし、labelタグで押せるようにしています。
<label class=demo_qr_btn>
<img src="https://www.kipure.com/shared/api/etc/qr/?str=https%3A%2F%2Fwww.kipure.com%2F">
カメラを起動して<br>QRコードを撮る
<input type=file
accept="image/*"
capture=environment
onchange="readQRCamera(this);"
tabindex=-1>
</label>
