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