vue-qrcode-reader

A Vue.js component, accessing the device camera and allowing users to read QR codes, within the browser.

Demos

Browser support


No	Yes	Yes	Yes	11+

Note that Chrome requires HTTPS or localhost. More details here.

Usage

`@decode` and `@locate`

Once a stream from the users camera is loaded, it is displayed and continuously scanned for QR codes. Results are indicated by the decode event.

decode only carries the string, encoded by the QR code. If you also want to track the QR codes position, listen for the locate event. Its payload is an array of coordinates (for example { x: 278, y: 346 }) of the QR codes corners, relative to the components position and size. The event is emitted whenever the coordinates change or no QR code is detected anymore, resulting in an empty array payload.

<qrcode-reader @decode="onDecode" @locate="onLocate"></qrcode-reader>

methods: {
  onDecode (content) {
    // ...
  },

  onLocate (points) {
    // ...
  }
}

`@init`

It might take a while before the component is ready and the scanning process starts. The user has to be asked for camera access permission first and the camera stream has to be loaded.

If you want to show a loading indicator, you can listen for the init event. It's emitted as soon as the component is mounted and carries a promise which resolves when everything is ready. The promise is rejected if initialization fails. This can have a couple of reasons.

👉 In Chrome you can't prompt users for permissions a second time. Once denied, users can only manually grant them. Make sure your users understand why you need access to their camera before you mount this component. Otherwise they might panic and deny and then get frustrated because they don't know how to change their decision.

<qrcode-reader @init="onInit"></qrcode-reader>

methods: {
  async onInit (promise) {
    // show loading indicator

    try {
      await promise

      // successfully initialized
    } catch (error) {
      if (error.name === 'NotAllowedError') {
        // user denied camera access permisson
      } else if (error.name === 'NotFoundError') {
        // no suitable camera device installed
      } else if (error.name === 'NotSupportedError') {
        // page is not served over HTTPS (or localhost)
      } else if (error.name === 'NotReadableError') {
        // maybe camera is already in use
      } else if (error.name === 'OverconstrainedError') {
        // passed constraints don't match any camera. Did you requested the front camera although there is none?
      } else {
        // browser is probably lacking features (WebRTC, Canvas)
      }
    } finally {
      // hide loading indicator
    }
  }
}

Distributed content

Distributed content will overlay the camera stream, wrapped in a position: absolute container. You can use this for example to highlight the detected position of QR codes.

<qrcode-reader>
  <b>stuff here overlays the camera stream</b>
</qrcode-reader>

`:paused`

With the paused prop you can prevent further decode and locate propagation. Useful for example if you're only interested in the first result. This will also freeze the camera stream.

<qrcode-reader @decode="onDecode" :paused="paused"></qrcode-reader>

data () {
  return {
    paused: false
  }
},

methods: {
  onDecode (content) {
    this.paused = true
    // ...
  }
}

`:video-constraints`

This component uses getUserMedia to request camera streams. This method accepts a constraints object to configure for example if front or rear camera should be accessed. This is passed by default:

{
  audio: false, // don't request microphone access
  video: {
    facingMode: { ideal: 'environment' }, // use rear camera if available
    width: { min: 360, ideal: 1280, max: 1920 }, // constrain video width resolution
    height: { min: 240, ideal: 720, max: 1080 } // constrain video height resolution
  }
}

You can change the video part using the video-constraints prop. Note that you only have to pass properties you want to override. If you want to use the front camera for example and change nothing else, pass this:

<qrcode-reader :video-constraints="{ facingMode: 'user' }"></qrcode-reader>

👉 If you change this property after initialization, a new camera stream will be requested and the init event will be emitted again.

Installation

yarn add vue-qrcode-reader

or using NPM:

npm install --save vue-qrcode-reader

Default import

import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'

Vue.use(VueQrcodeReader)

import Vue from 'vue'
import { QrcodeReader } from 'vue-qrcode-reader'

Vue.component('my-component', {
  components: { QrcodeReader },

  // ...
)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Distribution import

import 'vue-qrcode-reader/dist/vue-qrcode-reader.css'
import VueQrcodeReader from 'vue-qrcode-reader/dist/vue-qrcode-reader.common'

Vue.use(VueQrcodeReader)

import 'vue-qrcode-reader/dist/vue-qrcode-reader.css'
import { QrcodeReader } from 'vue-qrcode-reader/dist/vue-qrcode-reader.common'

Vue.component('my-component', {
  components: { QrcodeReader },

  // ...
)

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

<link rel="stylesheet" href="vue-qrcode-reader/dist/vue-qrcode-reader.css"/>

<script src="vue.js"></script>
<script src="vue-qrcode-reader/dist/vue-qrcode-reader.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Vue.use(VueQrcodeReader)

Vue.component('my-component', {
  components: {
    'qrcode-reader': VueQrcodeReader.QrcodeReader
  },

  // ...
)

Source import

import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader/src'

Vue.use(VueQrcodeReader)

import Vue from 'vue'
import { QrcodeReader } from 'vue-qrcode-reader/src'

Vue.component('my-component', {
  components: { QrcodeReader },

  // ...
)

⚠️ You need to configure your bundler to compile .vue files. More info in the official documentation.

License

MIT

chameleonbr/vue-qrcode-reader