近年QRコードはだいぶ広まってきました。
URLを筆頭に長い文字や数字を打ち込むのが面倒なときの入力補助ツールになっています。
そこで今回はブラウザからカメラを起動させて、QRコードから値を取得してみたいと思います。
早速サンプルです。
以下のボタンを押してQRコードを撮影してみてください。（カメラが対応しないブラウザはファイルアップロードになってしまいます）
あなたが読み込んだQRコードには
「ここにQRコードで読み込まれた文字列を表示」
という情報がありました。
上記にQRコードが持っている文字情報が表示されたら成功です。
このサンプルはこちらのライブラリを使っています。
https://github.com/sitepoint-editors/jsqrcode
まず、上記のライブラリからqr_packed.jsをDLするかして、JSを読み込んでください。
その後のJSはこちら
<script>
function readQRCamera(node) {
var reader = new FileReader();
reader.onload = function() {
node.value = "";
qrcode.callback = function(res) {
if(res instanceof Error) {
alert("QRコードが見つかりませんでした。写真を取り直してください。");
} else {
document.getElementById('demo_text').textContent = res;
}
};
qrcode.decode(reader.result);
};
reader.readAsDataURL(node.files[0]);
}
</script>
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>
