QRコードリーダーがWEBページで？！「vue-qrcode-reader」の使い方

vue-qrcode-readerとは

vue-qrcode-readerは、QRコードリーダーを実装できるコンポーネントライブラリです。
WEBページ上でカメラを起動してリアルタイムでQRコードを読み取ることができます。

他にもQRコードをアップロードして読み込むコンポーネントが搭載されています。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install vue-qrcode-reader

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-qrcode-reader.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-qrcode-reader.browser.js"></script>

gitリポジトリは以下から取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
QRコードリーダーを実装します。

step
1ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

（1）webpack等の場合 ※モジュール版は未検証です。

import QrcodeStream from 'vue-qrcode-reader'

（2）WEBページの場合

const QrcodeStream = window.VueQrcodeReader.QrcodeStream;

step
2Vueインスタンスを設定

new Vue({
  el: '#app',
  components: {
    'qrcode-stream':QrcodeStream,
  },
  data: {
    result: '',
    error: ''
  },
  methods: {
    onDecode (result) {
      this.result = result
    },
    async onInit (promise) {
      try {
        await promise
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          this.error = "ERROR: you need to grant camera access permisson"
        } else if (error.name === 'NotFoundError') {
          this.error = "ERROR: no camera on this device"
        } else if (error.name === 'NotSupportedError') {
          this.error = "ERROR: secure context required (HTTPS, localhost)"
        } else if (error.name === 'NotReadableError') {
          this.error = "ERROR: is the camera already in use?"
        } else if (error.name === 'OverconstrainedError') {
          this.error = "ERROR: installed cameras are not suitable"
        } else if (error.name === 'StreamApiNotSupportedError') {
          this.error = "ERROR: Stream API is not supported in this browser"
        }
      }
    }
  }
})

step
3テンプレートを準備

<div id="app">
    <p class="error">{{ error }}</p>
    <p class="decode-result">Last result: <b>{{ result }}</b></p>
    <qrcode-stream @decode="onDecode" @init="onInit" />
</div>

サンプル

See the Pen vue-qrcode-reader by カバの樹 (@kabanoki) on CodePen.dark

さいごに

QRコードリーダーをWEBページに実装できるコンポーネントライブラリでした。

これを上手いこと利用すれば、QRコードでの入場管理のアプリとかをPWAで作ることも出来そうですね。

色々できそうでワクワクしてきました。

QRコードを作成するライブラリの記事も書きました。

合わせてご利用ください。

お手軽なQRコード作成ライブラリ「vue-qriously」で試す

今日はこの辺でー