web端实现二维码扫码记录

web端实现二维码扫描功能

引入reqrcode.js https://gitee.com/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; }
}

web端实现二维码扫码记录相关推荐

vue项目生成微信支付二维码(web端),其他二维码也可以生成
第一步引入第三方插件: npm install –save qrcodejs2 第二步,在vue页面中引用: <template><h2>微信扫码支付</h2>&l ...
web端微信二维码自定义样式
var content = ".impowerBox .qrcode {width: 50vh;} .impowerBox .title {display: none;}.impowerBo ...
html扫码支付,WEB端第三方支付接入 - 支付宝 - 扫码支付
需要接入支付宝支付了支付宝支付相对于微信支付接入更麻烦一些,要配置密钥啥的需要支付宝开放平台账号,并开通网站支付相关权限,具体查看官方网站上代码: 1 - 引入依赖 com.alipay.sdk ...
二维码扫码登录是什么原理?
在日常生活中,二维码出现在很多场景,比如超市支付.系统登录.应用下载等等.了解二维码的原理,可以为技术人员在技术选型时提供新的思路.对于非技术人员呢,除了解惑,还可以引导他更好地辨别生活中遇到的各种二 ...
细说二维码扫码登录的原理
前言在日常生活中,二维码出现在很多场景,比如超市支付.系统登录.应用下载等等.了解二维码的原理,可以为技术人员在技术选型时提供新的思路.对于非技术人员呢,除了解惑,还可以引导他更好地辨别生活中遇到的 ...
聊聊二维码扫码登录的原理
点击上方 "大数据肌肉猿"关注, 星标一起成长后台回复[加群],进入高质量学习交流群 2021年大数据肌肉猿公众号奖励制度原文:https://juejin.cn/post/6 ...
面试官：说说二维码扫码登录是什么原理吗？
你知道的越多,不知道的就越多,业余的像一棵小草! 你来,我们一起精进!你不来,我和你的竞争对手一起精进! 编辑:业余草 juejin.cn/post/6940976355097985032 推荐:ht ...
二维码扫码登录的项目实战(建议收藏)
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] 点击领取全栈资料:全栈资料前几天看了一个二维码的视频,写的不错,这里总结下. 在日常生活中,二维码出现在很多场景,比如超市支付.系统登录 ...
抖音二面：“聊聊二维码扫码登录的原理”
文章来源:https://juejin.cn/post/6940976355097985032 目录二维码登录的本质认识二维码系统认证机制扫描二维码登录的一般步骤总结前言在日常生活中,二 ...
二维码扫码登录的背后 ...
前几天看了极客时间一个二维码的视频,写的不错,这里总结下在日常生活中,二维码出现在很多场景,比如超市支付.系统登录.应用下载等等.了解二维码的原理,可以为技术人员在技术选型时提供新的思路.对于非技术 ...

web端实现二维码扫码记录

web端实现二维码扫描功能

web端实现二维码扫码记录相关推荐

最新文章

热门文章