人脸检测

一下载js插件

tracking.js (opens new window)
face-min.js (opens new window)
Regressor.js (opens new window)
Landmarks.js (opens new window)

二在项目 index.html 引入 js 和赋值

<script src="/VideoLogin/tracking.js"></script>
<script src="/VideoLogin/face-min.js"></script>
<script src="/VideoLogin/Landmarks.js"></script>
<script src="/VideoLogin/Regressor.js"></script>

<script>
  window.tracking = tracking;
</script>

三定义组件

点击查看本组件代码

<template>
  <div class="pr">
    <div class="video-box" :class="FaceDetected ? 'act' : ''">
      <video
        class="w100 h100 video-bg"
        ref="videoDemo"
        muted
        autoplay
        id="video"
      ></video>

      <canvas
        class="canvas-box"
        ref="canvasRef"
        width="600"
        height="450"
      ></canvas>

      <div class="user-icon-box vertical-center" v-if="FaceDetected">
        <div>
          <img
            :src="imgUrl"
            class="user-img animate__animated animate__heartBeat"
          />
          <div class="mt10">
            <n-button type="primary" class="operation-btn" @click="successCall">
              确认
            </n-button>
            <n-button
              type="info"
              class="ml20 operation-btn"
              @click="FaceDetected = false"
            >
              重拍
            </n-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { ref } from "vue";
const videoDemo = ref();
const canvasRef = ref();
const imgUrl = ref();
const FaceDetected = ref(false); // 是否检测到人脸
// 开启摄像头
const inide = async () => {
  let stream = await navigator.mediaDevices.getUserMedia({
    video: true, //有些设备没有视频头 要隐藏 起来不然会报错
  });
  videoDemo.value.srcObject = stream;
};
// 打开摄像头
inide();

// 视频拍照并把图片转成base64
const screenshot = () => {
  const ctx = canvasRef.value.getContext("2d");
  ctx.drawImage(videoDemo.value, 0, 0, 600, 450);
  imgUrl.value = canvasRef.value.toDataURL();
  FaceDetected.value = true;
  // console.log(imgUrl.value.replace(/^data:image\/(jpeg|jpg|png);base64,/, ""));
};

// 点击确认把图片传给c# 和后台
const successCall = () => {
  window.Formium.external.callbackObj.setFace(
    `xxx.jpg`,
    "jpg",
    "userNo#", // 这是变量
    "id", // 这是变量
    imgUrl.value // 图片的base64 流
  );
};
// 开启检测人脸
const trackerInit = () => {
  var tracker = new window.tracking.LandmarksTracker();
  tracker.setInitialScale(4);
  tracker.setStepSize(2);
  tracker.setEdgesDensity(0.1);
  window.tracking.track("#video", tracker);
  tracker.on("track", function (event) {
    // 检测到人脸
    if (event.data.landmarks.length > 0 && !FaceDetected.value) {
      screenshot();
    }
  });
};
setTimeout(() => {
  trackerInit();
}, 1000);
</script>
 <style scoped>
.video-bg {
  width: 100%;
  height: 100%;
  background: #000;
}
.jjnseerr {
  width: 330px;
  height: 330px;
}
.video-box {
  width: 600px;
  height: 450px;
  overflow: hidden;
  position: relative;
}
.video-box.act video {
  filter: blur(10px);
}
.canvas-box {
  position: absolute;
  left: 0;
  top: 0;
  /* width: 100%;
  height: 100%; */
  opacity: 0;
}
.user-icon-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.user-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.operation-btn {
  width: 90px;
  font-size: 18px;
}
</style>

demo示例