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

2019年8月14日

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

vue-qrcode-readerとは

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

 

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

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

 

環境

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

vue.js 2.6.10
vue-qrcode-reade 2.0.3

 

ライブラリの取得

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

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

 

導入手順

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

 

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

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

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

import QrcodeStream from 'vue-qrcode-reader'

(2)WEBページの場合

const QrcodeStream = window.VueQrcodeReader.QrcodeStream;

 

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

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」で試す

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , ,