웹용 손 랜드마크 감지 가이드

MediaPipe 손 랜드마크 작업을 사용하면 이미지에서 손의 랜드마크를 감지할 수 있습니다. 이 도움말에서는 Hand TRADEMARKer를 사용하는 방법을 설명합니다. 웹 및 자바스크립트 앱에 적합합니다

기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.

코드 예

손 랜드마크의 예제 코드는 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 먼저 손 랜드마크 감지 앱을 빌드해 보았습니다. 데이터를 보고, 실행하고, Hand TRADEMARKer 예시 코드 수정 할 수 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명합니다. 도움이 될 것입니다. 일반적인 정보 웹 및 자바스크립트 개발 환경 설정, 자세한 내용은 웹 설정 가이드

JavaScript 패키지

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

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 Hand TRADEMARKer 작업을 수행하려면 이 작업과 호환되는 학습된 모델이 필요합니다. 태스크에 맞추는 것입니다. Hand Shadower에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 다음을 참조하세요. 작업 개요의 모델 섹션을 확인합니다.

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

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

할 일 만들기

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

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

다음 코드는 커스텀 옵션:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

구성 옵션

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

옵션 이름	설명	값 범위	기본값
`runningMode`	작업의 실행 모드를 설정합니다. 두 가지 모드: IMAGE: 단일 이미지 입력 모드입니다. 동영상: 동영상의 디코딩된 프레임 모드 입력 데이터의 라이브 스트림(예: 카메라)	{`IMAGE, VIDEO`}	`IMAGE`
`numHands`	손 랜드마크 감지기에서 감지한 손의 최대 개수입니다.	`Any integer > 0`	`1`
`minHandDetectionConfidence`	손 감지를 위한 최소 신뢰도 점수입니다. 손바닥 감지 모델에서 성공적인 것으로 간주됩니다.	`0.0 - 1.0`	`0.5`
`minHandPresenceConfidence`	손에 있는 손의 존재 점수에 관한 최소 신뢰도 점수입니다. 특징 감지 모델입니다. 동영상 모드와 라이브 스트림 모드에서는 손 랜드마크 모델의 손 인기척 점수가 아래인 경우 수동 랜드마크가 손바닥 감지 모델을 트리거합니다. 그렇지 않은 경우 경량 손 추적 알고리즘은 얼굴의 위치를 후속 랜드마크 감지를 위한 시곗바늘입니다.	`0.0 - 1.0`	`0.5`
`minTrackingConfidence`	고려해야 할 손 추적의 최소 신뢰도 점수입니다. 있습니다. 주파수 안쪽에 있는 시곗바늘 사이의 경계 상자 IoU 임곗값입니다. 현재 프레임과 마지막 프레임입니다. 다음 기기의 동영상 모드 및 스트림 모드 Hand TRADEMARKer(추적 실패 시 Hand TRADEMARKer가 손을 실행함) 있습니다 그러지 않으면 손 감지를 건너뜁니다.	`0.0 - 1.0`	`0.5`

데이터 준비

Hand TRADEMARKer는 이미지에서 지원하는 손의 랜드마크를 호스트 브라우저. 이 작업은 또한 다음을 포함한 데이터 입력 전처리를 처리합니다. 크기 조정, 회전, 값 정규화 등이 있습니다. 동영상에서 손의 특징을 감지하려면 API를 사용하면 타임스탬프를 사용하여 한 번에 한 프레임씩 빠르게 처리할 수 을 사용하여 동영상에서 손 모양이 표시되는 시점을 파악합니다.

작업 실행

Hand TRADEMARKer는 detect() (실행 모드 image 사용)를 사용합니다. 트리거할 detectForVideo() (실행 모드 video 포함) 메서드 제공합니다. 작업은 데이터를 처리하고 손 랜드마크를 감지하려고 시도합니다. 결과를 보고합니다.

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

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

이미지

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

동영상

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

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

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

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

손 랜드마크 작업 실행에 관한 더 완전한 구현은 다음을 참조하세요. 코드 예를 참고하세요.

결과 처리 및 표시

손 랜드마크는 각 감지 시 손 랜드마크 결과 객체를 생성합니다. 실행할 수 있습니다 결과 객체에는 이미지 좌표, 손 지역 좌표의 랜드마크, 그리고 감지된 손의 손 모양(왼손/오른손) 있습니다.

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

HandLandmarkerResult 출력에는 세 가지 구성요소가 포함됩니다. 각 구성 요소는 배열이며, 각 요소에는 감지된 손 하나에 대한 다음과 같은 결과가 포함됩니다.

잘 쓰는 손

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

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

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

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  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)

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

손 랜드마크 기호 예제 코드는 자세히 알아보려면 코드 예시