【tracking.js】前端人脸识别框架 Tracking.js 活体检测/拍照实现

Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。

很久之前做的，做个记录吧，实现挺复杂的，包需到官网下载 tracking-min.js 和 face-min.js 压缩文件。

实现效果

活体检测组件

点击查看活体检测组件代码

拍照组件代码

点击查看拍照组件代码

样式文件

点击查看样式代码 
.face {
    .big-title{
      font-size: 16PX;
      font-weight: 600;
      color: #030229;
    }
    .video-container {
      background: #D9D9D9;
      position: relative;
      width: 295PX;
      height: 345PX;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;

      video,
      #canvas,
      #shortCut,
      #canvas1 {
        position: absolute;
      }
    }
    .btns {
      padding: 10PX;
      text-align: center;
      margin-top: 6PX;
      .tips {
        font-size: 14PX;
        color: #666;
        margin-top: 16PX;
  
        line-height: 24PX;
      }
    }
    .imgs {
      padding: 10PX;
      p {
        font-size: 16PX;
      }
    }
    .add-num {
      display: inline-block;
      font-size: 16PX;
      padding: 6PX 14PX;
      margin-right: 4PX;
      border-radius: 4PX;
      color: #0a9391;
      background: #1a949133;
      cursor: pointer;
    }
    .retake-btn {
      display: inline-block;
      font-size: 16PX;
      padding: 6PX 14PX;
      margin-right: 24PX;
      border-radius: 4PX;
      color: #c81124;
      background: #c8122333;
      cursor: pointer;
    }
  }
  .face-dialog {
    .el-dialog__body {
      padding-top: 0;
      padding-bottom: 15px;
    }
  }
工具插件

相关

标签