vue实现相机扫描
Vue 实现相机扫描功能
在 Vue 中实现相机扫描功能通常需要结合浏览器的 WebRTC API 或第三方库来处理摄像头访问和二维码/条形码识别。以下是两种常见实现方式：
使用 HTML5 和 WebRTC 实现基础摄像头访问
安装必要的依赖（如需要二维码识别）：
npm install vue-qrcode-reader基础摄像头组件实现：
<template>
<div>
<video ref="video" autoplay playsinline></video>
<button @click="startCamera">开启摄像头</button>
<button @click="stopCamera">关闭摄像头</button>
</div>
</template>
<script>
export default {
methods: {
async startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment' } // 使用后置摄像头
});
this.$refs.video.srcObject = stream;
} catch (err) {
console.error("摄像头访问错误:", err);
}
},
stopCamera() {
const stream = this.$refs.video.srcObject;
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
}
},
beforeUnmount() {
this.stopCamera();
}
}
</script>使用第三方库实现二维码扫描
以 vue-qrcode-reader 为例：
<template>
<div>
<qrcode-stream @decode="onDecode" @init="onInit" />
<p>扫描结果: {{ result }}</p>
</div>
</template>
<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
components: { QrcodeStream },
data() {
return {
result: ''
}
},
methods: {
onDecode(result) {
this.result = result
},
async onInit(promise) {
try {
await promise
} catch (error) {
if (error.name === 'NotAllowedError') {
alert('用户拒绝了摄像头权限')
} else {
console.error(error)
}
}
}
}
}
</script>移动端优化注意事项
添加全屏样式确保正确显示：
video {
width: 100%;
max-width: 400px;
display: block;
margin: 0 auto;
background: #000;
}处理权限问题：
- 确保网站在 HTTPS 下运行（本地开发除外）
- 添加适当的用户权限请求提示
- 处理用户拒绝权限的情况
高级功能扩展
实现连续扫描：
// 在二维码组件中
<qrcode-stream @decode="onDecode" :paused="paused" />
data() {
return {
paused: false
}
},
methods: {
onDecode(result) {
this.result = result;
this.paused = true;
// 处理结果后恢复扫描
setTimeout(() => this.paused = false, 1000);
}
}添加扫描框UI：
.qr-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 70%;
border: 2px solid #4CAF50;
background: rgba(0,0,0,0.3);
}兼容性处理
检测设备支持情况：
const isSupported = () => {
return 'mediaDevices' in navigator &&
'getUserMedia' in navigator.mediaDevices;
}备用方案提示：
<template>
<div v-if="!isSupported" class="error">
您的设备不支持摄像头访问功能
</div>
</template>以上实现可以根据具体需求进行组合和扩展，建议在实际项目中添加加载状态、错误处理和更完善的用户引导界面。
