You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
6.5 KiB
221 lines
6.5 KiB
<template>
|
|
<div class="page bgc-f4f4f4">
|
|
<label class="backlab" @click="back()"></label>
|
|
<div class="video-show" />
|
|
<video id="video" ref="video" class="video vjs-fluid" autoplay />
|
|
<span class="change" @click="change">
|
|
<i class="el-icon-refresh" />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- import Vconsolefrom from 'vconsole'; -->
|
|
<!-- new Vconsolefrom(); -->
|
|
<script>
|
|
// 看到这个没，这个是一个小插件，能在手机上打开控制台，你打印的控制台信息和报错都能在这显示，具体方法自己百度
|
|
// import Vconsole from "vconsole";
|
|
import { BrowserMultiFormatReader } from "@zxing/library";
|
|
export default {
|
|
name: "QrCodeSearch",
|
|
components: {},
|
|
data() {
|
|
return {
|
|
loadingShow: false,
|
|
// 这个就是从@zxing/library导出来的方法，new一个实例
|
|
codeReader: new BrowserMultiFormatReader(),
|
|
// 这个，用来储存扫码得到的结果
|
|
textContent: null,
|
|
// 这个，就是当前调用的摄像头的索引，为什么是6，我会在后面说的
|
|
num: 6,
|
|
// 这个就是扫描到的摄像头的数量
|
|
videoLength: ""
|
|
};
|
|
},
|
|
created() {
|
|
// const vconsole = new Vconsole();
|
|
// vconsole;
|
|
// 让我们调用这个方法尝试打开摄像头
|
|
this.openScan();
|
|
// new Vconsole();
|
|
},
|
|
methods: {
|
|
// 开打开打
|
|
async openScan() {
|
|
const that = this;
|
|
// 这个就是data里的哪个new出来的玩意，调用里面的方法
|
|
that.codeReader
|
|
.getVideoInputDevices()
|
|
.then(videoInputDevices => {
|
|
console.log(videoInputDevices)
|
|
// 记录一下扫描到的摄像头数量，这个videoInputDevices是个数组，里面有扫描到的摄像头数据
|
|
this.videoLength = videoInputDevices.length;
|
|
// 这步我们来决定一下调用第几个摄像头，看到这个num没，这就是data里的
|
|
const firstDeviceId = videoInputDevices[that.num].deviceId;
|
|
// 这调用另一个方法
|
|
that.decodeFromInputVideoFunc(
|
|
firstDeviceId,
|
|
videoInputDevices.length
|
|
);
|
|
})
|
|
// 失败回调，为什么这里的失败回调这么写，后面会说的
|
|
.catch(err => {
|
|
this.num = 1;
|
|
that.openScan();
|
|
console.error(err);
|
|
});
|
|
},
|
|
//这就是在openScan里调的另一个方法，传入想调用的摄像头id和摄像头数量
|
|
decodeFromInputVideoFunc(firstDeviceId, length) {
|
|
const that = this;
|
|
that.codeReader.reset(); // 重置
|
|
that.textContent = null; // 重置
|
|
// 看不懂不重要，打印出来自己琢磨琢磨
|
|
that.codeReader.decodeFromInputVideoDeviceContinuously(
|
|
firstDeviceId,
|
|
"video",
|
|
(result, err) => {
|
|
that.textContent = null;
|
|
// 扫描成功 这个result就是扫描结果，长啥样自己打印出来看看
|
|
if (result) {
|
|
that.textContent = result;
|
|
// 这里写你要对扫描结果做什么，我这里扫描出来的是个网址，写的页面跳转
|
|
if (that.textContent) {
|
|
setTimeout(() => {
|
|
this.$router.push({
|
|
path:"/enterpriseScanPreview",
|
|
query:{
|
|
enterpriseNumber: that.textContent
|
|
}
|
|
})
|
|
// 记得重置，不然在微信里用会有问题
|
|
that.textContent = null;
|
|
that.codeReader && that.codeReader.reset();
|
|
}, 100);
|
|
}
|
|
}
|
|
// 扫描失败，我这里是直接找下一个摄像头，其实可以不写
|
|
if (err && !err) {
|
|
this.num++;
|
|
setTimeout(() => {
|
|
that.tipShow = false;
|
|
}, 2000);
|
|
if (this.num <= length) {
|
|
that.openScan();
|
|
}
|
|
console.error(err);
|
|
}
|
|
}
|
|
);
|
|
},
|
|
// 点击切换前后摄像头
|
|
change() {
|
|
const that = this;
|
|
if (this.videoLength > 2) {
|
|
if (this.num < 2) {
|
|
this.num = 6;
|
|
} else {
|
|
this.num = 1;
|
|
}
|
|
that.textContent = null;
|
|
that.codeReader && that.codeReader.reset();
|
|
that.openScan();
|
|
} else {
|
|
if (that.num === 0) {
|
|
that.num = 1;
|
|
} else {
|
|
that.num = 0;
|
|
}
|
|
that.textContent = null;
|
|
that.codeReader && that.codeReader.reset();
|
|
that.openScan();
|
|
}
|
|
},
|
|
back(){
|
|
this.$router.go(-1);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.backlab {
|
|
position: absolute;
|
|
z-index: 999999;
|
|
top: 0.5rem;
|
|
left: 0.35rem;
|
|
padding-left: 0;
|
|
width: 0.6rem;
|
|
height: 0.6rem;
|
|
background: url(../../assets/images/icon_arbw.png) no-repeat left 40% center;
|
|
background-size: auto 50%;
|
|
background-color: rgba(255, 255, 255, .2);
|
|
border: 1px solid rgba(255, 255, 255, .7);
|
|
border-radius: 50%;
|
|
}
|
|
.video {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 1;
|
|
}
|
|
.video-show {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 70vw;
|
|
height: 70vw;
|
|
z-index: 2;
|
|
background: linear-gradient(to left, #fff, #fff) left top no-repeat,
|
|
linear-gradient(to bottom, #fff, #fff) left top no-repeat,
|
|
linear-gradient(to left, #fff, #fff) right top no-repeat,
|
|
linear-gradient(to bottom, #fff, #fff) right top no-repeat,
|
|
linear-gradient(to left, #fff, #fff) left bottom no-repeat,
|
|
linear-gradient(to bottom, #fff, #fff) left bottom no-repeat,
|
|
linear-gradient(to left, #fff, #fff) right bottom no-repeat,
|
|
linear-gradient(to left, #fff, #fff) right bottom no-repeat;
|
|
background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
|
|
}
|
|
.tip {
|
|
width: 10vw;
|
|
height: 10vw;
|
|
background-color: rgb(45, 236, 45);
|
|
border: 1px solid #ffffff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
}
|
|
|
|
.bgc-f4f4f4 {
|
|
background-color: #363636;
|
|
}
|
|
|
|
.page {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
height: 100vh;
|
|
}
|
|
.change {
|
|
z-index: 100;
|
|
position: fixed;
|
|
bottom: 1.07rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
width: 1.33rem;
|
|
height: 1.33rem;
|
|
border-radius: 50%;
|
|
line-height: 1.6rem;
|
|
/* align-content: center; */
|
|
}
|
|
.el-icon-refresh {
|
|
color: #000;
|
|
font-size: 0.66rem;
|
|
}
|
|
</style>
|
|
|