web端实现二维码扫码记录

web端实现二维码扫描功能

引入reqrcode.js /weijunw/erweima/blob/master/erweima-jiexi-demo/reqrcode.js

<canvasid="qr-canvas"width="800"height="600"style="width: 200px; height: 200px; display: none"></canvas><div class="code-bg"><videoref="video"controls="controls"id="video"preload="auto"autoplay></video><div class="line"></div></div>mounted() {this.canvas = document.getElementById("qr-canvas");this.context = this.canvas.getContext("2d");this.getVideo();},getVideo() {let self = this;navigator.getUserMedia =navigator.mediaDevices.getUserMedia ||navigator.mediaDevices.webkitGetUserMedia ||navigator.mediaDevices.mozGetUserMedia;let option = {width: 100,height: 100,};self.URL =window.URL || window.webkitURL || window.mozURL || window.msURL;if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({video: option,}).then((stream) => {//将视频流 实时播放在videoconsole.log(stream);self.$refs.video.srcObject = stream;self.$refs.video.style.display = "block";console.log(self.$refs.video.srcObject);//截取video内容setTimeout(() => {self.screenShot();}, 2000);}).catch(function (err) {alert(err);});} else if (navigator.getUserMedia) {navigator.getUserMedia({video: true,}).then(function (stream) {self.$refs.video.srcObject = stream;self.$refs.video.style.display = "block";setTimeout(() => {self.screenShot();}, 2000);}).catch(function (err) {alert(err);});}},screenShot() {this.context.drawImage(this.$refs.video, 0, 0, 700, 500);let base64 = this.canvas.toDataURL("images/png");//截图成功对图片进行识别this.decodeQrcode(base64);},decodeQrcode(base64) {let self = this;// $('#screenshot_img').attr('src', base64)qrcode.decode(base64);qrcode.callback = function (imgMsg) {if (imgMsg == "error decoding QR Code") {console.log(1232321321321);setTimeout(function () {//截图重新识别self.screenShot();}, 500);} else {alert(imgMsg);// window.location.href = imgMsg;}};// }},

关闭摄像头

closeCamera() {if (!this.video.srcObject) return;let stream = this.video.srcObject;let tracks = stream.getTracks();tracks.forEach(track => {track.stop();});this.video.srcObject = null;}

模拟微信扫描css样式

.code-bg{position: relative;height: 200px; width: 200px;margin: 0px auto;/*此处为了居中*/}.line{position: absolute;left: -80px;z-index: 2;height: 3px; width: 360px;/*上下扫的线*/background-color: red;/*动画效果*/animation: myScan 1s infinite alternate;-webkit-animation: myScan 1s infinite alternate;}@keyframes myScan{from { top:0px; }to { top: 197px; }}