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 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 lavorano con singole immagini o video. L'attività genera i punti di riferimento della posa del corpo nelle coordinate dell'immagine e nelle coordinate del mondo tridimensionale.

Queste istruzioni mostrano come utilizzare il rilevamento di punti di riferimento per le pose per le app web e JavaScript. Per ulteriori informazioni sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la Panoramica.

Esempio di codice

Il codice di esempio per il rilevamento di punti di riferimento in base alla posa 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 di rilevamento di punti di riferimento delle pose. Puoi visualizzare, eseguire e modificare il codice di esempio di Pose Landmarker utilizzando solo il browser web.

Configurazione

Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo specificamente per utilizzare il rilevamento di punti di riferimento di pose. 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 MediaPipe. Puoi trovare e scaricare queste librerie seguendo le istruzioni riportate nella guida alla configurazione della piattaforma.

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 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.js"
    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 memorizzalo 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 l'utilizzo della funzione createFromOptions() per configurare l'attività. La funzione createFromOptions() consente di personalizzare il landmarker di pose con 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à offre 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 dell'attività. Esistono due modi:

IMMAGINE: 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 di 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 il rilevamento della posa da considerare positivo. Float [0.0,1.0] 0.5
minPosePresenceConfidence Il punteggio di attendibilità minimo del punteggio di presenza della posa nel rilevamento dei punti di riferimento della posa. Float [0.0,1.0] 0.5
minTrackingConfidence Il punteggio di attendibilità minimo per il monitoraggio della posa da considerare riuscito. Float [0.0,1.0] 0.5
outputSegmentationMasks Indica se l'indicatore di posizione della posa restituisce una maschera di segmentazione per la posa rilevata. Boolean False

Preparazione dei dati

Il rilevamento di pose nelle immagini può essere eseguito in qualsiasi formato supportato dal browser host. L'attività gestisce anche la preelaborazione dell'input dei dati, tra cui ridimensionamento, rotazione e normalizzazione dei valori. Per identificare le pose nei video, puoi utilizzare l'API per elaborare rapidamente un fotogramma alla volta, utilizzando il timestamp del fotogramma per determinare quando si verificano le pose all'interno del video.

Esegui l'attività

Il rilevamento di punti di riferimento della posa utilizza i metodi detect() (con modalità di esecuzione IMAGE) e detectForVideo() (con modalità di esecuzione VIDEO) per attivare le inferenze. L'attività elabora i dati, tenta di rilevare i punti di riferimento delle pose e poi genera un report sui 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 pose nei frame video della fotocamera di un dispositivo, ogni rilevamento blocca il thread principale. Puoi evitarlo implementando i worker web 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à di rilevamento di punti di riferimento di pose, consulta l'esempio di codice.

Gestire e visualizzare i risultati

Il rilevamento di punti di riferimento della posa restituisce un oggetto poseLandmarkerResult per ogni esecuzione del rilevamento. L'oggetto risultato contiene le coordinate di 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 mondiali (WorldLandmarks) per ogni punto di riferimento.

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

  • x e y: coordinate di punti 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 centro dei fianchi come origine. Più basso è il valore, più il punto di riferimento è vicino alla fotocamera. La magnitudine di z utilizza approssimativamente 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 mondiali (WorldLandmarks):

  • x, y e z: coordinate tridimensionali reali in metri, con il centro 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 una posa meditativa. La posa è evidenziata da un wireframe che indica il posizionamento di arti e tronco

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 della task:

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 di codice