美文网首页
vue+tracking活体检测(人脸识别)

vue+tracking活体检测(人脸识别)

作者: 白衣诗人 | 来源:发表于2023-07-09 17:17 被阅读0次
    下载tracking.js
    image.png

    注意:静态文件只需要build,复制build到项目的assets文件目录中,按需引入

    <template>
      <div class="face">
          <div class="face-meiti">
            <div class="tip">{{tip}}</div>
            <video ref="video" width="200" height="200"  preload autoplay loop muted playsinline :webkit-playsinline="true"></video>
            <canvas ref="canvas" width="320" height="240"></canvas>
          </div>
        <img :src="src" alt="">
        <p>{{getUserMedia}}</p>
      </div>
    </template>
    
    <script>
    import tracking from '@/assets/tracking/tracking-min.js';
    import '@/assets/tracking/data/face-min.js';
    export default {
      data() {
        return {
          tip:'请正对摄像头',
          mediaStreamTrack:null,
          video:null,// 播放器实例
          trackerTask:null, //tracking实例
          uploadLock: true, // 上传锁
          faceflag:false,//是否进行拍照
          src:'',
          getUserMedia:''
        }
      },
      mounted() {
        this.init();
      },
      methods: {
        init() {
          const _this = this;
          this.video = this.mediaStreamTrack = this.$refs.video;
          let canvas = this.$refs.canvas;
          let context = canvas.getContext('2d', {willReadFrequently: true});
          // this.getUserMedia = navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
          //
          // navigator.getUserMedia({'video':true},function (stream) {
          //   _this.video.srcObject = stream
          // },function (err) {
          //   console.error('摄像头调用失败')
          // })
          this.initTracker(canvas, context)
        },
        initTracker(canvas, context){
          const _this = this;
          // 固定写法
          let tracker = new window.tracking.ObjectTracker('face');
          tracker.setInitialScale(4);
          tracker.setStepSize(2);
          tracker.setEdgesDensity(0.1);
          // //摄像头初始化
          this.trackerTask = window.tracking.track(this.video, tracker, {
            camera: true
          });
          tracker.on('track', function (event){
            if(event.data.length == 0){
              if(!_this.faceflag){
                _this.tip = '未检测到人脸'
              }
            }else if(event.data.length > 0){
              _this.tip = '识别成功,正在拍照,请勿乱动~';
              event.data.forEach(function(rect) {
    
                context.strokeStyle = '#a64ceb';
                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
    
                if(!_this.faceflag){// 检测到人脸进行拍照,延迟两秒
                  _this.faceflag = true
                  context.drawImage(_this.video, 0, 0, canvas.width, canvas.height);
                  let base64Img = canvas.toDataURL('image/jpeg');
                  _this.src = base64Img
                  setTimeout(function (){
                    _this.faceflag = false
                  }, 2000)
                }
              });
            }
            // else{
            //   _this.tip = '请处于相对空旷的环境'
            // }
          })
        }
      }
    }
    </script>
    <style lang="scss">
    .face{
      .face-meiti{
        position: relative;
        .tip{
          text-align: center;
          font-size: 12px;
          padding-bottom: 15px;
        }
        video{
          width: 200px;
          height: 200px;
          -webkit-border-radius: 150px;
          -moz-border-radius: 150px;
          border-radius: 150px;
          object-fit: cover;
          border: 2px solid #000;
          box-sizing: border-box;
        }
        canvas{
          position: fixed;
          left: 100vw;
          top: 0;
          z-index: -1;
          width: 200px;
          height: 200px;
          background: #000;
        }
      }
      img{
        width: 100%;
        height: auto;
      }
    }
    </style>
    
    

    相关文章

      网友评论

          本文标题:vue+tracking活体检测(人脸识别)

          本文链接:https://www.haomeiwen.com/subject/pxpsudtx.html