Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
vue-qrcode-reader
Advanced tools
A Vue.js component, accessing the device camera and allowing users to read QR-Codes, within the browser
A Vue.js component, accessing the device camera and allowing users to read QR codes, within the browser.
:point_right: In Chrome this component only works with HTTPS (or localhost)
@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.
:point_right: 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.
<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
// ...
}
}
:constraints
This component uses getUserMedia to request a camera stream. This method accepts a constraints object to configure for example if front or rear camera should be accessed. You can pass this object using the constraints
prop. If you don't pass it, it will default to:
{
audio: false, // don't request audio stream
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
},
}
:point_right: If you change this property after initialization, a new camera stream will be requested and the init
event will be emitted again.
Note that your passed object and the default object are merged two levels deep. That means you only have to pass properties, you want to override. If you want to use the front camera for example, do it like this:
<qrcode-reader :constraints="constraints"></qrcode-reader>
data () {
return {
constraints: {
video: {
facingMode: { ideal: 'user' }
}
}
}
}
BUT if you want to change a single property on the third depth level you have to pass the hole object. For example this:
{
video: {
width: { max: 1440 }
}
}
Would result in this:
{
audio: false,
video: {
facingMode: { ideal: 'environment' },
width: { max: 1440 }, // width property full replaced
height: { min: 240, ideal: 720, max: 1080 }
}
}
So if you want to keep the other properties, pass this:
{
video: {
width: { min: 360, ideal: 1280, max: 1440 }
}
}
yarn add vue-qrcode-reader
# or
npm install --save vue-qrcode-reader
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.
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.
<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
},
// ...
)
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.
FAQs
A set of Vue.js components for detecting and decoding QR codes.
The npm package vue-qrcode-reader receives a total of 15,523 weekly downloads. As such, vue-qrcode-reader popularity was classified as popular.
We found that vue-qrcode-reader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.