仕事でAndroid端末を触っている際、QRコードを読む必要に迫られる事があります。
そのたびにPlay Storeからアプリをダウンロードしていたのですが、正直面倒くさいなあと思っていました。
ふと、そんなことを思い出し「javascript QRコード 読み取り」で検索したところ、アプリをインストールしないでもQRコードの読み取りができるとのことでした。 便利な世の中ですね。もっと早く調べればよかった。😂
今回はその中でも以下の記事をなぞってQRコードリーダーを作ってみたいと思います。
https://qiita.com/diggy-mo/items/5caf1fcf157fc29e9451
上記の記事ではvueを使ってるようですが、私としてはQRコードが読めれば良いだけなので、余計なコードは省き、必要な処理だけ抜き出します。
<html>
<head>
<script src="./jsQR.js"></script>
</head>
<body>
<div id="result">
<video></video>
</div>
<script>
const constraints = { audio: false, video: { facingMode: 'environment', width: 500, height: 500 }};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
const video = document.querySelector('video');
video.srcObject = stream;
video.play();
const w = constraints.video.width, h = constraints.video.height;
const canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
const context = canvas.getContext('2d');
const timer = setInterval(() => {
context.drawImage(video, 0, 0, w, h);
const imageData = context.getImageData(0, 0, w, h);
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
clearInterval(timer);
document.querySelector('#result').textContent = code.data;
}
}, 500);
}).catch((e) => {
console.log('load error', e);
});
</script>
</body>
</html>
たったこれだけでとりあえずQRコードが読めることが分かりました。すごい。
httpsじゃないとmediaDevicesにアクセスできなかったりしますが、それ以外は特にハマらずに出来ちゃいました。
以下にサンプル置いておきますね。