h5人脸识别🎨

467 阅读1分钟

采用了tracking.js 技术
该功能兼容ios浏览器安卓浏览器

使用方法

1.在官网下载包放入public/tracking (可以直接用我现在的这个)

2.在public/index.html引入

<script src="./tracking/build/tracking-min.js"></script>
<script src="./tracking/build/data/face-min.js"></script>
<script src="./tracking/examples/assets/stats.min.js"></script>

3.创建相关div

<!-- 具体内容看相关组件 -->
<template>
... 
<div class="video-box">
      <!-- playsinline
      布尔属性,指明视频将内联(inline)播放,即在元素的播放区域内。请注意,没有此属性并不意味着视频始终是全屏播放的 -->
      <div class="demo-container">
        <video
          ref="video"
          playsinline
          id="video"
          preload
          autoplay
          loop
          muted
        ></video>
        <canvas id="canvas" height="750"></canvas>
        <canvas id="canvas-face-upload" height="500" width="375"></canvas>
      </div>
    </div>
...
</template>

4.调用方法

//具体内容看相关组件
getCompetence() {
      var _this = this;
      let flag = true;
      var video = document.getElementById("video");
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");

      var tracker = new window.tracking.ObjectTracker("face");
      tracker.setInitialScale(4);
      tracker.setStepSize(2);
      tracker.setEdgesDensity(0.1);

      window.tracking.track("#video", tracker, { camera: true });

      tracker.on("track", function (event) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        event.data.forEach(function (rect) {
          context.strokeStyle = "#ff0000";
          context.strokeRect(rect.x, rect.y, rect.width, rect.height);
        });
        context.clearRect(0, 0, canvas.width, canvas.height);

        event.data.forEach(function (rect) {
          context.strokeStyle = "#a64ceb";
          context.strokeRect(rect.x, rect.y, rect.width, rect.height);
          context.font = "11px Helvetica";
          context.fillStyle = "#fff";
          context.fillText(
            "x: " + rect.x + "px",
            rect.x + rect.width + 5,
            rect.y + 11
          );
          context.fillText(
            "y: " + rect.y + "px",
            rect.x + rect.width + 5,
            rect.y + 22
          );
        });
        if (event.data.length) {
          if (flag) {
            // 裁剪出人脸并绘制下来
            const canvasUpload = document.getElementById("canvas-face-upload");
            const contextUpload = canvasUpload.getContext("2d");
            contextUpload.drawImage(video, 0, 0, 375, 500);
            flag = false;
            // 人脸的basa64
            _this.database64 = canvasUpload.toDataURL("image/jpeg");
            if (_this.database64) {
              setTimeout(() => {
                _this.$parent.upfile(_this.database64);
              }, 1000);
            }
          }
        }
      });
    },

实现效果

image.png

源码分享(感觉不错的话可以点击收藏)

github