人脸检测web端的实现

1.打开摄像头设备捕获视频流并将视频流转换为本地URL输出到video显示

    示例代码：

let video = document.getElementById(''video)
navigator.mediaDevices.getUserMedia({
    video: true
  }).then(async stream => {
    video.srcObject  = stream
  })

呈现结果：将视频渲染至video上：

2.利用setInterval或requestAnimationRequest将每一帧的video重绘在canvas上，canvas便于对后续识别的结果做呈现

// 获取缩放比
const getPixelRatio = (context) => {
  let backingStore = context.backingStorePixelRatio ||
      context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio || 1;
  return (window.devicePixelRatio || 1) / backingStore;
};
// 重绘至canvas
const canvasCapture = () => {
  let context = canvasDom.getContext('2d')
  const scale = getPixelRatio(context)
  canvasDom.width = 640 * scale
  canvasDom.height = 480 * scale
  interVal= setInterval(() => {
    context.drawImage(videoDom, 0, 0, 640 * scale, 480 * scale)
  }, 15)
}

3.使用基于tensorflow的js库face-API加载人脸识别模型,根据识别返回的结果，绘制呈现的形式

// 加载AImodel
const init = async () => {
  await faceApi.nets.ssdMobilenetv1.loadFromUri("/faceModels");
  await faceApi.loadFaceLandmarkModel("/faceModels");
  options = new faceApi.SsdMobilenetv1Options({
    minConfidence: 0.5, // 0.1 ~ 0.9
  });
  interVal= setInterval(async () => {
    const result = await faceApi.detectSingleFace(videoDom, options).withFaceLandmarks()
    if (result) {
      const canvas = document.getElementById('overlay')
      if (useCamera && canvas) {
        const dims = faceApi.matchDimensions(canvas, videoDom, true)
        const resizedResult = faceApi.resizeResults(result, dims)
        if (withBoxes) {
          faceApi.draw.drawDetections(canvas, resizedResult)
        }
        faceApi.draw.drawFaceLandmarks(canvas, resizedResult)
      }
    }
  })
}

4.关闭摄像头，同时清除定时器和清空画布

const closeCamera = () => {
  videoSrc.getTracks()[0].stop()
  showCanvas= false
  useCamera= false
  if (interVal) {
    clearInterval(interVal)
    interVal= null
    setTimeout(() => {
      showCanvas= true
    }, 10)
  }
}