A tarefa Detector de rostos do MediaPipe permite detectar rostos em uma imagem ou um vídeo. Você pode usar essa tarefa para localizar rostos e características faciais em um frame. Essa tarefa usa um modelo de machine learning (ML) que funciona com imagens únicas ou um fluxo contínuo de imagens. A tarefa mostra localizações de rostos, com os seguintes pontos-chave faciais: olho esquerdo, olho direito, ponta do nariz, boca, tradição do olho esquerdo e trágico do olho direito.
Estas instruções mostram como usar o Face Detector em apps da Web e JavaScript. Para mais informações sobre os recursos, modelos e opções de configuração dessa tarefa, consulte a Visão geral.
Exemplo de código
O código de exemplo do Face Detector fornece uma implementação completa dessa tarefa em JavaScript. Esse código ajuda você a testar essa tarefa e começar a criar seu próprio app de detecção facial. É possível ver, executar e editar o exemplo de código do Face Detector usando apenas seu navegador da Web.
Configuração
Nesta seção, descrevemos as principais etapas para configurar seu ambiente de desenvolvimento especificamente para usar o Face Detector. Para informações gerais sobre a configuração do ambiente de desenvolvimento Web e JavaScript, incluindo requisitos da versão da plataforma, consulte o Guia de configuração para Web.
Pacotes JavaScript
O código do detector facial está disponível no pacote @mediapipe/tasks-vision
NPM do MediaPipe. É possível
encontrar e fazer o download dessas bibliotecas seguindo as instruções no
Guia de configuração da plataforma.
É possível instalar 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 um serviço da rede de fornecimento de conteúdo (CDN), adicione o seguinte código à tag <head> no 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 do detector facial do MediaPipe requer um modelo treinado compatível com essa tarefa. Para mais informações sobre os modelos treinados disponíveis para o Face Detector, consulte a seção Modelos de visão geral da tarefa.
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 facial para
preparar a tarefa para executar inferências. Use a função createFromModelPath() com um caminho relativo ou absoluto para o arquivo de modelo treinado.
Se o modelo já estiver carregado na memória, use o
método createFromModelBuffer().
O exemplo de código abaixo demonstra o uso da função createFromOptions() para configurar a tarefa. A função createFromOptions permite personalizar o
Face Detector com opções de configuração. Para mais informações sobre as opções
de configuração, consulte Opções de configuração.
O código abaixo demonstra como criar e configurar a tarefa com opções personalizadas:
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
Essa tarefa tem as seguintes opções de configuração para aplicativos da Web e JavaScript:
| 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. Há dois
modos: IMAGE: o modo para entradas de imagem única. VIDEO: 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 pode detectar rostos em imagens em qualquer formato compatível com o navegador do host. A tarefa também lida com o pré-processamento da 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 o carimbo de data/hora do frame para determinar quando os rostos aparecem no vídeo.
Executar a tarefa
O Face Detector usa os métodos detect() (com modo de execução image) e detectForVideo() (com modo de execução video) para acionar inferências. A tarefa processa os dados, tenta detectar rostos e,
em seguida, informa os resultados.
As chamadas para os métodos detect() e detectForVideo() do Face Detector são executadas de forma síncrona e bloqueiam a linha de execução da interface do usuário. Se você detectar rostos
em frames de vídeo na câmera de um dispositivo, cada detecção vai bloquear a linha de execução
principal. É possível evitar isso implementando workers da Web para executar os métodos detect() e detectForVideo() em outra linha de execução.
O código a seguir demonstra como executar o processamento com o modelo de tarefa:
Imagem
const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);
Video
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 conferir uma implementação mais completa da execução de uma tarefa do Face Detector, consulte o exemplo de código.
Gerenciar e mostrar resultados
O detector facial gera um objeto de resultado do detector facial para cada execução de detecção. O objeto de resultado contém rostos em coordenadas de imagem e rostos em coordenadas mundiais.
Veja a seguir um exemplo dos dados de saída dessa 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 Face Detector mostra como exibir os resultados retornados da tarefa. Consulte o exemplo de código.