vue實現(xiàn)h5掃碼的代碼示例
更新時間：2024年01月04日 08:29:56 作者：舉半個栗子
html5-qrcode是一個基于JavaScript?輕量級和跨平臺的掃碼插件,允許用戶使用攝像頭掃描二維碼,并且解析為文本或者url,本文給大家介紹了vue實現(xiàn)h5掃碼,需要的朋友可以參考下
插件 html5-qrcode npm地址
html5-qrcode是一個基于JavaScript 輕量級和跨平臺的掃碼插件。允許用戶使用攝像頭掃描二維碼，并且解析為文本或者url。
- 支持掃描不同類型的二維碼和條形碼
- 支持不同的平臺，Android、IOS、Windows、MacOs或者linux
- 支持不同的瀏覽器，Chrome、Safari、Edge等
- 支持掃描本地文件
訪問攝像頭涉及用戶隱私，所以訪問環(huán)境必須在https下
實現(xiàn)（該代碼環(huán)境基于vue3）
- 安裝依賴
npm install html5-qrcode
- 引入
import { Html5Qrcode } from 'html5-qrcode'
- 使用
setup數(shù)據(jù)
const state = reactive({
html5QrCode: null,
fileList:[]
})
- 判斷當前環(huán)境下是否有攝像頭
Html5Qrcode.getCameras()
.then(devices =>{
if(devices &&devices.length){
// 當前環(huán)境下能識別出攝像頭，并且攝像頭的數(shù)據(jù)可能不止一個
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) =>{
// 掃描結(jié)果
}
)
.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('成功了，結(jié)果是：' + 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實現(xiàn)h5掃碼的代碼示例的詳細內(nèi)容，更多關于vue實現(xiàn)h5掃碼的資料請關注腳本之家其它相關文章！
相關文章
這篇文章介紹了VueX安裝及使用基礎教程，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
本篇文章主要介紹了Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要為大家詳細介紹了vue使用laydate時間插件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
如果data是一個函數(shù)的話,這樣每復用一次組件,就會返回一份新的data,下面這篇文章主要給大家介紹了關于簡單理解Vue的data為啥只能是函數(shù)的相關資料,需要的朋友可以參考下2022-10-10
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細介紹了vue自定義彈框，實現(xiàn)確認框、提示框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue實現(xiàn)虛擬列表，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
本文主要介紹了vuex刷新頁面丟失登錄token信息的解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
Vue循環(huán)組件加validate多表單驗證的實例
今天小編就為大家分享一篇Vue循環(huán)組件加validate多表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在vue中根據(jù)光標的顯示與消失實現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標的顯示與消失實現(xiàn)下拉列表，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09