웹용 동작 인식 가이드

MediaPipe 동작 인식기 작업을 통해 실시간으로 손동작을 인식할 수 있습니다. 인식된 손동작 결과와 감지된 손입니다. 다음 안내에서는 동작 인식기를 사용하는 방법을 보여줍니다. 웹 및 자바스크립트 앱에 적합합니다

이 작업의 동작을 확인하려면 demo 기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.

코드 예

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

설정

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

JavaScript 패키지

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

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

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

npm install @mediapipe/tasks-vision

콘텐츠 전송 네트워크 (CDN)를 통해 작업 코드를 가져오려는 경우 서비스에서 다음 코드를 HTML 파일의 <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 함수를 사용하면 구성 옵션이 있는 동작 인식기 구성에 관한 자세한 내용은 옵션은 구성 옵션을 참고하세요.

다음 코드는 커스텀 옵션:

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

구성 옵션

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

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

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

동영상: 동영상의 디코딩된 프레임 모드 입력 데이터의 라이브 스트림(예: 카메라)		 {IMAGE, VIDEO} IMAGE
num_hands 감지 가능한 최대 손 개수 GestureRecognizer Any integer > 0 1
min_hand_detection_confidence 손 감지를 위한 최소 신뢰도 점수입니다. 손바닥 감지 모델에서 성공적인 것으로 간주됩니다. 0.0 - 1.0 0.5
min_hand_presence_confidence 손에 있는 손 존재 점수의 최소 신뢰도 점수입니다. 특징 감지 모델입니다. 동작 인식기의 동영상 모드와 라이브 스트림 모드에서, 손 랜드마크 모델의 손 인기척 점수가 아래인 경우 손바닥 감지 모델을 트리거합니다. 그렇지 않은 경우 경량 손 추적 알고리즘을 사용하여 후속 랜드마크 감지를 위한 시곗바늘입니다. 0.0 - 1.0 0.5
min_tracking_confidence 고려해야 할 손 추적의 최소 신뢰도 점수입니다. 있습니다. 이것은 네트워크 안의 시곗바늘 사이의 경계 상자 IoU 임곗값입니다. 현재 프레임과 마지막 프레임입니다. 다음 기기의 동영상 모드 및 스트림 모드 동작 인식기, 추적에 실패하면 동작 인식기가 손을 트리거함 있습니다 그렇지 않으면 손 감지를 건너뜁니다. 0.0 - 1.0 0.5
canned_gestures_classifier_options 미리 준비된 동작 분류기 동작을 구성하는 옵션입니다. 미리 준비된 동작은 ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
입니다.
  • 표시 이름 언어: TFLite 모델 메타데이터를 통해 지정된 표시 이름에 사용할 언어입니다(있는 경우).
  • 최대 결과: 반환할 최고 점수 분류 결과의 최대 개수입니다. < 0이면 사용 가능한 모든 결과가 반환됩니다.
  • 점수 임곗값: 이 점수보다 낮으면 결과가 거부되는 점수입니다. 0으로 설정하면 사용 가능한 모든 결과가 반환됩니다.
  • 카테고리 허용 목록: 카테고리 이름의 허용 목록입니다. 비어 있지 않으면 카테고리가 이 세트에 없는 분류 결과가 필터링됩니다. 차단 목록과 상호 배타적입니다.
  • 카테고리 차단 목록: 카테고리 이름의 차단 목록입니다. 비어 있지 않으면 카테고리가 이 집합에 속한 분류 결과가 필터링됩니다. 허용 목록과 상호 배타적입니다.
    		•
    • 표시 이름 언어: any string
    • 최대 결과 수: any integer개
    • 점수 기준: 0.0-1.0
    • 카테고리 허용 목록: vector of strings
    • 카테고리 차단 목록: vector of strings
    • 표시 이름 언어: "en"
    • 최대 결과 수: -1개
    • 점수 기준: 0
    • 카테고리 허용 목록: 비어 있음
    • 카테고리 차단 목록: 비어 있음
    custom_gestures_classifier_options 맞춤 동작 분류 기준 동작을 구성하는 옵션입니다.
  • 표시 이름 언어: TFLite 모델 메타데이터를 통해 지정된 표시 이름에 사용할 언어입니다(있는 경우).
  • 최대 결과: 반환할 최고 점수 분류 결과의 최대 개수입니다. < 0이면 사용 가능한 모든 결과가 반환됩니다.
  • 점수 임곗값: 이 점수보다 낮으면 결과가 거부되는 점수입니다. 0으로 설정하면 사용 가능한 모든 결과가 반환됩니다.
  • 카테고리 허용 목록: 카테고리 이름의 허용 목록입니다. 비어 있지 않으면 카테고리가 이 세트에 없는 분류 결과가 필터링됩니다. 차단 목록과 상호 배타적입니다.
  • 카테고리 차단 목록: 카테고리 이름의 차단 목록입니다. 비어 있지 않으면 카테고리가 이 집합에 속한 분류 결과가 필터링됩니다. 허용 목록과 상호 배타적입니다.
    		•
    • 표시 이름 언어: any string
    • 최대 결과 수: any integer개
    • 점수 기준: 0.0-1.0
    • 카테고리 허용 목록: vector of strings
    • 카테고리 차단 목록: vector of strings
    • 표시 이름 언어: "en"
    • 최대 결과 수: -1개
    • 점수 기준: 0
    • 카테고리 허용 목록: 비어 있음
    • 카테고리 차단 목록: 비어 있음

    데이터 준비

    동작 인식기는 호스트 브라우저. 이 작업은 또한 다음을 포함한 데이터 입력 전처리를 처리합니다. 크기 조정, 회전, 값 정규화 등이 있습니다. 동영상에서 동작을 인식하려면 API를 사용하여 한 번에 한 프레임씩 빠르게 처리할 수 있으며, 이때 프레임을 설정하여 동영상 내에서 동작이 발생하는 시점을 결정합니다.

    작업 실행

    동작 인식기는 recognize() (실행 모드 'image' 포함)를 사용합니다. 트리거할 recognizeForVideo() (실행 모드 'video' 포함) 메서드 제공합니다. 데이터를 처리하고 손을 인식하려고 시도합니다. 동작을 수행한 다음 결과를 보고합니다.

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

    이미지

    const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);

    동영상

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

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

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

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

    동작 인식기 recognize() 및 recognizeForVideo() 메서드 호출이 실행됩니다. 비동기식으로 처리하고 사용자 인터페이스 스레드를 차단해야 합니다 동작을 인식하는 경우 동영상 프레임을 수신하면 각 인식은 기본 프레임의 스레드가 필요합니다. 웹 작업자를 구현하여 recognize() 및 recognizeForVideo() 메서드가 있습니다.

    동작 인식기 작업 실행을 좀 더 완전히 구현하려면 다음을 참조하세요. 코드 예를 참고하세요.

    결과 처리 및 표시

    동작 인식기는 각 동작에 대한 동작 감지 결과 객체를 생성합니다. 실행할 수도 있습니다 결과 객체에는 이미지 좌표에 손 랜드마크가 포함되어 있습니다. 세계 좌표의 손 모양, 잘 쓰는 손(왼손/오른손), 손 인식된 손의 동작 카테고리를 표시합니다.

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

    결과 GestureRecognizerResult는 구성요소 4개를 포함하며 각 구성요소는 배열입니다. 여기서 각 요소는 감지된 손 한 개의 결과를 포함합니다.

    • 잘 쓰는 손

      잘 쓰는 손은 감지된 손이 왼손인지 오른손인지를 나타냅니다.

    • 동작

      감지된 손의 인식된 동작 카테고리입니다.

    • 명소

      손 모양 랜드마크는 21개이며 각각 x, y, z 좌표로 구성됩니다. 이 x 및 y 좌표는 이미지 너비에 의해 [0.0, 1.0] 으로 정규화되고 각각 높이를 정합니다. z 좌표는 랜드마크 깊이를 나타내며 원점이 되는 손목의 깊이입니다. 값이 작을수록 카메라에 전달합니다. z의 크기는 x

    • 세계의 명소

      21개의 손 모양 랜드마크도 세계 좌표로 표시됩니다. 각 랜드마크 x, y, z로 구성되며 이는 실제 3D 좌표를 나타냅니다. 미터를 이동할 수 있습니다.

    GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

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

    동작 인식기 작업을 만드는 좀 더 완전한 구현은 다음을 참고하세요. 코드 예를 참고하세요.