/vue.js

vue-qrcode-reader quick start and take it fullscreen

Using web browser: safari for iOS and chrome for android to decode qrcode.


Installation

repository and documentation

$ yarn add vue-qrcode-reader

You have three types for qrcode, qrcode-stream is means qrcode camera scan, this is what I want, also can drop file qrcode-drop-zone and capture qrcode-capture.

Next, you maybe find the camera resolution is 640x480, and the scanner is same in mobile, so how to solve it? the answer is: you should change global style issue

.qrcode-stream__camera,
.qrcode-stream__pause-frame {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background-size: cover;
    max-width: inherit !important;
    max-height: inherit !important;
}

.qrcode-stream__inner-wrapper {
    position: inherit !important;
    max-width: inherit !important;
    max-height: inherit !important;
    z-index: inherit !important;
}
Yish

Yish

The creator of yish.dev

Read More