前端加入摄像机人脸识别（mediapipe）

前端加入摄像机人脸识别（mediapipe）

import { Camera} from "@mediapipe/camera_utils";
import {FaceMesh} from "@mediapipe/face_mesh";

//   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
//   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
//   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
//   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js" crossorigin="anonymous"></script>
// </head>
const videoElement = document.getElementsByClassName('input_video')[0];
const canvasElement = document.getElementsByClassName('output_canvas')[0];
const canvasCtx = canvasElement.getContext('2d');

function onResults(results) {
  canvasCtx.save();
  canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
  canvasCtx.drawImage(
    results.image, 0, 0, canvasElement.width, canvasElement.height);
  if (results.multiFaceLandmarks) {
    for (const landmarks of results.multiFaceLandmarks) {
      drawConnectors(canvasCtx, landmarks, FACEMESH_TESSELATION,
        { color: '#C0C0C070', lineWidth: 1 });
      drawConnectors(canvasCtx, landmarks, FACEMESH_RIGHT_EYE, { color: '#FF3030' });
      drawConnectors(canvasCtx, landmarks, FACEMESH_RIGHT_EYEBROW, { color: '#FF3030' });
      drawConnectors(canvasCtx, landmarks, FACEMESH_RIGHT_IRIS, { color: '#FF3030' });
      drawConnectors(canvasCtx, landmarks, FACEMESH_LEFT_EYE, { color: '#30FF30' });
      drawConnectors(canvasCtx, landmarks, FACEMESH_LEFT_EYEBROW, { color: '#30FF30' });
      drawConnectors(canvasCtx, landmarks, FACEMESH_LEFT_IRIS, { color: '#30FF30' });
      drawConnectors(canvasCtx, landmarks, FACEMESH_FACE_OVAL, { color: '#E0E0E0' });
      drawConnectors(canvasCtx, landmarks, FACEMESH_LIPS, { color: '#E0E0E0' });
    }
  }
  canvasCtx.restore();
}


const faceMesh = new FaceMesh({locateFile: (file) => {
  return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
}});

faceMesh.setOptions({
  maxNumFaces: 1,
  refineLandmarks: true,
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5
})
faceMesh.onResults(onResults)


const camera = new Camera(videoElement, {
  onFrame: async () => {
    await faceMesh.send({ image: videoElement })
  },
  width: 1280,
  height: 720,
  WebPreferences: {
    nodeIntergration: true,
    contextIsolation: false
  }
})
camera.start()

　　特征点

 在人脸上根据特征点画线

    drawLine(canvasCtx, landmarks, canvasElement) {
      canvasCtx.beginPath();
      //相框横线
      canvasCtx.moveTo(50, 150);
      canvasCtx.lineTo(250, 150);
      //相框竖线 1
      canvasCtx.moveTo(150, 50);
      canvasCtx.lineTo(150, 250);

      // 特征点眼睛连线 
      canvasCtx.moveTo(canvasElement.width * landmarks[33].x, canvasElement.height * landmarks[33].y);
      canvasCtx.lineTo(canvasElement.width * landmarks[263].x, canvasElement.height * landmarks[263].y);
      // 特征点嘴巴鼻子线  2
      canvasCtx.moveTo(canvasElement.width * landmarks[152].x, canvasElement.height * landmarks[152].y - 160);
      canvasCtx.lineTo(canvasElement.width * landmarks[17].x, canvasElement.height * landmarks[17].y);

      canvasCtx.strokeStyle = "#FF3030";
      canvasCtx.lineWidth = 4;
      canvasCtx.stroke();
      canvasCtx.closePath();
    },