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.
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.
Para usar, defina a propriedade component como 'ZdFaceDetection'.
{
"name": "face-detection-example",
"component": "ZdFaceDetection"
}
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. |
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. |
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. |