web/html5。 Vue识别二维码进行跳转

• 我也是第一次做html5调用摄像头识别二维码这种,那就废话不多说开始吧
  经过各种查阅发现了一个纯前端的解析二维码的一个依赖jsqr,感谢jsqr的支持.
• 这个是直接在canvas中画出的摄像头video,因为我没有查到如何直接封装拍照 (手动狗头一下)

<template>
  <div class="v-body">
    <canvas :width="canvasWidth"
            :height="canvasHeight"
            id="canvas"
            v-show="showCanvas"
            ref="canvasElement"></canvas>
    <img :src="sys"
         @click="openScan"
         class="btn-sys" />
  </div>
</template>

• 重要的地方来了 主要就是这三个方法

//获取navigator 浏览器所有插件元素 调用摄像头 然后调用 requestAnimationFrame()方法,学过three就应该知道的
openScan() {
        const videoParam={ video: { facingMode: { exact: 'environment' } } };
        navigator.mediaDevices.getUserMedia(videoParam).then((stream) => {
          this.video.srcObject=stream;
          this.video.setAttribute('playsinline',true);
          this.video.play();
          requestAnimationFrame(this.tick); r1
        });
      },
//这里是截取canvas中的图形然后用jsqr进行解析如果解析出来就用canvas画上线然后在跳转至需要的页面
//这里可以根据自己的需求改
      tick() {
        if(this.video.readyState===this.video.HAVE_ENOUGH_DATA) {
          this.showCanvas=true;
          this.canvasHeight=this.video.videoHeight;
          this.canvasWidth=this.video.videoWidth;
          !this.canvas2d&&(this.canvas2d=this.$refs.canvasElement.getContext('2d'));
          this.canvas2d.drawImage(this.video,0,0,this.canvasWidth,this.canvasHeight);
          var imageData=this.canvas2d.getImageData(0,0,this.canvasWidth,this.canvasHeight);
          var code=jsQR(imageData.data,imageData.width,imageData.height,{
            inversionAttempts: 'dontInvert'
          });
          if(code) {
            this.drawLine(code.location.topLeftCorner,code.location.topRightCorner,'#FF3B58');
            this.drawLine(code.location.topRightCorner,code.location.bottomRightCorner,'#FF3B58');
            this.drawLine(code.location.bottomRightCorner,code.location.bottomLeftCorner,'#FF3B58');
            this.drawLine(code.location.bottomLeftCorner,code.location.topLeftCorner,'#FF3B58');
            this.outputData=code.data;
            window.location.href=this.outputData
          } else {
            this.outputData=undefined;
          }
        }
        requestAnimationFrame(this.tick);
      },
//这个就是canvas的函数了
      drawLine(begin,end,color) {
        this.canvas2d.beginPath();
        this.canvas2d.moveTo(begin.x,begin.y);
        this.canvas2d.lineTo(end.x,end.y);
        this.canvas2d.lineWidth=4;
        this.canvas2d.strokeStyle=color;
        this.canvas2d.stroke();
      }

附上github源码 如果有帮助的话点一个star吧,谢谢🙏