@zeedhi/zd-face-detection

Componente FaceDetection para Zeedhi

Instalação   |    Uso Básico   |    Propriedades   |   

O componente zd-face-detection pode ser usado para fazer detecção da presença de um rosto na câmera.

Instalação

Para instalar o pacote basta rodar o seguinte comando:
npm i @zeedhi/zd-face-detection
Com isso, dois pacotes serão instalados: o @zeedhi/zd-face-detection-common e o @zeedhi/zd-face-detection-vue.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-face-detection-vue dentro de seu arquivo de configuração zeedhi.ts

import { ZdFaceDetection } from '@zeedhi/zd-face-detection-vue';

Vue.component('ZdFaceDetection', ZdFaceDetection);

Já o pacote @zeedhi/zd-face-detection-common deve ser importado no arquivo controller do componente.

Uso Básico

Para usar, defina a propriedade component como 'ZdFaceDetection'.

{
  "name": "face-detection-example",
  "component": "ZdFaceDetection"
}

Propriedades

Nome	Tipo	Default	Descrição
cameraPaused	boolean	false	Define se a câmera está ou não pausada.
video	HTMLVideoElement		Elemento de vídeo que renderiza a imagem da câmera.
context	CanvasRenderingContext2D		Contexto 2D extraído do canvas.
canvas	HTMLCanvasElement		Elemento canvas que está sobreposto ao vídeo.
drawRect	boolean	true	Define se o retângulo deve ser desenhado sobre o vídeo.
setupDetectionApi	(() => void)		Função que sobrescreve a configuração da API de detecção de rosto.
drawFunction	((data: any, canvas: HTMLCanvasElement) => void)		Função para desenhar formas sobre o vídeo a partir dos dados de detecção.

Eventos

Nome	Parâmetros	description
onDetect	{ data: any, element: Element, component: FaceDetection }: IEventParam	Evento disparado ao detectar um rosto na câmera.
onCameraPause	{ video: HTMLVideoElement, element: Element, component: FaceDetection }: IEventParam	Evento disparado ao pausar a câmera.
onCameraUnpause	{ video: HTMLVideoElement, element: Element, component: FaceDetection }: IEventParam	Evento disparado ao despausar a câmera.

Métodos

Nome	Parâmetros	Retorno	description
getFrameBase64	{ x?: number, y?: number, width?: number, height?: number }: IFaceCoordinates	string	Retorna a imagem em base64 a partir das coordenadas passadas. Caso não sejam passadas coordenadas, ele retornará a imagem inteira.