WebアプリでQRコードを読み取り
WebアプリでQRコードを読み取るのに最適なjsライブラリにZXingがあります。
ZXingを使えば、PCやスマホのカメラからQRコードを読み取らせるといったことができるようになります。
ZXingのインストール
ZXingのインストールコマンドは下記です。
npm i @zxing/library --save // もしくは yarn add @zxing/library
ZXingの使い方
QRコードの値を読み取るコードは下のように書きます。
import * as ZXing from '@zxing/library'
const codeReader = new ZXing.BrowserQRCodeReader()
codeReader.decodeFromInputVideoDevice(undefined, 'video')
.then(result => {
//ここに処理を書く
console.log(result.text)
})
.catch(err => {
console.error(err)
})decodeFromInputVideoDeviceメソッドは、第一引数に使用するカメラのデバイスidを指定しますが、undefinedを渡すと自動で利用できるカメラを選択してくれます。
また、htmlに下のvideoタグを埋め込みます。
<video id="video" width="300" height="200"></video>
このvideoタグのidを、第二引数に渡します。
videoタグにはカメラからの映像がプレビューされます。
QRコードが読み込まれると、result.textに読み取った内容が入ってくるので、thenの中でこれを使って処理を書くようにします。
ZXingの詳しい仕様については、下のドキュメントを参照してください。割と詳しく書かれています。
GitHub - zxing-js/library: Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem.
Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem. - zxing-js/library
github.com
ZXingでQRを読み取る際の注意点
ZXingを使ったQRコードの読み取り感度はなかなか優れていて、明るい場所であれば高速で読み取りが完了します。
ただ、あまり照明のない薄暗い場所などでは読み取り感度が落ちてしまうため、実用の際は使用する周りの環境（特に明るさ）に注意しておく必要があります。
使用した感じでは、普通のオフィスレベルの照明があれば問題なく動いてくれる感じでした。
コメント