You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Chrome requires [HTTPS or localhost](https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins) (see [#38](../../issues/38) for help)
55
-
* Safari also requires HTTPS **even** on localhost (see [#48](../../issues/48))
56
-
* on iOS it **only** works with Safari. Chrome or Firefox for iOS are not supported (see [#29](../../issues/29))
57
-
* more details on [Caniuse](https://caniuse.com/#feat=stream)
|`:camera`|`Boolean`, `Object`| see [Usage](#camera-prop)|
66
-
67
-
| Event | Payload Type |
68
-
|-----------|-------------------|
69
-
|`@decode`|`String`|
70
-
|`@detect`|`Promise<Object>`|
71
-
|`@init`|`Promise<void>`|
72
-
73
-
# Usage
74
-
75
-
### `decode` event
76
-
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. This also accounts for decoded images drag-and-dropped in the area the component occupies.
42
+
You also get simple elegant APIs:
77
43
78
44
```html
79
-
<qrcode-reader@decode="onDecode"></qrcode-reader>
45
+
<qrcode-stream@decode="onDecode"></qrcode-stream>
80
46
```
81
-
```javascript
47
+
```js
82
48
methods: {
83
49
onDecode (decodedString) {
84
50
// ...
85
51
}
86
52
}
87
53
```
88
54
89
-
> You might notice that when you scan the same QR code multiple times in a row, `decode` is still only emitted once. When you hold a QR code in the camera, frames are actually decoded multiple times a second but you don't want to be flooded with `decode` events that often. That's why the last decoded QR code is always cached and only new results are propagated. However, you can clear this internal cache by setting the `paused` prop to true.
90
-
91
-
### `detect` event
92
-
The `detect` event is quite similar to `decode` but it provides more details. `decode` only gives you the string encoded by QR codes. `detect` additionally
93
-
94
-
* tells you where results came from (i.e. a camera stream, a drag-and-dropped file or url)
95
-
* gives you the unprocessed raw image data
96
-
* the coordinates of the QR code in the image/camera frame
97
-
98
-
In case of errors `decode` also silently fails. For example when a non-image file is drag-and-dropped.
99
-
100
-
```html
101
-
<qrcode-reader@detect="onDetect"></qrcode-reader>
102
-
```
103
-
```javascript
104
-
methods: {
105
-
asynconDetect (promise) {
106
-
try {
107
-
const {
108
-
source, // 'file', 'url' or 'stream'
109
-
imageData, // raw image data of image/frame
110
-
content, // decoded String
111
-
location // QR code coordinates
112
-
} =await promise
113
-
114
-
// ...
115
-
} catch (error) {
116
-
if (error.name==='DropImageFetchError') {
117
-
// drag-and-dropped URL (probably just an <img> element) from different
118
-
// domain without CORS header caused same-origin-policy violation
119
-
} elseif (error.name==='DropImageDecodeError') {
120
-
// drag-and-dropped file is not of type image and can't be decoded
121
-
} else {
122
-
// idk, open an issue ¯\_(ツ)_/¯
123
-
}
124
-
}
125
-
}
126
-
}
127
-
```
128
-
129
-
### `init` event
130
-
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.
131
-
132
-
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](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Exceptions).
133
-
134
-
> 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.
135
-
136
-
```html
137
-
<qrcode-reader@init="onInit"></qrcode-reader>
138
-
```
139
-
```javascript
140
-
methods: {
141
-
asynconInit (promise) {
142
-
// show loading indicator
143
-
144
-
try {
145
-
await promise
146
-
147
-
// successfully initialized
148
-
} catch (error) {
149
-
if (error.name==='NotAllowedError') {
150
-
// user denied camera access permisson
151
-
} elseif (error.name==='NotFoundError') {
152
-
// no suitable camera device installed
153
-
} elseif (error.name==='NotSupportedError') {
154
-
// page is not served over HTTPS (or localhost)
155
-
} elseif (error.name==='NotReadableError') {
156
-
// maybe camera is already in use
157
-
} elseif (error.name==='OverconstrainedError') {
158
-
// passed constraints don't match any camera.
159
-
// Did you requested the front camera although there is none?
160
-
} else {
161
-
// browser might be lacking features (WebRTC, ...)
162
-
}
163
-
} finally {
164
-
// hide loading indicator
165
-
}
166
-
}
167
-
}
168
-
```
169
-
### `track` prop
170
-
171
-
By default detected QR codes are visually highlighted. A transparent canvas overlays the camera stream. When a QR code is detected, its location is painted to the canvas. You can enable/disable this feature by passing `true`/`false` via the `track` prop. If tracking is disabled the camera stream is scanned much less frequently. So if you encounter performance problems on your target device, this might help.
You can also pass a function with `track` to customize the way the location is painted. This function is called to produce each frame. It receives the location object as the first argument and a `CanvasRenderingContext2D` instance as the second argument.
174
-
175
-
> Avoid access to reactive properties in this function (like stuff in `data`, `computed` or your Vuex store). The function is called several times a second and might cause memory leaks. If you want to be safe don't access `this` at all.
176
-
177
-
Say you want to paint in a different color that better fits your overall page theme.
Distributed content will overlay the camera stream, wrapped in a `position: absolute` container.
213
-
214
-
```html
215
-
<qrcode-reader>
216
-
<b>stuff here overlays the camera stream</b>
217
-
</qrcode-reader>
218
-
```
219
-
220
-
### `paused` prop
221
-
222
-
With the `paused` prop you can prevent further `decode` propagation. Functions passed via `track` are also stopped being called. Useful for example if you want to validate results one at a time.
223
-
224
-
> When the component is paused the camera stream freezes but is actually still running in the background. The browser will tell you that the camera is still in use. If you want to kill the stream completely you can pass `false` to the `camera` prop.
With the `camera` prop you can filter the set of cameras installed on a client device. For example, if you want to access the front camera instead of the rear camera, pass this:
This component uses [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) to request camera streams. This method accepts [a constraints object](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#Properties_of_video_tracks). By default this component passes this:
65
+
#### `QrcodeStream`
253
66
254
-
```javascript
255
-
{
256
-
audio:false, // don't request microphone access
257
-
video: {
258
-
facingMode: { ideal:'environment' }, // use rear camera if available
This component fundamentally depends on the [Stream API](https://caniuse.com/#feat=stream).
264
68
265
-
This `video` part in this object is essentially what you can change using the `camera` prop. Note that you only have to pass properties you want to override. All the other default properties on the first depth level are preserved. Here are a few examples:
266
-
267
-
`camera="{ facingMode: 'user' }"`: the `facingMode` property is passed and is the only property that changes. `width` and `height` are still the default value.
`camera="false"`: overrides ALL default properties. No camera can match those constraints so no camera is request in the first place. You can use this to turn of the camera at runtime.
73
+
* Chrome requires [HTTPS or localhost](https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins) (see [#38](../../issues/38) for help)
74
+
* Safari also requires HTTPS **even** on localhost (see [#48](../../issues/48))
75
+
* on iOS it **only** works with Safari. Chrome or Firefox for iOS are not supported (see [#29](../../issues/29))
270
76
271
-
`camera="{}"`: since an empty object does not contain properties that could override something, this is just like falling back to the default. The same as not using the `camera` prop at all or passing `undefined`/`null`.
77
+
#### `QrcodeDropZone` and `QrcodeCapture`
272
78
273
-
`camera="true"`: overrides ALL default properties. You will accept any camera type there is. Not recommended though as iOS seems to have trouble when the `height` and `width` constraints are missing.
79
+
The newest API these components depend on is the [FileReader API](https://caniuse.com/#feat=filereader).
274
80
275
-
> If you change this property after initialization, a new camera stream has to be requested and the `init` event will be emitted again.
0 commit comments