fix:添加自定义组件
This commit is contained in:
parent
9a250c3788
commit
30904e3bf1
|
|
@ -27,6 +27,7 @@ import scEcharts from './components/scEcharts'
|
||||||
import scStatusIndicator from './components/scMini/scStatusIndicator'
|
import scStatusIndicator from './components/scMini/scStatusIndicator'
|
||||||
import scTrend from './components/scMini/scTrend'
|
import scTrend from './components/scMini/scTrend'
|
||||||
import scFire from './components/scOpl/scFire'
|
import scFire from './components/scOpl/scFire'
|
||||||
|
import scScanner from './components/scScanner'
|
||||||
|
|
||||||
import auth from './directives/auth'
|
import auth from './directives/auth'
|
||||||
import auths from './directives/auths'
|
import auths from './directives/auths'
|
||||||
|
|
@ -73,6 +74,7 @@ export default {
|
||||||
app.component('scFire', scFire);
|
app.component('scFire', scFire);
|
||||||
app.component('scIconSelect', scIconSelect);
|
app.component('scIconSelect', scIconSelect);
|
||||||
app.component('scEcharts', scEcharts);
|
app.component('scEcharts', scEcharts);
|
||||||
|
app.component('scScanner', scScanner);
|
||||||
|
|
||||||
//注册全局指令
|
//注册全局指令
|
||||||
app.directive('auth', auth)
|
app.directive('auth', auth)
|
||||||
|
|
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
|
|
||||||
<template>
|
|
||||||
<div style="position: relative">
|
|
||||||
<h1>扫描二维码</h1>
|
|
||||||
<video ref="videoElement" width="500" autoplay></video>
|
|
||||||
<canvas ref="canvasElement" style="display:none;position: absolute;left: 510px;"></canvas>
|
|
||||||
<div class="result">
|
|
||||||
<el-button @click="scanQRCode">识别二维码</el-button>
|
|
||||||
<h3>扫描结果：</h3>
|
|
||||||
<p>{{ scannedResult }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import jsQR from 'jsqr';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
scannedResult: null, // 存储扫描到的二维码数据
|
|
||||||
videoStream: null, // 视频流对象
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.startScanning();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 启动摄像头并开始扫描
|
|
||||||
async startScanning() {
|
|
||||||
if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){
|
|
||||||
alert("摄像头可用");
|
|
||||||
// 请求用户的摄像头权限并获取视频流
|
|
||||||
const stream = await navigator.mediaDevices.getUserMedia({
|
|
||||||
video: { facingMode: 'environment' }, // 使用后置摄像头
|
|
||||||
});
|
|
||||||
|
|
||||||
this.videoStream = stream;
|
|
||||||
this.$refs.videoElement.srcObject = stream;
|
|
||||||
alert("准备就绪");
|
|
||||||
setTimeout(() => {
|
|
||||||
this.scanQRCode();
|
|
||||||
},1000)
|
|
||||||
}else{
|
|
||||||
alert("摄像头不可用:浏览器不支持getUserMedia");
|
|
||||||
}
|
|
||||||
// try {
|
|
||||||
// alert("启动摄像头");
|
|
||||||
// // 请求用户的摄像头权限并获取视频流
|
|
||||||
// const stream = await navigator.mediaDevices.getUserMedia({
|
|
||||||
// video: { facingMode: 'environment' }, // 使用后置摄像头
|
|
||||||
// });
|
|
||||||
|
|
||||||
// this.videoStream = stream;
|
|
||||||
// this.$refs.videoElement.srcObject = stream;
|
|
||||||
// alert("准备就绪");
|
|
||||||
// setTimeout(() => {
|
|
||||||
// this.scanQRCode();
|
|
||||||
// },1000)
|
|
||||||
// } catch (error) {
|
|
||||||
// console.error('无法访问摄像头:', error);
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
|
|
||||||
// 从视频流中提取每一帧图像并识别二维码
|
|
||||||
scanQRCode() {
|
|
||||||
alert("解析二维码");
|
|
||||||
let videoElement = this.$refs.videoElement;
|
|
||||||
let canvas = this.$refs.canvasElement;
|
|
||||||
let context = canvas.getContext('2d');
|
|
||||||
let widths = videoElement.videoWidth;
|
|
||||||
let heights = videoElement.videoHeight;
|
|
||||||
canvas.width = videoElement.videoWidth;
|
|
||||||
canvas.height = videoElement.videoHeight;
|
|
||||||
context.drawImage(videoElement, 0, 0, widths, heights);
|
|
||||||
// 获取当前帧的图像数据
|
|
||||||
let imageData = context.getImageData(0, 0, widths,heights);
|
|
||||||
// 使用 jsQR 库识别二维码
|
|
||||||
console.log("imageData", imageData);
|
|
||||||
let qrCode = jsQR(imageData.data, widths,heights);
|
|
||||||
console.log("qrCode", qrCode);
|
|
||||||
if (qrCode) {
|
|
||||||
this.scannedResult = qrCode.data; // 显示扫描到的二维码内容
|
|
||||||
} else {
|
|
||||||
this.scannedResult = null; // 如果未识别到二维码，则清空结果
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
// 在组件销毁时，停止视频流
|
|
||||||
if (this.videoStream) {
|
|
||||||
const tracks = this.videoStream.getTracks();
|
|
||||||
tracks.forEach(track => track.stop());
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.result {
|
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue