PC端调用摄像头扫描二维码，拿到二维码信息

<template><el-dialogtitle="扫描设备二维码":visible.sync="dialogVisible"width="40%"@close="closeCamera"><main class="reader"><el-inputv-model="result"style="width: 80% "type="textarea":rows="2"placeholder="二维码识别结果"/><button class="sweep" @click="media()">扫一扫</button></main><canvas ref="canvas" class="canvas" /><span slot="footer" class="dialog-footer"><el-button size="small" @click="dialogVisible = false">取 消</el-button><el-button type="primary" size="small" @click="onConfirm">确 定</el-button></span></el-dialog>
</template><script>
import jsQR from 'jsqr'
// import Jimp from 'jimp'
export default {name: 'Reader',data() {return {dialogVisible: false,timer: null,result: '',isAnimation: true,audio: Object,video: Object,cvsele: Object,canvas: Object}},methods: {show(val) {this.dialogVisible = truethis.$nextTick(() => {this.result = valthis.audio = new Audio('../assets/tone.mp3')this.video = document.createElement('video')this.cvsele = this.$refs.canvasthis.canvas = this.cvsele.getContext('2d')this.canvas.clearRect(0, 0, this.cvsele.width, this.cvsele.height)this.cvsele.style.display = 'none'})},draw(begin, end) {this.canvas.beginPath()this.canvas.moveTo(begin.x, begin.y)this.canvas.lineTo(end.x, end.y)this.canvas.lineWidth = 3this.canvas.strokeStyle = 'red'this.canvas.stroke()},sweep() {if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {const { videoWidth, videoHeight } = this.videothis.cvsele.width = videoWidththis.cvsele.height = videoHeightthis.canvas.drawImage(this.video, 0, 0, videoWidth, videoHeight)try {const img = this.canvas.getImageData(0, 0, videoWidth, videoHeight)this.imgurl = imgconst obj = jsQR(img.data, img.width, img.height, {inversionAttempts: 'dontInvert'})if (obj) {const loc = obj.locationthis.draw(loc.topLeftCorner, loc.topRightCorner)this.draw(loc.topRightCorner, loc.bottomRightCorner)this.draw(loc.bottomRightCorner, loc.bottomLeftCorner)this.draw(loc.bottomLeftCorner, loc.topLeftCorner)if (this.result !== obj.data) {this.audio.play()this.result = obj.datathis.isAnimation = falsecancelAnimationFrame(this.timer)setTimeout(() => {this.cvsele.style.display = 'none'}, 1000)} else {console.log(this.result !== obj.data)alert('重复的二维码，请检查后重新扫描！')}}/*  else {console.error('识别失败，请检查二维码是否正确！0000')}*/} catch (err) {console.error('识别失败，请检查二维码是否正确！', err)}}if (this.isAnimation) {this.timer = requestAnimationFrame(() => {this.sweep()})}},media() {this.isAnimation = truethis.cvsele.style.display = 'block'navigator.getUserMedia =navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMediaif (navigator.mediaDevices) {navigator.mediaDevices.getUserMedia({video: { facingMode: 'environment' }}).then((stream) => {this.video.srcObject = streamthis.video.setAttribute('playsinline', true)this.video.setAttribute('webkit-playsinline', true)this.video.addEventListener('loadedmetadata', () => {this.video.play()this.sweep()})}).catch((error) => {console.error(error.name + '：' + error.message + '，' + error.constraint)})} else if (navigator.getUserMedia) {navigator.getUserMedia({video: { facingMode: 'environment' }},(stream) => {this.video.srcObject = streamthis.video.setAttribute('playsinline', true)this.video.setAttribute('webkit-playsinline', true)this.video.addEventListener('loadedmetadata', () => {this.video.play()this.sweep()})},(error) => {console.error(error.name + '：' + error.message + '，' + error.constraint)})} else {if (navigator.userAgent.toLowerCase().match(/chrome/) &&location.origin.indexOf('https://') < 0) {/* console.error('获取浏览器录音功能，因安全性问题，需要在localhost 或 127.0.0.1 或 https 下才能获取权限！')*/alert('获取浏览器拍照/录音功能，因安全性问题，需要在https 下才能获取权限！')} else {alert('对不起：未识别到扫描设备!')}}},onConfirm() {if (this.result) {this.dialogVisible = falsethis.$emit('fromChild', this.result)this.closeCamera()} else {alert('请扫描二维码')}},// 关闭摄像头closeCamera() {const stream = this.video.srcObjectif (stream) {console.log(stream, 'ppppppppppp')const tracks = stream.getTracks()tracks.forEach(track => {track.stop()})this.video.srcObject = null}}}
}
</script><style lang="less">.reader {font-size: 16px;margin-bottom: 20px;.imgurl {margin: 20px;text-align: center;img {margin: 20px;padding: 10px;border: 1px solid gray;border-radius: 8px;width: 280px;height: 260px;}}.result {box-sizing: border-box;padding: 10px;border: 1px solid gray;border-radius: 8px;font-size: 16px;}}.sweep {position: relative;padding: 12px;font-size: 18px;cursor: pointer;color: white;background: #42b983;border: 1px solid #42b983;overflow: hidden;input {position: absolute;font-size: 100px;opacity: 0;}.canvas {display: none;box-sizing: border-box;position: fixed;top: 0;bottom: 0;left: 20px;}}
</style>

PC端调用摄像头扫描二维码，拿到二维码信息相关推荐

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
JS PC端调用摄像头录视频截图上传文件
创建 Catcher 类 class Catcher {URL; // 上传地址dataStream; // 流数据mediaStream; //媒体流mediaRecorder; //录制对象sta ...
vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...
PC端调用摄像头并拍照
该博主的方法在mac本子上测试成功.原文连接: https://juejin.cn/post/6955290885806358564
C#生成二维码、调用摄像头扫描二维码
二维码的生成和解码,有两个开源项目可以参考: 一个是google的zxing,另外一个是ThroughWork. zxing做的很全面,支持各种语言和平台,具体不多讲,自己查去.ThroughWork ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
解决PC浏览器调用摄像头失败(本地可以,线上失败)
解决PC浏览器调用摄像头失败(本地可以,线上失败) 原因:浏览器为了安全http协议获取不到摄像头权限解决方案 1.切换https 如果域名可以使用https,切换为https即可 2.修改浏览器设 ...
手机移动端-纯js浏览器h5调用摄像头扫描识别解析条形码+二维码
一.场景手机移动端-原生js 浏览器h5 解决识别二维码条形码功能: 不借助Hbuilder.需要自己打包成APP,比如用Hbuilder打包,浏览器端项目h5 无打包成app部署 X 不采用 ...
关于Unity调用摄像头扫描二维码与生成二维码的实现方法
1.常用的生成二维码网址 https://cli.im/ 2.上官网下载二维码插件 http://zxingnet.codeplex.com/ 3.将下载的插件中zxing.unity.dll文件放入 ...

PC端调用摄像头扫描二维码，拿到二维码信息

PC端调用摄像头扫描二维码，拿到二维码信息相关推荐

最新文章

热门文章