A set of Vue.js components, allowing you to detect and decode QR codes, without leaving the browser.
- :movie_camera: `QrcodeStream` accesses the device camera and continuously scans incoming frames.
- :put_litter_in_its_place: `QrcodeDropZone` renders to an empty region where you can drag-and-drop images to be decoded.
- :open_file_folder: `QrcodeCapture` is a classic file upload field, instantly scanning all files you select.
All components are responsive. Beyond that, close to zero styling. Make them fit your layout. Usage is simple and straight forward:
```html
```
```js
methods: {
onDecode (decodedString) {
// ...
}
}
```
### Screenshots
# Browser support :chart_with_upwards_trend:
#### `QrcodeStream`
This component fundamentally depends on the [Stream API](https://caniuse.com/#feat=stream).
|  |  |  |  |  |
| :---------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: |
| No | Yes | Yes | Yes | 11+ |
- Chrome requires [HTTPS or localhost](https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins) (see _Troubleshooting_ for help)
- Safari also requires HTTPS **even** on localhost (see [#48](../../issues/48))
- on iOS it **really only** works with Safari. It won't work in
- _Chrome for iOS_, _Firefox for iOS_, ... (see [#29](../../issues/29))
- a WebView component of your native iOS App
- web apps added to home screen (see [#76](../../issues/76))
#### `QrcodeDropZone` and `QrcodeCapture`
The newest API these components depend on is the [FileReader API](https://caniuse.com/#feat=filereader).
|  |  |  |  |  |
| :---------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: |
| 10+ | Yes | Yes | Yes | Yes |
- Drag-and-drop is not supported on mobile
- Home screen web apps on iOS prior to 11.3 don't support `QrcodeCapture` (see [this StackOverflow question](https://stackoverflow.com/questions/46228218/how-to-access-camera-on-ios11-home-screen-web-app))
# Troubleshooting :zap:
#### I don't see the camera when using `QrcodeStream`.
- Check if it works on the demo page. Especially the [Decode All](https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html) demo, since it renders error messages. If you see errors, consult the docs to understand their meaning.
- Demo works but not locally: Listen for the `init` event to investigate errors.
- Demo doesn't work: Carefully review the Browser Support section above. Maybe your device is just not supported.
#### I'm running a dev server on localhost. How to test on my mobile device without HTTPS?
- If your setup is Desktop Chrome + Android Chrome, use [Remote Debugging](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/) which allows your Android device to [access your local server as localhost](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server).
- Otherwise use a reverse proxy like [ngrok](https://ngrok.com/) or [serveo](https://serveo.net/) to temporarily make your local server publicly available with HTTPS.
- There are also loads of serverless/static hosting services that have HTTPS enabled by default and where you can deploy your web app for free. For example _GitHub Pages_, _Google Firebase_, _Netlify_, ...
# Installation :package:
```bash
npm install vue-qrcode-reader
```
or with Yarn:
```bash
yarn add vue-qrcode-reader
```
## Default import
You can either import the components independantly and register them in another
components scope:
```javascript
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
Vue.component('my-component', {
components: {
QrcodeStream,
QrcodeDropZone,
QrcodeCapture
},
// ...
))
```
Or alternatively register all of them globally right away:
```javascript
import Vue from "vue";
import VueQrcodeReader from "vue-qrcode-reader";
Vue.use(VueQrcodeReader);
```
**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
## Browser
> All the examples on the demo page utilize [single-file components](https://vuejs.org/v2/guide/single-file-components.html). To use them in your project you need a build tool like webpack. Check out [this fiddle](https://jsfiddle.net/2bfohnax/) for a simpler example you can use right in the browser.
Besides Vue you need to include the following CSS and JS file:
- ``
- ``
The global variable `window.VueQrcodeReader` should now be available.
All components should be automatically registered globally. If not, you can do it like this:
```javascript
Vue.use(VueQrcodeReader);
```
You can also register specific components locally, in one of your components:
```javascript
Vue.component('my-component', {
components: {
'qrcode-stream': VueQrcodeReader.QrcodeStream,
'qrcode-drop-zone': VueQrcodeReader.QrcodeDropZone,
'qrcode-capture': VueQrcodeReader.QrcodeCapture
},
// ...
)
```
# Thanks :pray:
