我要评论实现原理：调取手机摄像头扫一扫功能实现
注：调取手机摄像头需要再https协议下才可以，有的项目启动配置https:true可以实现启动的项目协议为https且可以访问，有的还是需要证书才能访问
实现
1、下载html5-qrcode
npm i html5-qrcode
2、使用
<template>
<div class="container" v-show="isshow">
<div id="reader"></div>
</div>
</template>
<script setup>
import { reactive, onmounted, onunmounted, ref } from 'vue'
import { showtoast } from 'vant';
import { html5qrcode } from 'html5-qrcode'
let html5qrcode = ref(null)
onmounted(() => {
getcameras()
})
const onsearchorder = () => {
console.log('在运运单')
router.push('order')
}
onunmounted(() => {
stop()
})
const getcameras = () => {
html5qrcode.getcameras()
.then((devices) => {
if (devices && devices.length) {
isshow.value = true
html5qrcode = new html5qrcode('reader')
// start开始扫描
start()
}
})
.catch((err) => {
// handle err
console.log('获取设备信息失败', err) // 获取设备信息失败
showtoast('获取设备信息失败')
})
}
const start = () => {
html5qrcode
.start(
{facingmode: "environment" },
{
fps: 20, // 设置每秒多少帧
qrbox: { width: 250, height: 250 } // 设置取景范围
// scannable, rest shaded.
},
(decodedtext, decodedresult) => {
alert('扫码结果' + decodedtext)
},
(errormessage) => {
// parse error, ideally ignore it. for example:
// console.log(`qr code no longer in front of camera.`);
console.log('暂无额扫描结果', errormessage)
}
)
.catch((err) => {
// start failed, handle it. for example,
console.log(`unable to start scanning, error: ${err}`)
})
}
const stop = () => {
if (devicesinfo.value) {
html5qrcode
.stop()
.then((ignore) => {
// qr code scanning is stopped.
console.log('qr code scanning stopped.', ignore)
})
.catch((err) => {
// stop failed, handle it.
console.log('unable to stop scanning.', err)
})
}
}
</script>
<style lang="scss" scoped>
.container {
position: relative;
top: 0px;
left: 0px;
height: 100vh;
width: 100%;
background: rgba($color: #000000, $alpha: 0.48);
z-index: 999;
}
#reader {
top: 50%;
left: 0;
transform: translatey(-50%);
}
</style>
到此这篇关于html5项目实现扫描二维码功能的文章就介绍到这了,更多相关html5扫描二维码内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论