> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/docs.facephi-pt-br/sdks/sdk-web/componentes/video-recording-video-grabacion.md). # Gravação de Vídeo O `facephi-video-provider` é um componente web importante do SDK Web, que permite a gravação de vídeo em tempo real do processo de onboarding ou autenticação. É compatível com modos de transmissão em tempo real (`ws`, `sse`) bem como um modo de gravação local apenas no navegador (`serviceType: 'local'`). Como provedor, você deve envolver os componentes que deseja gravar. Tipo: `HTMLFacephiVideoProviderElement` *** ## Como Funciona O `facephi-video-provider` fornece uma gravação de vídeo fluida ao capturar as interações e processos durante a autenticação ou onboarding. Envolvê-lo ao redor dos componentes garante que todas as atividades sejam incluídas na gravação. *** ## Tipos de gravação A gravação pode ser realizada de diferentes formas: ### Gravação remota (por padrão) A ferramenta usará serviços WebSocket (`ws`) ou Server-Sent Events (`sse`) para a gravação. {% hint style="info" %} Por padrão, o serviço WebSocket (`ws`). {% endhint %} #### Exemplo de Integração Os widgets devem ser integrados dentro da tag Video Provider assim que ela for carregada completamente. ```jsx { if (!event.detail) { // Iniciar fluxo de widgets Facephi } }} /> ``` O Video Provider deve ser interrompido assim que o processo de extração for concluído. ```jsx { await video.stopVideo(); }} /> ``` Para obter o vídeo, consulte a seção de [resultados do Video Provider](/docs.facephi-pt-br/sdks/sdk-web/componentes/video-recording-video-grabacion/resultados.md#grabacion-local). ### Gravação local O componente `` suporta um modo de **gravação local** que captura vídeo totalmente no navegador usando a API MediaRecorder. Ao contrário dos tipos de serviço padrão WebSocket (`ws`) ou Server-Sent Events (`sse`), a gravação local não transmite vídeo para um servidor externo durante a captura. Em vez disso, o vídeo gravado é mantido no lado do cliente e retornado como um `Blob` quando a gravação é interrompida. O vídeo gravado ainda é enviado automaticamente pelo pipeline de rastreamento do SDK (`trackingAsset` com tipo MIME `video/mp4`), portanto, ele se integra perfeitamente ao processamento posterior. Assim que `` é renderizado no DOM com `settings.serviceType` definido como `'local'`, o componente **inicia imediatamente o pipeline de gravação**: inicializa a pilha de câmeras, chama `getUserMedia` e o navegador solicita ao usuário as permissões necessárias (câmera e microfone quando `audioEnabled` es `true`). Não é necessária uma chamada de início adicional: renderizar o provedor é suficiente para começar a gravação. O vídeo gerado pode ser obtido chamando o método `stopVideo()` do componente, que retornará um `Blob`. #### Compatibilidade do navegador A gravação local se baseia na **API MediaRecorder**, que é compatível com todos os navegadores modernos (Chrome, Firefox, Safari 14.5+, Edge). O componente seleciona automaticamente o melhor codec de vídeo disponível para o navegador atual. Em **Chrome/Edge 94+**, o componente usa [Insertable Streams](https://developer.chrome.com/docs/capabilities/web-apis/mediastreamtrack-insertable-media-processing) para um processamento de quadros de maior fidelidade (por exemplo, sobreposições de temporizador) sem uma camada intermediária de canvas. Isso é detectado e usado automaticamente sem necessidade de configuração. #### Permissões O usuário deve conceder permissões de **câmera**. Se `audioEnabled` es `true` (o valor padrão), também é necessária permissão de **microfone**. O componente trata internamente a chamada `getUserMedia`. #### Configuração do proxy Se você estiver encaminhando solicitações de SDK por meio de um proxy de encaminhamento, deve configurar a propriedade `proxy` en `` para que o módulo de câmera possa carregar seus ativos necessários. Consulte a [propriedade `proxy` do provedor de SDK](/docs.facephi-pt-br/sdks/sdk-web/componentes/sdk-provider/propiedades/proxy.md) e o [guia de configuração do proxy](/docs.facephi-pt-br/sdks/sdk-web/introduccion/configuracion-adicional.md#guia-de-configuracion-de-proxy) para obter detalhes sobre a configuração. #### Licenciamento O modo de gravação local **não requer uma licença de gravação de vídeo**. Quando `serviceType` está definido como `"local"`, o componente ignora a validação de licença exigida pelos modos `ws` e `sse`. #### Exemplo de Integração Os widgets devem ser integrados dentro da tag Video Provider assim que ela for carregada completamente. ```jsx ``` Para obter o vídeo, consulte a seção de [resultados do Video Provider](/docs.facephi-pt-br/sdks/sdk-web/componentes/video-recording-video-grabacion/resultados.md#grabacion-local). ### Diferenças entre os modos WS e SSE | Aspecto | Local | WS / SSE | | ---------------------------- | ------------------------------------------------------------- | ------------------------------------- | | Infraestrutura do servidor | Não é necessária para gravação | Requer `baseUrl` e `apiKey` | | Licença de gravação de vídeo | Não requerida | Obrigatória | | Saída de vídeo | `Blob` retornado do lado do cliente por meio de `stopVideo()` | Transmitido ao servidor em tempo real | | Seleção de codec | Automática (melhor disponível: VP8, VP9, H.264, AV1) | Determinada pelo servidor | | Sobreposição de temporizador | Opcional (`videoTimer: true`) | Não disponível | | Troca de câmera | Suportado (gravação contínua mantida) | Suportado | | Integração de rastreamento | Automática (enviada após `stopVideo()`) | Automática (em tempo real) | ### Solução de problemas #### Permissão de câmera negada Se o usuário negar o acesso à câmera ou ao microfone, o componente emitirá um erro por meio do canal de erros do SDK (`SDKErrorType.VideoProviderError`). Escute o evento `emitError` en `` para tratá-lo em sua aplicação. #### Tipo MIME não suportado Em navegadores muito antigos que não suportam nenhum dos codecs testados (VP8, VP9, H.264, AV1, H.265), `MediaRecorder` recorrerá ao codec padrão do navegador. Se nenhum codec for suportado, um erro de gravação será emitido. #### Falha ao trocar de câmera Quando `cameraSwitch` está em `true` e a solicitação inicial de câmera falhar (comum em dispositivos com permissões restritas), o componente tentará novamente automaticamente com `cameraSwitch` desativado. Se ambas as tentativas falharem, um erro será emitido. Verifique as mensagens `[LocalRecording]` no console do navegador. #### Registro de depuração Configure `showLog={true}` en `` para habilitar uma saída detalhada no console. Procure mensagens com o prefixo `[LocalRecorder]` para rastrear o ciclo de vida da gravação: * Inicialização do mecanismo (resolução, FPS, qualidade, seleção do canal) * Início da gravação (codec, bitrate, método de agendamento de quadros) * Eventos de troca de câmera * Geração de vídeo (tamanho do arquivo, duração, número de fragmentos) * Desinicialização do mecanismo *** ## Configuração O componente Video Provider é configurado por meio de propriedades JSX ou JavaScript. {% content-ref url="/pages/c51e2958e975bb86b7491fde1963a5b16df62ff6" %} [Propriedades](/docs.facephi-pt-br/sdks/sdk-web/componentes/video-recording-video-grabacion/propiedades.md) {% endcontent-ref %} O componente Video Provider emitirá eventos durante seu ciclo de vida. {% content-ref url="/pages/818f2a1e57f34eeae0caed6313ccc18886f88f97" %} [Eventos](/docs.facephi-pt-br/sdks/sdk-web/componentes/video-recording-video-grabacion/eventos.md) {% endcontent-ref %} Algumas funções são fornecidas com o componente para oferecer utilitários adicionais. {% content-ref url="/pages/ec045859799e802d77cc7575ed3b0b12fa51236a" %} [Métodos](/docs.facephi-pt-br/sdks/sdk-web/componentes/video-recording-video-grabacion/metodos.md) {% endcontent-ref %} Como obter o vídeo gravado da extração após o processo de extração. {% content-ref url="/pages/c9e97665722b3f786c9e7e4a2152cda077e552d7" %} [Resultados](/docs.facephi-pt-br/sdks/sdk-web/componentes/video-recording-video-grabacion/resultados.md) {% endcontent-ref %} *** #### Benefícios de usar o Video Provider * Melhoria de desempenho em processos de vídeo. * Configuração avançada de parâmetros técnicos. * Compatibilidade ideal com dispositivos e navegadores. *** ### Quando usar o Video Provider? * Sempre que você implementar VideoID em sua aplicação. * Quando precisar controlar ou personalizar a experiência de vídeo. * Para garantir compatibilidade técnica em ambientes diversos. *** ### Próximos passos Consulte: * Exemplos de uso do Video Provider. * Opções avançadas de configuração. * Boas práticas para processos de vídeo.