vue实现h5扫码的代码示例
更新时间：2024年01月04日 08:29:56 作者：举半个栗子
html5-qrcode是一个基于JavaScript 轻量级和跨平台的扫码插件,允许用户使用摄像头扫描二维码,并且解析为文本或者url,本文给大家介绍了vue实现h5扫码,需要的朋友可以参考下
插件 html5-qrcode npm地址
html5-qrcode是一个基于JavaScript 轻量级和跨平台的扫码插件。允许用户使用摄像头扫描二维码，并且解析为文本或者url。
- 支持扫描不同类型的二维码和条形码
- 支持不同的平台，Android、IOS、Windows、MacOs或者linux
- 支持不同的浏览器，Chrome、Safari、Edge等
- 支持扫描本地文件
访问摄像头涉及用户隐私，所以访问环境必须在https下
实现（该代码环境基于vue3）
- 安装依赖
npm install html5-qrcode
- 引入
import { Html5Qrcode } from 'html5-qrcode'
- 使用
setup数据
const state = reactive({
html5QrCode: null,
fileList:[]
})
- 判断当前环境下是否有摄像头
Html5Qrcode.getCameras()
.then(devices =>{
if(devices &&devices.length){
// 当前环境下能识别出摄像头，并且摄像头的数据可能不止一个
state.html5QrCode = new Html5Qrcode('reader') // reader 放置扫码功能的元素ID
startInit()
}
})
.catch(() =>{
// 摄像头无访问权限
})
- 扫码
const startInit = () =>{
state.html5QrCode.start(
// environment后置摄像头 user前置摄像头
{facingMode:'environment'},
{
fps:1, // 可选，每n秒帧扫描一次
qrbox:{
width:250,
height:250
} // 扫描的 UI框
},
(decodedText, decodedResult) =>{
// 扫描结果
}
)
.catch((err) =>{
// 扫码错误信息
let message = ''
if(typeof err == 'string'){
message = '识别失败'
}else {
if (err.name == 'NotAllowedError') {
message = '您需要授予相机访问权限！'
}
if (err.name == 'NotFoundError') {
message = '这个设备上没有摄像头！'
}
if (err.name == 'NotSupportedError') {
message = '摄像头访问只支持在安全的上下文中，如https或localhost！'
}
if (err.name == 'NotReadableError') {
message = '相机被占用！'
}
if (err.name == 'OverconstrainedError') {
message = '安装摄像头不合适！'
}
if (err.name == 'StreamApiNotSupportedError') {
message = '此浏览器不支持流API！'
}
}
})
}
- 识别本地文件
const dealSelectFiles = () => {
try {
window.qrcode.callback = (result) => {
// 识别成功
}
// get select files.
let file = state.fileList[0].file
var reader = new FileReader()
reader.onload = (function () {
return function (e) {
window.qrcode.decode(e.target.result)
}
})(file)
reader.readAsDataURL(file)
} catch (error) {
// 识别失败
}
}
- 在离开页面时要停止扫码功能
onUnmounted(() => {
//扫描设备是否在运行
if (state.html5QrCode.isScanning) {
stop()
}
})
完整代码
<template>
<div class="scanCode">
<div class="container">
<div class="qrcode">
<div id="reader"></div>
</div>
</div>
<div class="btn">
<div class="left-back">
<van-icon name="arrow-left" @click="clickBack" />
</div>
<div class="right-file">
<van-uploader v-model="fileList" :preview-image="false" :after-read="dealSelectFiles">
<van-icon name="photo-o" />
</van-uploader>
</div>
</div>
</div>
</template>
<script>
import { reactive } from 'vue'
import { defineComponent, toRefs, onMounted, onUnmounted } from 'vue'
import { Html5Qrcode } from 'html5-qrcode'
import { showToast, } from 'vant'
export default defineComponent({
setup() {
const state = reactive({
html5QrCode: null,
fileList: [],
})
const start = () => {
state.html5QrCode
.start(
{ facingMode: 'environment' },
{
fps: 1,
qrbox: { width: 250, height: 250 }
},
(decodedText, decodedResult) => {
console.log('decodedText', decodedText)
console.log('decodedResult', decodedResult)
}
)
.catch((err) => {
console.log('扫码错误信息', err)
let message = ''
// 错误信息处理仅供参考，具体描述自定义
if (typeof err == 'string') {
message = '二维码识别失败！'
} else {
if (err.name == 'NotAllowedError') {
message = '您需要授予相机访问权限！'
}
if (err.name == 'NotFoundError') {
message = '这个设备上没有摄像头！'
}
if (err.name == 'NotSupportedError') {
message = '摄像头访问只支持在安全的上下文中，如https或localhost！'
}
if (err.name == 'NotReadableError') {
message = '相机被占用！'
}
if (err.name == 'OverconstrainedError') {
message = '安装摄像头不合适！'
}
if (err.name == 'StreamApiNotSupportedError') {
message = '此浏览器不支持流API！'
}
}
})
}
const getCameras = () => {
Html5Qrcode.getCameras()
.then((devices) => {
if (devices && devices.length) {
state.html5QrCode = new Html5Qrcode('reader')
start()
}
})
.catch((err) => {
showToast({
message: '摄像头无访问权限！',
duration: 3000
})
}
const stop = () => {
state.html5QrCode
.stop()
.then((ignore) => {
console.log('停止扫码', ignore)
})
.catch((err) => {
console.log(err)
showToast('停止扫码失败')
})
}
const dealSelectFiles = () => {
try {
window.qrcode.callback = (result) => {
showToast('成功了，结果是：' + result)
}
// get select files.
let file = state.fileList[0].file
var reader = new FileReader()
reader.onload = (function () {
return function (e) {
window.qrcode.decode(e.target.result)
}
})(file)
reader.readAsDataURL(file)
} catch (error) {
showToast({
message: '图片识别失败！',
duration: 3000
})
}
}
onMounted(() => {
getCameras()
})
onUnmounted(() => {
//扫描设备是否在运行
if (state.html5QrCode.isScanning) {
stop()
}
})
return {
...toRefs(state),
getCameras,
dealSelectFiles,
}
}
})
</script>
<style lang="scss" scoped>
.scanCode {
height: 100vh;
display: flex;
flex-direction: column;
background: rgba(0, 0, 0);
}
.container {
height: 90vh;
position: relative;
width: 100%;
}
.qrcode {
height: 100%;
}
#reader {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.btn {
flex: 1;
padding: 3vw;
display: flex;
justify-content: space-around;
color: #fff;
font-size: 8vw;
align-items: flex-start;
}
</style>
最终效果
以上就是vue实现h5扫码的代码示例的详细内容，更多关于vue实现h5扫码的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了关于dev-tool安装方法(手动安装版),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue路由传参使用query传参页面刷新数据丢失问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了element-ui下拉菜单组件Dropdown,本文详细给大家介绍了我遇到的一个最大的坑，通过结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
前几天做到一个关于图片上传功能,下面这篇文章主要给大家介绍了关于vue使用element实现上传图片和修改图片功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了vue+elementUI实现表格关键字筛选高亮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了VUE+Canvas实现财神爷接元宝小游戏,需要的朋友可以参考下本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-04-04
下面小编就为大家分享一篇vue.js移动数组位置,同时更新视图的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue的filters(本地)或filter(全局)过滤常用数据类型解析
这篇文章主要介绍了Vue的filters(本地)或filter(全局)过滤常用数据类型，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue3应用elementPlus table并滚动显示问题
这篇文章主要介绍了vue3应用elementPlus table并滚动显示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家介绍了Vue之事件处理和事件修饰符，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>2021-11-11
最新评论