Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-qrcode-reader

Package Overview
Dependencies
Maintainers
1
Versions
136
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-qrcode-reader

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

  • 0.4.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
20K
decreased by-15.97%
Maintainers
1
Weekly downloads
 
Created
Source

vue-qrcode-reader

npm npm vue2

A Vue.js component, accessing the device camera and allowing users to read QR-Codes, within the browser. It utilizes WebRTC, which only works in secure context (i.e. HTTPS).

Demo | Source

Usage

As soon as it's mounted, this component will ask the user for permisson to access his device camera (back camera if available). Even if the user granted permission earlier, some time might pass between mounting and the moment the camera stream is loaded. Until then you might want to show a preloader. Just listen to the stream-loaded event.

Once the stream is loaded, it is displayed and continuously scanned for QR-Codes. Results are indicated by the decode event.

<qrcode-reader @decode="onDecode"></qrcode-reader>
methods: {
  onDecode (event) {
    event.content // string of read data or null
    event.location // set of QR-Code module positions or null
  }
}

If the user denies camera access, the permission-deny event is fired. You can't really ask for permissons twice so you should tell the user why you need it.

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-Code modules.

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

With the paused prop you can prevent further decode propagation. Useful for example if you're only interested in the first result.

<qrcode-reader @decode="onDecode" :paused="paused"></qrcode-reader>
data () {
  return {
    paused: false
  }
},

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

There is also a no-support event which is fired when the users browser lacks support for Canvas, WebRTC or if the page is not served over HTTPS. Since iOS 11 release, all major browsers support WebRTC. However, you probably want to install a shim like webrtc-adapter anyway.

Installation

yarn add vue-qrcode-reader
# or
npm install --save vue-qrcode-reader

Default import

Register component globally:

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

Vue.use(VueQrcodeReader)

Register locally in other components scope:

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

Vue.component('my-component', {
  // ...
  components: {
    // ...
    'qrcode-reader': 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

Register component globally:

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

Vue.use(VueQrcodeReader)

Register locally in other components scope:

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: {
    // ...
    'qrcode-reader': 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.

Register component globally:

Vue.use(VueQrcodeReader)

Register locally in other components scope:

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

Source import

Register component globally:

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

Vue.use(VueQrcodeReader)

Register locally in other components scope:

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

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

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


License

MIT

Keywords

FAQs

Package last updated on 18 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc