MediaPipe를 이용한 얼굴 인식

구글의 MediaPipe 솔루션을 이용한 얼굴 인식을 구현하는 방법입니다.

웹브라우저 상단에 뜨는 카메라 허용 버튼을 클릭하면 카메라를 통해서 전달되는 영상을 통해서 얼굴을 인식하고, 얼굴 영역과 얼굴에서 Landmark 부분을 아래의 사진과 같이 표시해 줍니다.

 

 

 

1. 주요 소스

HTML

<div>
  <video class="input_video" style="display: none;"></video>
  <canvas class="output_canvas" width="1280px" height="720px"></canvas>
</div>

 

Javascript

<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_detection/face_detection.js" crossorigin="anonymous"></script>
<script type="module">
  const videoElement = document.getElementsByClassName('input_video')[0];
  const canvasElement = document.getElementsByClassName('output_canvas')[0];
  const canvasCtx = canvasElement.getContext('2d');
  const drawingUtils = window;

  function onResults(results) {
    // Draw the overlays.
    canvasCtx.save();
    canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
    canvasCtx.drawImage(
      results.image, 0, 0, canvasElement.width, canvasElement.height);
    if (results.detections.length > 0) {
      drawingUtils.drawRectangle(
        canvasCtx, results.detections[0].boundingBox,
        {color: 'blue', lineWidth: 4, fillColor: '#00000000'});
      drawingUtils.drawLandmarks(canvasCtx, results.detections[0].landmarks, {
        color: 'red',
        radius: 5,
      });
    }
    canvasCtx.restore();
  }

  const faceDetection = new FaceDetection({
    locateFile: (file) => {
      return `https://cdn.jsdelivr.net/npm/@mediapipe/face_detection/${file}`;
    }
  });
  faceDetection.setOptions({
    model: 'short',
    minDetectionConfidence: 0.5
  });
  faceDetection.onResults(onResults);

  const camera = new Camera(videoElement, {
    onFrame: async () => {
      await faceDetection.send({ image: videoElement });
    },
    width: 1280,
    height: 720
  });
  camera.start();
</script>