devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

H5端扫码识别二维码 VUE（开箱即用）_h5扫码获取内容

作者：神奇cpp | 2024-08-11 12:02:55

赞

踩

h5扫码获取内容

公司有这个需要本来想CV，找了很久没找到，都是些残文和AI文章。就干脆自己写了一个。

CV就能用，开箱即用兄弟们,觉得好用的点个赞吧兄弟们。

目前只做了移动端的适配哦，用电脑打开是打不开的做了强制限制的。

不罗嗦，上代码

需要安装JSQR去解析二维码

控制台命令： npm install jsqr --save

  1. <template>
  2.   <div>
  3.     <div v-if="xsyc">
  4.         <div ref="videocontainer" v-if="xsycerweima">
  5.       <div class="video-container">
  6.         <!--video用于显示媒体设备的视频流，自动播放 autoplay-->
  7.         <video id="video" autoplay  playsinline webkit-playsinline  ref="video" ></video>
  8.         <!--描绘video截图-->
  9.         <canvas id="canvas" style="width: 100%;height: 100%;" v-show="videofalse"></canvas>
  10.          <!-- 遮罩层 -->
  11.         <div class="wrap" ref="wrap">
  12.           <!-- 扫码线 -->
  13.                <!-- 直角线 -->
  14.             <i class="iconfont icnfontzhijiao1" >&#xe603;</i>
  15.             <i class="iconfont icnfontzhijiao2">&#xe601;</i>
  16.             <i class="iconfont icnfontzhijiao3">&#xe604;</i>
  17.             <i class="iconfont icnfontzhijiao4">&#xe602;</i>
  18.           <div class="saomasan">
  19.         </div>
  20.         </div>
  21.         <div ref="shengyupx"  class="shengyupx">
  22.           <div class="dibubuju">
  23.             <i class="iconfont">&#xe600;</i>
  24.           <div>
  25.             扫描二维码
  26.           </div>
  27.           </div>
  28.         </div>
  29.     </div>
  30.         </div>
  31.         <div v-else>
  32.          识别到你的二维码信息是： {{ codedata }}
  33.         </div>
  34.       </div>
  35.     <div v-else>
  36.         <div class="PCduan">
  37.             扫描二维码暂不支持电脑端，请移步到手机端。
  38.         </div>
  39.     </div>
  40.   </div>
  41.   </template>
  1. <script>
  2. import jsQR from 'jsqr'
  3. export default {
  4.   name: 'LoginIndex',
  5.   data () {
  6.     return {
  7.       videofales: false,
  8.       video: null,
  9.       canvas: null,
  10.       ctx: null,
  11.       xsyc: true,
  12.       xsycerweima: true,
  13.       codedata: '',
  14.       intervalId: null
  15.     }
  16.   },
  17.   components: {
  18.  
  19.   },
  20.   created () {
  21.     const system = {}
  22.     system.pingtai = /(Win32|Win16|WinCE|Mac68K|MacIntel|MacIntel|MacPPC|Linux mips64)/i.test(navigator.platform)
  23.     if (system.pingtai) {
  24.       // 电脑
  25.       console.log('电脑')
  26.       this.xsyc = false
  27.     } else {
  28.       // 手机
  29.       console.log('手机')
  30.       this.xsyc = true
  31.     }
  32.   },
  33.   mounted () {
  34.     // 获取DOM元素
  35.     if (this.xsyc) {
  36.       this.video = document.getElementById('video')
  37.       this.canvas = document.getElementById('canvas')
  38.       this.canvas.width = window.innerWidth
  39.       this.canvas.height = window.innerHeight
  40.       this.ctx = this.canvas.getContext('2d')
  41.       console.log(window)
  42.       this.scan()
  43.       this.intervalId = setInterval(() => {
  44.         this.capture()
  45.       }, 100)
  46.     }
  47.   },
  48.   methods: {
  49.     // 兼容浏览器获取用户媒体方法
  50.     // constrains 参数用于指定要使用的摄像头和音频设备。success 和 error 参数用于处理成功和失败的情况。
  51.     getUserMedia (constrains, success, error) {
  52.       if (navigator.mediaDevices.getUserMedia) {
  53.         // 最新标准API
  54.  
  55.         navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error)
  56.       } else if (navigator.webkitGetUserMedia) {
  57.         // webkit内核浏览器
  58.         navigator.webkitGetUserMedia(constrains).then(success).catch(error)
  59.       } else if (navigator.mozGetUserMedia) {
  60.         // Firefox浏览器
  61.         navigator.mozGetUserMedia(constrains).then(success).catch(error)
  62.       } else if (navigator.getUserMedia) {
  63.         // 旧版API
  64.         navigator.getUserMedia(constrains).then(success).catch(error)
  65.       }
  66.     },
  67.     success (stream) {
  68.       // 将一个视频流（stream）转换为一个可以被视频元素加载的URL，然后将这个URL设置为视频元素的源。这样，浏览器就可以自动播放这个视频流了。
  69.       // 兼容webkit核心浏览器
  70.       // 将视频流设置为video元素的源
  71.       this.video.srcObject = stream
  72.       this.video.play()
  73.     },
  74.     error (error) {
  75.       console.log('访问用户媒体设备失败：' + error.name + ' ' + error.message)
  76.     },
  77.     // 调用摄像头
  78.     scan () {
  79.       if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  80.         // 调用用户媒体设备，访问摄像头
  81.         this.getUserMedia({
  82.           audio: false,
  83.           video: {
  84.             facingMode: 'environment', // user 前置摄像头 environment 后置摄像头
  85.             width: { ideal: 1280 },
  86.             height: { ideal: 720 },
  87.             frameRate: { ideal: 30 },
  88.             codec: 'video/mp4;codecs="avc1.42E01E"'
  89.           }
  90.         }, this.success, this.error)
  91.       } else {
  92.         alert('你的浏览器不支持访问用户媒体设备')
  93.       }
  94.     },
  95.     // 循环这个动作就可以实现扫码的效果
  96.     capture () {
  97.       const videoWidth = window.innerWidth
  98.       const videoHeight = window.innerHeight
  99.       this.ctx.drawImage(this.video, 0, 0, videoWidth, videoHeight)
  100.  
  101.       // 截取高亮部位图片
  102.       const cavaswidth = this.canvas.width
  103.       const cavasheight = this.canvas.height
  104.       const centerX = cavaswidth / 2
  105.       const centerY = cavasheight / 2
  106.       // 这里是扫描区域的控制 和  this.$refs.wrap.offsetWidth的大小一样 调整wrap的宽度可以调整扫描区域
  107.       const desiredSquareSize = this.$refs.wrap.offsetWidth
  108.       const squareSize = desiredSquareSize
  109.       const x = centerX - squareSize / 2
  110.       const y = centerY - squareSize / 2
  111.       // 需要识别的二维码部分给jsQR去解析
  112.       const imageData = this.ctx.getImageData(x, y, squareSize, squareSize)
  113.       const code = jsQR(imageData.data, squareSize, squareSize)
  114.       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
  115.       if (code) {
  116.         console.log('找到二维码', code.data)
  117.         this.codedata = code.data
  118.         this.xsycerweima = false
  119.         clearInterval(this.intervalId)
  120.         this.video.stop()
  121.       } else {
  122.         console.log('未找到二维码')
  123.       }
  124.     }
  125.   }
  126. }
  127. </script>
  1. <style  scoped>
  2.   @font-face {
  3.     font-family: 'iconfont';  /* Project id 4504064 */
  4.     src: url('//at.alicdn.com/t/c/font_4504064_wfyvfsvop7d.woff2?t=1712828573992') format('woff2'),
  5.          url('//at.alicdn.com/t/c/font_4504064_wfyvfsvop7d.woff?t=1712828573992') format('woff'),
  6.          url('//at.alicdn.com/t/c/font_4504064_wfyvfsvop7d.ttf?t=1712828573992') format('truetype');
  7.   }
  8.   .iconfont{
  9.       font-family:"iconfont" !important;
  10.       font-size:25px;font-style:normal;
  11.       -webkit-font-smoothing: antialiased;
  12.       -webkit-text-stroke-width: 0.2px;
  13.       -moz-osx-font-smoothing: grayscale;
  14.     }
  15.   *{
  16.     margin:0px; padding:0px;
  17.     overflow: hidden;
  18.   }
  19.   .video-container {
  20.     /* width: 100vw;
  21.     height: 100vh; */
  22.     overflow: hidden;
  23.   }
  24.   #video {
  25.     /* object-fit: cover; */
  26.     /* object-position: center center; */
  27.     /* object-position: ; */
  28.     /* height: 100%; */
  29.     width: 100%;
  30.     object-fit: contain;
  31.     position: absolute;
  32.     overflow: hidden;
  33.   }
  34.   #canvas {
  35.   width: 100vw;
  36.   height: 100vh;
  37.   }
  38.   #capture {
  39.     content:'';
  40.     position: absolute;
  41.     top: 0;
  42.     right: 0;
  43.   }
  44.   .wrap {
  45.     content:'';
  46.     position: absolute;
  47.     width: 70vw;
  48.     height: 70vw;
  49.     left: 50%;
  50.     top: 50%;
  51.     transform: translate(-50%,-50%); /*默认居中*/
  52.     box-shadow: 0 0 0 999vw rgba(0, 0, 0, .8); /*足够大的投影*/
  53.   }
  54.   .shengyupx {
  55.     position: absolute;
  56.     background-color:rgba(44, 40, 40, 1);
  57.     bottom: -1vh;
  58.     height: 10vh;
  59.     width: 100%;
  60.     z-index: 999;
  61.     overflow: hidden;
  62.  
  63.   }
  64.   .dibubuju {
  65.    display: flex;
  66.    flex-direction: column;
  67.    justify-content: center;
  68.    align-items: center;
  69.    color: #007bff;
  70.    font-size: 2vw;
  71.   }
  72.   .icnfontzhijiao1 {
  73.     content:'';
  74.     position: absolute;
  75.     left: 0.4vw;
  76.     top: -0.4vh;
  77.     color: #007bff;
  78.   }
  79.   .icnfontzhijiao2 {
  80.     content:'';
  81.     position: absolute;
  82.     right: 0.4vw;
  83.     top: -0.4vh;
  84.     color: #007bff;
  85.   }
  86.   .icnfontzhijiao3 {
  87.     content:'';
  88.     position: absolute;
  89.     left: 0.4vw;
  90.     bottom: -0.7vh;
  91.     color: #007bff;
  92.   }
  93.   .icnfontzhijiao4 {
  94.     content:'';
  95.     position: absolute;
  96.     right:  0.4vw;
  97.     bottom: -0.7vh;
  98.     color: #007bff;
  99.   }
  100.   .saomasan {
  101.     content:'';
  102.     position: absolute;
  103.     left: 50%;
  104.     top: 0%;
  105.     transform: translate(-50%,-50%); /*默认居中*/
  106.     height: 3px;
  107.     width: 300px;
  108.     background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0),#007bff,rgba(255,255,255,0));
  109.     background: linear-gradient(to right, rgba(255, 255, 255, 0),#007bff,rgba(255,255,255,0));
  110.     animation: moveLine 3s linear infinite;
  111.   }
  112.   @keyframes moveLine {
  113.     0% { transform: translate(-50%,-50%) translateY(-300%); }
  114.     50% { transform: translate(-50%,-50%) translateY(10000%); }
  115.     100% { transform: translate(-50%,-50%) translateY(-100%); }
  116.   }
  117.  
  118.   .PCduan {
  119.     display: flex;
  120.     justify-content: center;
  121.     align-items: center;
  122.     height: 100vh;
  123.     font-size: 4vw;
  124.   }
  125.   </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/964103
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号