vue-qrcode-readerとは

「vue-qrcode-reader」でQRコードリーダーをWEBページに実装する

 

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

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

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install vue-qrcode-reader

CDN

<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リポジトリは以下から取得できます。

https://github.com/gruhn/vue-qrcode-reader

導入手順

QRコードリーダーを実装します。

1. ライブラリの取り込み

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

import QrcodeStream from 'vue-qrcode-reader'

(2)WEBページの場合

const QrcodeStream = window.VueQrcodeReader.QrcodeStream;

2.メソッドを設定

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"
        }
      }
    }
  }
})

3. <qrcode-stream>テンプレートを準備

<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コードを作成するライブラリの記事も書きました。

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

「vue-qriously」でQRコードを作成する

 

今日はこの辺でー

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください