KYC: Grabación y División de Videos con React FFmpeg y MediaRecorder API

Resumen del proyecto

Diseñé y desarrollé un sistema web que registra de principio a fin el proceso de verificación biométrica facial durante KYC Know Your Customer y lo segmenta en pasos con marcas de tiempo precisas para su almacenamiento y auditoría. La solución se implementó con React, TypeScript, FFmpeg wasm y MediaRecorder API, resolviendo el reto de procesar video en tiempo real directamente en el navegador.

Arquitectura del sistema y funciones clave

Grabación de video: el flujo comienza al iniciar la misión KYC, capturando cámara y micrófono con MediaRecorder API, almacenando fragmentos de datos de manera segura y continua hasta la finalización del proceso. Paralelamente, se mantiene una estructura de timeline que guarda por cada paso el índice, nombre, hora de inicio, hora de fin y duración, garantizando una segmentación exacta posterior.

Preparación de FFmpeg en el navegador: para habilitar SharedArrayBuffer y ejecutar FFmpeg wasm con rendimiento estable, configuré los encabezados de seguridad COOP y COEP en el servidor de desarrollo y producción. La carga de FFmpeg se realiza de forma diferida y desde recursos empaquetados en blobs en tiempo de ejecución para evitar bloqueos por CORS y mejorar tiempos de arranque.

Pipeline de corte y procesado: una vez completada la grabación, el video original se escribe en el sistema de archivos virtual de FFmpeg. Mediante un bucle sobre el timeline, se aplica por cada paso un recorte preciso con los parámetros de desplazamiento y duración, aprovechando copia directa de códecs cuando es viable para acelerar el proceso y mantener la calidad. Al finalizar cada corte, se extrae el archivo resultante como blob listo para envío o persistencia.

Conversión de tiempos: una utilidad transforma milisegundos en el formato horas minutos segundos milisegundos, asegurando compatibilidad con los comandos de FFmpeg y la correcta alineación de los segmentos.

Pruebas, errores y soluciones

Políticas de seguridad y cabeceras: la relación entre COOP y COEP resultó determinante para habilitar FFmpeg wasm y otros módulos de alto rendimiento en el navegador. Una configuración incorrecta interrumpe el acceso a memoria compartida y bloquea recursos de terceros.

OpenCV js y recursos externos: al cargar OpenCV js desde CDN surgió un bloqueo por políticas de incrustación. La solución fue servir la librería de forma local, manteniendo integridad de cabeceras y evitando dependencias externas potencialmente incompatibles.

Evitar cargas duplicadas: para impedir que un mismo video se suba más de una vez, se añadió control de estado y referencias inmutables, comparando blobs y marcando la subida como completada. Esto reduce costes de red y elimina inconsistencias en el backend.

Memoria y rendimiento: al tratar videos largos, la gestión de recursos es crítica. Se implementó eliminación proactiva de ficheros temporales en el FS virtual de FFmpeg, paralelización robusta con Promise allSettled para subidas por lotes y una rutina de limpieza al finalizar cada proceso, previniendo fugas de memoria.

Tecnologías y herramientas

Frontend: React 19 y TypeScript para componentes tipados, tanstack react query para estado de servidor, tanstack react router para enrutamiento, Styled Components y TailwindCSS para estilos consistentes y productivos.

Procesamiento de video: MediaRecorder API para captura en tiempo real, FFmpeg wasm para recorte y transcodificación en cliente, OpenCV js y MediaPipe para visión por computador y seguimiento facial cuando el caso lo requiere.

Tooling: Vite como bundler y servidor de desarrollo, Jest para pruebas unitarias, SonarQube para análisis de calidad y Sentry para monitorización de errores en producción.

Resultados y aprendizajes

Logros del proyecto: procesamiento de video en tiempo real directamente en navegador, segmentación cliente con FFmpeg wasm, resolución de retos de seguridad relacionados con SharedArrayBuffer y políticas de origen cruzado, y tratamiento eficiente de ficheros grandes con gestión estricta de memoria.

Lecciones clave: entender a fondo las políticas de seguridad web y las restricciones de carga de recursos externos, usar WebAssembly para acercar rendimiento nativo al navegador, optimizar tareas asíncronas con estrategias de tolerancia a fallos y realizar una limpieza de recursos rigurosa para evitar degradaciones con el tiempo.

Líneas de mejora futuras

Web Workers para descargar el hilo principal durante el recorte, subida progresiva por chunks para ficheros de gran tamaño, compresión en tiempo real mientras se graba para reducir peso sin perder calidad perceptual y soporte offline mediante Service Workers para entornos con conectividad inestable.

Valor para negocio y propuesta de Q2BSTUDIO

En Q2BSTUDIO, empresa de desarrollo de software, aplicaciones a medida y especialistas en inteligencia artificial, ciberseguridad y mucho más, transformamos necesidades de verificación KYC en soluciones escalables y seguras que se integran con procesos de cumplimiento y analítica. Este proyecto demuestra cómo combinar captura, segmentación y análisis en cliente para reducir costes de infraestructura, mejorar la experiencia del usuario y reforzar la evidencia de cumplimiento.

Nuestro equipo diseña y construye plataformas de software a medida y aplicaciones a medida para identidad digital, orquestación de flujos KYC y automatización de procesos, con integración en servicios cloud aws y azure, servicios inteligencia de negocio y cuadros de mando con power bi. Si tu organización busca acelerar la adopción de ia para empresas, desplegar agentes IA o elevar la protección con prácticas de ciberseguridad y pentesting, podemos ayudarte a llegar a producción con garantías.

Conoce cómo abordamos proyectos de alto impacto con un enfoque end to end visitando nuestra página de software a medida o explora nuestras capacidades en inteligencia artificial para potenciar verificación biométrica, scoring y automatización avanzada en tu negocio.

Palabras clave integradas

aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi