赞
踩
npm install html5-qrcode
- <template>
- <view class="container">
- <button class="scan" @click="scanCode">打开相机扫码</button>
- <view class="reader-box" v-if="isScaning">
- <view class="reader" id="reader"></view>
- </view>
- </view>
- </template>
-
- <script>
- import {
- Html5Qrcode
- } from 'html5-qrcode';
- export default {
- data() {
- return {
- html5Qrcode: null,
- isScaning: false,
- }
- },
- methods: {
- startScan() {
- this.isScaning = true;
- Html5Qrcode.getCameras().then(devices => {
- if (devices && devices.length) {
- this.html5Qrcode = new Html5Qrcode('reader');
- this.html5Qrcode.start({
- facingMode: 'environment',
- }, {
- fps: 24,
- qrbox: 280
- }, (decodeText, decodeResult) => {
- console.log(decodeText)
- if (decodeText) {
- this.stopScan();
- this.isScaning = false;
- }
- }, (err) => {
- console.log(err)
- });
- }
- });
- },
- stopScan() {
- this.html5Qrcode.stop();
- },
- scanCode() {
- console.log('helo')
- this.startScan();
- }
- }
- }
- </script>
-
- <style scoped>
- .container{
- height:100%;
- }
- .reader-box {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: rgba(0, 0, 0, 0.5);
- }
-
- .reader {
- width: 540rpx;
- height: 540rpx;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- </style>

uniapp运行到浏览器
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。