> 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/sdks/sdk-web/componentes/video-recording-video-grabacion.md). # Video grabación El `facephi-video-provider` es un componente web clave del SDK Web, que permite la grabación en tiempo real en video del proceso de onboarding o autenticación. Es compatible con modos de transmisión en tiempo real (`ws`, `sse`) así como un modo de grabación local solo para navegador (`serviceType: 'local'`). Como proveedor, debe envolver los componentes que desees grabar. Tipo: `HTMLFacephiVideoProviderElement` *** ## Cómo Funciona El `facephi-video-provider` proporciona una grabación de video fluida al capturar las interacciones y procesos durante la autenticación o incorporación. Envolverlo alrededor de los componentes asegura que todas las actividades se incluyan en la grabación. *** ## Tipos de grabación La grabación puede realizarse de diferentes formas: ### Grabación remota (por defecto) La herramienta utilizará servicios WebSocket (`ws`) o Server-Sent Events (`sse`) para la grabación. {% hint style="info" %} Por defecto se utilizará el servicio WebSocket (`ws`). {% endhint %} #### Ejemplo de Integración Los widgets deben integrarse dentro de la etiqueta Video Provider una vez que esta se haya cargado por completo. ```jsx { if (!event.detail) { // Iniciar flujo de widgets Facephi } }} /> ``` El Video Provider debe ser detenido una vez que el proceso de extracción se haya completado. ```jsx { await video.stopVideo(); }} /> ``` Para la obtención del video consulta la sección de [resultados de video provider](/sdks/sdk-web/componentes/video-recording-video-grabacion/resultados.md#grabacion-local). ### Grabación local El componente `` admite un modo de **grabación local** que captura video completamente en el navegador utilizando la API MediaRecorder. A diferencia de los tipos de servicio predeterminados WebSocket (`ws`) o Server-Sent Events (`sse`), la grabación local no transmite video a un servidor externo durante la captura. En su lugar, el video grabado se mantiene del lado del cliente y se devuelve como un `Blob` cuando la grabación se detiene. El video grabado aún se envía automáticamente a través del pipeline de seguimiento del SDK (`trackingAsset` con tipo MIME `video/mp4`), por lo que se integra perfectamente con el procesamiento posterior. Una vez que `` se renderiza en el DOM con `settings.serviceType` configurado en `'local'`, el componente **comienza inmediatamente el pipeline de grabación**: inicializa la pila de cámaras, llama a `getUserMedia` y el navegador solicita al usuario los permisos requeridos (cámara y micrófono cuando `audioEnabled` es `true`). No se necesita una llamada de inicio adicional: renderizar el proveedor es suficiente para comenzar la grabación. El video generado puede obtenerse llamando al método `stopVideo()` del componente, el cuál devolverá un `Blob`. #### Compatibilidad del navegador La grabación local se basa en la **API de MediaRecorder**, que es compatible con todos los navegadores modernos (Chrome, Firefox, Safari 14.5+, Edge). El componente selecciona automáticamente el mejor códec de video disponible para el navegador actual. En **Chrome/Edge 94+**, el componente utiliza [Insertable Streams](https://developer.chrome.com/docs/capabilities/web-apis/mediastreamtrack-insertable-media-processing) para un procesamiento de fotogramas de mayor fidelidad (por ejemplo, superposiciones de temporizador) sin una capa intermedia de lienzo. Esto se detecta y usa automáticamente sin necesidad de configuración. #### Permisos El usuario debe otorgar permisos de **cámara**. Si `audioEnabled` es `true` (el valor predeterminado), también se requiere permiso de **micrófono**. El componente maneja internamente la llamada `getUserMedia`. #### Configuración del proxy Si estás canalizando solicitudes de SDK a través de un proxy de reenvío, debes configurar la propiedad `proxy` en `` para que el módulo de cámara pueda cargar sus activos necesarios. Consulta la [propiedad `proxy` del proveedor de SDK](/sdks/sdk-web/componentes/sdk-provider/propiedades/proxy.md) y la [guía de configuración del proxy](/sdks/sdk-web/introduccion/configuracion-adicional.md#guia-de-configuracion-de-proxy) para obtener detalles sobre la configuración. #### Licenciamiento El modo de grabación local **no requiere una licencia de grabación de video**. Cuando `serviceType` está configurado como `"local"`, el componente omite la validación de licencia que requieren los modos `ws` y `sse`. #### Ejemplo de Integración Los widgets deben integrarse dentro de la etiqueta Video Provider una vez que esta se haya cargado por completo. ```jsx ``` Para la obtención del video consulta la sección de [resultados de video provider](/sdks/sdk-web/componentes/video-recording-video-grabacion/resultados.md#grabacion-local). ### Diferencias entre los modos WS y SSE | Aspecto | Local | WS / SSE | | ------------------------------ | ----------------------------------------------------------- | -------------------------------------- | | Infraestructura del servidor | No se requiere para grabación | Requiere `baseUrl` y `apiKey` | | Licencia de grabación de video | No requerida | Requerida | | Salida de video | `Blob` devuelto del lado del cliente mediante `stopVideo()` | Transmitido al servidor en tiempo real | | Selección de códec | Automática (mejor disponible: VP8, VP9, H.264, AV1) | Determinada por el servidor | | Superposición de temporizador | Opcional (`videoTimer: true`) | No disponible | | Cambio de cámara | Soportado (grabación continua mantenida) | Soportado | | Integración de seguimiento | Automática (enviada después de `stopVideo()`) | Automática (en tiempo real) | ### Solución de problemas #### Permiso de cámara denegado Si el usuario niega el acceso a la cámara o al micrófono, el componente emite un error a través del conducto de errores del SDK (`SDKErrorType.VideoProviderError`). Escucha el evento `emitError` en `` para gestionarlo en tu aplicación. #### Tipo MIME no soportado En navegadores muy antiguos que no soportan ninguno de los codecs probados (VP8, VP9, H.264, AV1, H.265), `MediaRecorder` recurrirá al codec predeterminado del navegador. Si no se soporta ningún codec, se emitirá un error de grabación. #### Falla al cambiar de cámara Cuando `cameraSwitch` está en `true` y la solicitud inicial de cámara falla (común en dispositivos con permisos restringidos), el componente automáticamente reintentará con `cameraSwitch` desactivado. Si ambos intentos fallan, se emite un error. Verifica los mensajes `[LocalRecording]` en la consola del navegador. #### Registro de depuración Configura `showLog={true}` en `` para habilitar una salida de consola detallada. Busca mensajes con el prefijo `[LocalRecorder]` para rastrear el ciclo de vida de la grabación: * Inicialización del motor (resolución, FPS, calidad, selección del conducto) * Inicio de grabación (codec, bitrate, método de programación de cuadros) * Eventos de cambio de cámara * Generación de video (tamaño del archivo, duración, número de fragmentos) * Desinicialización del motor *** ## Configuración El componente Video Provider se configura mediante propiedades JSX o JavaScript. {% content-ref url="/pages/iRKEsLNGhbPXdVl8NuWK" %} [Propiedades](/sdks/sdk-web/componentes/video-recording-video-grabacion/propiedades.md) {% endcontent-ref %} El componente Video Provider emitirá eventos durante su ciclo de vida. {% content-ref url="/pages/s346TrmEV5rHD3OiJLuG" %} [Eventos](/sdks/sdk-web/componentes/video-recording-video-grabacion/eventos.md) {% endcontent-ref %} Se proporcionan algunas funciones con el componente para ofrecer utilidades adicionales. {% content-ref url="/pages/sWrihs5m0dw2qhJQ6m3I" %} [Métodos](/sdks/sdk-web/componentes/video-recording-video-grabacion/metodos.md) {% endcontent-ref %} Cómo obtener el video grabado de la extracción después del proceso de extracción. {% content-ref url="/pages/AZqekHpGFyb9JWbBB4LZ" %} [Resultados](/sdks/sdk-web/componentes/video-recording-video-grabacion/resultados.md) {% endcontent-ref %} *** #### Beneficios de utilizar Video Provider * Mejora de rendimiento en procesos de video. * Configuración avanzada de parámetros técnicos. * Compatibilidad óptima con dispositivos y navegadores. *** ### ¿Cuándo usar Video Provider? * Siempre que implementes VideoID en tu aplicación. * Cuando necesites controlar o personalizar la experiencia de video. * Para garantizar compatibilidad técnica en entornos diversos. *** ### Próximos pasos Consulta: * Ejemplos de uso de Video Provider. * Opciones avanzadas de configuración. * Buenas prácticas para procesos de video.