vue-qrcode-reader
A Vue.js component, accessing the device camera and allowing users to read QR codes, within the browser.
👉 In Chrome this component only works with HTTPS (or localhost)
Usage
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.
methods: { // ... } { // ... }
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.
👉 Camera access permission can't really be requested a second time. Once denied, it can only be re-granted in the browser settings. So to avoid panic and frustration, make sure your users understand why you need this permisson.
methods: async { // show loading indicator try await promise // successfully initialized catch error if errorname === 'NotAllowedError' // user denied camera access permisson else if errorname === 'NotFoundError' // no suitable camera device installed else if errorname === 'NotSupportedError' // page is not served over HTTPS (or localhost) else // browser is probably lacking features (WebRTC, Canvas) finally // hide loading indicator }
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.
stuff here overlays the camera stream
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.
{ return paused: false } methods: { thispaused = true // ... }
Installation
yarn add vue-qrcode-reader
# or
npm install --save vue-qrcode-reader
It's highly recommended to install webrtc-adapter too (a shim for WebRTC).
yarn add webrtc-adapter
# or
npm install --save webrtc-adapter
Default import
Register component globally:
Vue
Register locally in other components scope:
Vue
⚠️ 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:
Vue
Register locally in other components scope:
Vue
⚠️ You may have to setup your bundler to embed the css file in your page.
Browser
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Register component globally:
Vue
Register locally in other components scope:
Vue
Source import
Register component globally:
Vue
Register locally in other components scope:
Vue
⚠️ You need to configure your bundler to compile .vue
files. More info in the official documentation.
Contributing
All contributions are welcome. If you wish to contribution code:
- Make sure you have editorconfig installed.
- Please follow Vues official style guide.
- Use BEM naming convention for CSS classes.