ブラウザでQRコードを読み取るにはZXingを使う

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の詳しい仕様については、下のドキュメントを参照してください。割と詳しく書かれています。

zxing-js/library
Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem. - zxing-js/library

ZXingでQRを読み取る際の注意点

ZXingを使ったQRコードの読み取り感度はなかなか優れていて、明るい場所であれば高速で読み取りが完了します。

ただ、あまり照明のない薄暗い場所などでは読み取り感度が落ちてしまうため、実用の際は使用する周りの環境(特に明るさ)に注意しておく必要があります。

使用した感じでは、普通のオフィスレベルの照明があれば問題なく動いてくれる感じでした。

コメント