H5 移动端二维码扫描-附加扫描样式
依赖包jsQR
思路:通过浏览器获取视频流播放在video当中,然后设置定时器截取视频流绘制在canvas中,使用canvas获取到图片信息,再使用jsQR解析二维码。
由于开源二维码解析库识别率不高 特别模糊的二维码识别率较低 可满足部分开发需求,如需要更加精确推荐dynamsoft
dynamsoft demo地址:https://demo.dynamsoft.com/Samples/DBR/JS/2.ui-tweaking/3.read-video-with-external-control.html?ver=latest
<template>
<div class="test">
<div class="fixBox">
<div
class="iconBox"
@click="
() => {
this.$router.history.go(-1);
}
"
>
<i class="iconfont icon-fanhuitubiao"></i>
</div>
<div class="videoBox">
<div class="outVideo" v-if="isAnimation">
<video
autoPlay
ref="outVideo"
webkit-playsinline
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x-webkit-airplay="true"
playsinline
v-if="!trueFlag"
id="myVideo"
></video>
</div>
<div class="codebg" v-if="!trueFlag">
<div class="line"></div>
</div>
<canvas
id="qr-canvas"
style="width:6rem;height:6rem;"
ref="canvas"
></canvas>
</div>
</div>
</div>
</template>
<script>
import jsQR from "jsqr";
export default {
data() {
return {
photoBase: "",
trueFlag: false,
isAnimation: true
};
},
mounted() {
this.outvideo = this.$refs.outVideo;
this.cvsele = this.$refs.canvas;
this.canvas = this.cvsele.getContext("2d");
this.video = document.createElement("video");
this.$nextTick(() => {
this.getVideo();
});
},
methods: {
getVideo() {
let self