Guia de detecção facial para a Web

A tarefa MediaPipe Face Detector permite detectar rostos em uma imagem ou vídeo. Você pode usar para localizar rostos e características faciais em um quadro. Esta tarefa usa um de machine learning (ML) que funciona com imagens únicas ou uma fluxo de imagens. A tarefa gera localizações de rostos, junto com os seguintes principais pontos faciais: olho esquerdo, olho direito, ponta do nariz, boca, tragúdio do olho esquerdo e trágico do olho direito.

Estas instruções mostram como usar o Detector de rostos para Web e JavaScript apps. Para mais informações sobre recursos, modelos e configurações dessa tarefa, consulte a Visão geral.

Exemplo de código

O código de exemplo do Face Detector fornece uma implementação completa desse em JavaScript para sua referência. Esse código ajuda a testar a tarefa a criar seu próprio app de detecção facial. Você pode exibir, executar e Editar o exemplo de código do Detector de rostos usando apenas seu navegador da Web.

Configuração

Esta seção descreve as principais etapas para configurar seu ambiente de desenvolvimento especificamente para usar o Face Detector. Para informações gerais a configuração do seu ambiente de desenvolvimento da Web e JavaScript, incluindo requisitos de versão da plataforma, consulte Guia de configuração para a Web.

Pacotes JavaScript

O código do detector de rostos está disponível pelo @mediapipe/tasks-vision do MediaPipe. NPM (em inglês). Você pode encontre e faça o download dessas bibliotecas seguindo as instruções na plataforma Guia de configuração.

Instale os pacotes necessários por meio do NPM usando o seguinte comando:

npm install @mediapipe/tasks-vision

Se você quiser importar o código da tarefa por uma rede de fornecimento de conteúdo (CDN) adicione o seguinte código no cabeçalho <head> no seu arquivo HTML:

<!-- 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>

Modelo

A tarefa MediaPipe Face Detector requer um modelo treinado que seja compatível com esse tarefa. Para mais informações sobre os modelos treinados disponíveis para o Detector de rostos, consulte na seção de visão geral da tarefa Modelos.

Selecione e faça o download de um modelo e armazene-o no diretório do projeto:

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

Criar a tarefa

Use uma das funções createFrom...() do detector de rostos para: preparar a tarefa para executar inferências. Usar a createFromModelPath() função com um caminho relativo ou absoluto para o arquivo de modelo treinado. Se o modelo já estiver carregado na memória, é possível usar createFromModelBuffer().

O exemplo de código abaixo demonstra o uso da função createFromOptions() para para configurar a tarefa. A função createFromOptions permite personalizar Detector de rostos com opções de configuração. Para mais informações sobre configurações opções, consulte Opções de configuração.

O código a seguir demonstra como criar e configurar a tarefa com comandos opções:

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
    });

Opções de configuração

Esta tarefa tem as seguintes opções de configuração para Web e JavaScript aplicativos:

Nome da opção Descrição Intervalo de valor Valor padrão
option_var_1_web_js Define o modo de execução da tarefa. Existem duas modos:

IMAGEM: o modo para entradas de imagem única.

VÍDEO: o modo para frames decodificados de um vídeo ou em uma transmissão ao vivo de dados de entrada, como de uma câmera.
{IMAGE, VIDEO} IMAGE
minDetectionConfidence A pontuação de confiança mínima para que a detecção facial seja considerada bem-sucedida. Float [0,1] 0.5
minSuppressionThreshold O limite mínimo de supressão não máxima para que a detecção facial seja considerada sobreposta. Float [0,1] 0.3

Preparar dados

O Detector de rostos detecta rostos em imagens em qualquer formato compatível com o navegador host. A tarefa também lida com o pré-processamento de entrada de dados, incluindo redimensionamento, rotação e normalização de valores. Para detectar rostos em vídeos: você pode usar a API para processar rapidamente um frame por vez, usando a marcação de tempo do quadro para determinar quando os rostos aparecem no vídeo.

Executar a tarefa

O detector de rostos usa o detect() (com o modo de execução image) e Métodos detectForVideo() (com o modo de execução video) para acionar ou inferências. A tarefa processa os dados, tenta detectar rostos e e informa os resultados.

As chamadas para os métodos detect() e detectForVideo() do detector de rostos são executadas. de forma síncrona e bloquear a linha de execução da interface do usuário. Se você detectar rostos nos frames de vídeo da câmera de um dispositivo, cada detecção bloqueia fio Para evitar isso, implemente workers da Web para executar o detect(). e detectForVideo() em outra linha de execução.

O código a seguir demonstra como executar o processamento com o modelo de tarefas:

Imagem

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

Vídeo

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();
  });
}

Para uma implementação mais completa da execução de uma tarefa do detector de rostos, consulte o exemplo de código.

Gerenciar e exibir resultados

O detector de rostos gera um objeto de resultado do detector facial para cada detecção. correr. O objeto do resultado contém rostos em coordenadas de imagem e rostos no mundo coordenadas.

Confira abaixo um exemplo dos dados de saída desta tarefa:

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)

A imagem abaixo mostra uma visualização da saída da tarefa:

Para a imagem sem caixas delimitadoras, consulte a imagem original.

O código de exemplo do detector de rostos demonstra como exibir a resultados retornados da tarefa, consulte a exemplo de código