Guida al rilevamento dei punti di riferimento per il web

L'attività MediaPipe Pose Landmarker consente di rilevare i punti di riferimento dei corpi umani in un'immagine o in un video. Puoi utilizzare questa attività per identificare le posizioni chiave del corpo, analizzare la postura e classificare i movimenti. Questa attività utilizza modelli di machine learning (ML) che funzionano con singole immagini o video. L'attività genera punti di riferimento della posa del corpo in coordinate dell'immagine e in coordinate del mondo tridimensionali.

Queste istruzioni mostrano come utilizzare Pose Landmarker per app web e JavaScript. Per ulteriori informazioni sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la panoramica.

Codice di esempio

Il codice di esempio per Pose Landmarker fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti aiuta a testare questa attività e a iniziare a creare la tua app Pose Landmarker. Puoi visualizzare, eseguire e modificare l'esempio di Pose Landmarker utilizzando semplicemente il browser web.

Configurazione

Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo in modo specifico per l'utilizzo di Pose Landmarker. Per informazioni generali sulla configurazione dell'ambiente di sviluppo web e JavaScript, inclusi i requisiti della versione della piattaforma, consulta la guida alla configurazione per il web.

Pacchetti JavaScript

Il codice di Pose Landmarker è disponibile tramite il pacchetto @mediapipe/tasks-vision NPM di MediaPipe. Puoi trovare e scaricare queste librerie seguendo le istruzioni riportate nella guida alla configurazione della piattaforma Setup.

Puoi installare i pacchetti richiesti tramite NPM utilizzando il seguente comando:

npm install @mediapipe/tasks-vision

Se vuoi importare il codice dell'attività tramite un servizio di rete CDN (Content Delivery Network), aggiungi il seguente codice nel tag <head> del file HTML:

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

Modello

L'attività MediaPipe Pose Landmarker richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per Pose Landmarker, consulta la sezione Modelli della panoramica dell'attività.

Seleziona e scarica un modello, quindi archivialo nella directory del progetto:

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

Crea l'attività

Utilizza una delle funzioni createFrom...() di Pose Landmarker per preparare l'attività all'esecuzione delle inferenze. Utilizza la funzione createFromModelPath() con un percorso relativo o assoluto al file del modello addestrato. Se il modello è già caricato in memoria, puoi utilizzare il metodo createFromModelBuffer().

L'esempio di codice riportato di seguito mostra come utilizzare la funzione createFromOptions() per configurare l'attività. La funzione createFromOptions() ti consente di personalizzare Pose Landmarker con le opzioni di configurazione. Per ulteriori informazioni sulle opzioni di configurazione, consulta Opzioni di configurazione.

Il seguente codice mostra come creare e configurare l'attività con opzioni personalizzate:

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

Opzioni di configurazione

Questa attività ha le seguenti opzioni di configurazione per le applicazioni web e JavaScript:

Nome opzione Descrizione Intervallo di valori Valore predefinito
runningMode Imposta la modalità di esecuzione per l'attività. Esistono due modalità:

IMAGE: la modalità per gli input di singole immagini.

VIDEO: la modalità per i frame decodificati di un video o di un live streaming di dati di input, ad esempio da una videocamera.
{IMAGE, VIDEO} IMAGE
numPoses Il numero massimo di pose che possono essere rilevate da Pose Landmarker. Integer > 0 1
minPoseDetectionConfidence Il punteggio di attendibilità minimo per considerare riuscito il rilevamento della posa. Float [0.0,1.0] 0.5
minPosePresenceConfidence Il punteggio di attendibilità minimo del punteggio di presenza della posa punteggio nel rilevamento dei punti di riferimento della posa. Float [0.0,1.0] 0.5
minTrackingConfidence Il punteggio di attendibilità minimo per considerare riuscito il monitoraggio della posa. Float [0.0,1.0] 0.5
outputSegmentationMasks Indica se Pose Landmarker genera una maschera di segmentazione per la posa rilevata. Boolean False

Preparazione dei dati

Pose Landmarker può rilevare le pose nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input dei dati, inclusi il ridimensionamento, la rotazione e la normalizzazione dei valori. Per contrassegnare le pose nei video, puoi utilizzare l'API per elaborare rapidamente un frame alla volta, utilizzando il timestamp del frame per determinare quando le pose si verificano all'interno del video.

Esegui l'attività

Pose Landmarker utilizza i metodi detect() (con la modalità di esecuzione IMAGE) e detectForVideo() (con la modalità di esecuzione VIDEO) per attivare le inferenze. L'attività elabora i dati, tenta di contrassegnare le pose e poi riporta i risultati.

Le chiamate ai metodi detect() e detectForVideo() di Pose Landmarker vengono eseguite in modo sincrono e bloccano il thread di interposizione dell'utente. Se rilevi le pose nei frame video della videocamera di un dispositivo, ogni rilevamento blocca il thread principale. Puoi evitare questo problema implementando i web worker per eseguire i metodi detect() e detectForVideo() su un altro thread.

Il seguente codice mostra come eseguire l'elaborazione con il modello di attività:

Immagine

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

Video

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

Per un'implementazione più completa dell'esecuzione di un'attività Pose Landmarker, consulta l' esempio.

Gestisci e visualizza i risultati

Pose Landmarker restituisce un oggetto poseLandmarkerResult per ogni esecuzione di rilevamento. L'oggetto risultato contiene le coordinate per ogni punto di riferimento della posa.

Di seguito è riportato un esempio dei dati di output di questa attività:

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

L'output contiene sia le coordinate normalizzate (Landmarks) sia le coordinate del mondo (WorldLandmarks) per ogni punto di riferimento.

L'output contiene le seguenti coordinate normalizzate (Landmarks):

  • x e y: coordinate del punto di riferimento normalizzate tra 0.0 e 1.0 in base alla larghezza (x) e all'altezza (y) dell'immagine.

  • z: la profondità del punto di riferimento, con la profondità al punto medio dei fianchi come origine. Più piccolo è il valore, più vicino alla videocamera è il punto di riferimento. La magnitudine di z utilizza all'incirca la stessa scala di x.

  • visibility: la probabilità che il punto di riferimento sia visibile all'interno dell'immagine.

L'output contiene le seguenti coordinate del mondo (WorldLandmarks):

  • x, y e z: coordinate tridimensionali del mondo reale in metri, con il punto medio dei fianchi come origine.

  • visibility: la probabilità che il punto di riferimento sia visibile all'interno dell'immagine.

L'immagine seguente mostra una visualizzazione dell'output dell'attività:

Una donna in posizione di meditazione. La sua posa è evidenziata da un wireframe che indica il posizionamento degli arti e del busto

La maschera di segmentazione facoltativa rappresenta la probabilità che ogni pixel appartenga a una persona rilevata. L'immagine seguente è una maschera di segmentazione dell'output dell'attività:

Maschera di segmentazione dell&#39;immagine precedente che delinea la forma della donna

Il codice di esempio di Pose Landmarker mostra come visualizzare i risultati restituiti dall'attività, consulta l' esempio