웹용 얼굴 인식 가이드

MediaPipe 얼굴 감지기 작업을 사용하면 이미지 또는 동영상에서 얼굴을 감지할 수 있습니다. 이때 이 작업을 사용하여 프레임 내에서 얼굴과 얼굴 특징을 찾을 수 있습니다. 이 작업에서는 단일 이미지 또는 연속된 연속된 이미지에서 작동하는 ML (머신러닝) 모델 이미지 스트림입니다. 이 작업은 다음과 함께 얼굴 위치를 출력합니다. 얼굴의 주요 포인트: 왼쪽 눈, 오른쪽 눈, 코끝, 입, 왼쪽 눈의 이주 및 있습니다.

이 안내에서는 웹 및 JavaScript용 얼굴 인식기를 사용하는 방법을 보여줍니다. 있습니다. 기능, 모델, 구성에 대한 자세한 내용은 개요를 참조하세요.

코드 예

얼굴 감지기의 코드 예는 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 자체 얼굴 인식 앱을 빌드해 보았습니다. 데이터를 보고, 실행하고, 얼굴 인식기 예시 코드 수정 할 수 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명합니다. 특히 얼굴 감지기를 사용할 수 있습니다 일반적인 정보 웹 및 자바스크립트 개발 환경 설정, 자세한 내용은 웹 설정 가이드

JavaScript 패키지

얼굴 감지기 코드는 MediaPipe @mediapipe/tasks-vision를 통해 제공됩니다. NPM 패키지 다음과 같은 작업을 할 수 있습니다. 플랫폼의 안내에 따라 이러한 라이브러리를 찾아 다운로드합니다. 설정 가이드

<ph type="x-smartling-placeholder">

NPM을 통해 필수 패키지를 설치할 수 있습니다. 사용하여 다음 명령어를 실행합니다.

npm install @mediapipe/tasks-vision

콘텐츠 전송 네트워크 (CDN)를 통해 작업 코드를 가져오려는 경우 <head> 페이지에 다음 코드를 태그 사이에 다음 코드를 추가하세요.

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

모델

MediaPipe 얼굴 감지기 작업에는 다음과 호환되는 학습된 모델이 필요합니다. 태스크에 맞추는 것입니다. 얼굴 감지기에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 다음을 참조하세요. 작업 개요의 모델 섹션을 확인합니다.

모델을 선택하고 다운로드한 후 프로젝트 디렉터리에 저장합니다.

<dev-project-root>/app/shared/models/

할 일 만들기

얼굴 감지기 createFrom...() 함수 중 하나를 사용하여 다음을 수행합니다. 추론 실행을 위한 작업을 준비합니다. createFromModelPath() 사용 학습된 모델 파일에 대한 상대 또는 절대 경로를 사용하여 함수를 생성합니다. 모델이 이미 메모리에 로드된 경우 createFromModelBuffer() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다.

아래 코드 예에서는 createFromOptions() 함수를 사용하여 다음을 수행하는 방법을 보여줍니다. 작업을 설정하는 것입니다. createFromOptions 함수를 사용하면 구성 옵션이 있는 얼굴 감지기 구성에 관한 자세한 내용은 옵션은 구성 옵션을 참고하세요.

다음 코드는 커스텀 옵션:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

구성 옵션

이 작업에는 웹 및 JavaScript에 대한 다음과 같은 구성 옵션이 있습니다. 애플리케이션:

옵션 이름 설명 값 범위 기본값
option_var_1_web_js 작업의 실행 모드를 설정합니다. 두 가지 모드:

IMAGE: 단일 이미지 입력 모드입니다.

동영상: 동영상의 디코딩된 프레임 모드 입력 데이터의 라이브 스트림(예: 카메라)		 {IMAGE, VIDEO} IMAGE
minDetectionConfidence 성공으로 간주되기 위한 얼굴 인식의 최소 신뢰도 점수입니다. Float [0,1] 0.5
minSuppressionThreshold 얼굴 인식이 겹치는 것으로 간주하기 위한 최소 비최대 억제 기준점입니다. Float [0,1] 0.3

데이터 준비

얼굴 인식기는 이미지에서 지원하는 모든 형식의 얼굴을 감지할 수 있습니다. 호스트 브라우저. 이 작업은 또한 다음을 포함한 데이터 입력 전처리를 처리합니다. 크기 조정, 회전, 값 정규화 등이 있습니다. 동영상에서 얼굴을 인식하려면 다음 단계를 따르세요. API를 사용하면 타임스탬프를 사용하여 한 번에 한 프레임씩 빠르게 처리할 수 을 사용하여 동영상에서 얼굴이 나오는 시점을 파악합니다.

작업 실행

얼굴 인식기는 detect() (실행 모드 image 사용)를 사용합니다. 트리거할 detectForVideo() (실행 모드 video 포함) 메서드 제공합니다. 작업은 데이터를 처리하고, 얼굴을 감지하려고 시도하며, 결과를 보고합니다.

얼굴 감지기 detect() 및 detectForVideo() 메서드 호출이 실행됩니다. 비동기식으로 처리하고 사용자 인터페이스 스레드를 차단해야 합니다 얼굴을 인식하는 경우 각 감지는 주요 프레임의 스레드가 필요합니다. 웹 작업자를 구현하여 detect() 및 detectForVideo() 메서드가 있습니다.

다음 코드는 작업 모델을 사용하여 처리를 실행하는 방법을 보여줍니다.

이미지

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

동영상

await faceDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = faceDetector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

얼굴 감지기 작업 실행에 대한 더 완전한 구현은 다음을 참조하세요. 코드 예를 참고하세요.

결과 처리 및 표시

얼굴 감지기는 각 감지마다 얼굴 감지기 결과 객체를 생성합니다. 실행할 수 있습니다 결과 객체에는 이미지 좌표의 얼굴과 세계의 얼굴이 포함됩니다. 좌표입니다.

다음은 이 작업의 출력 데이터 예시를 보여줍니다.

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

다음 이미지는 작업 출력을 시각화한 것입니다.

경계 상자가 없는 이미지의 경우 원본 이미지를 참고하세요.

얼굴 인식기 예시 코드는 자세히 알아보려면 코드 예시