Actualmente estoy trabajando en un proyecto donde existe el requisito de componer dinámicamente múltiples fuentes de video sincronizadas en un solo lienzo. El prototipo inicial que armé cargó el video en HTMLVideoElements y luego usé requestAnimFrame (a través de la cuña de Paul Irish ) para dibujarlos en un solo lienzo y mantener la sincronización entre los diferentes elementos.
Aunque esto es funcional y el sistema puede mantener la sincronización bastante bien (tolerancia de +/- 80ms) es algo ineficiente por decir lo menos. He estado pensando en optimizaciones y un enfoque que parece bastante directo es combinar todos los medios en un solo 'video sprite' más grande y servir esto. Esto permitiría cargarlo en un único elemento de video que luego podría usarse para extraer y renderizar las áreas de interés del lado del cliente drawImage()y eliminar la necesidad de administrar la sincronización entre las fuentes.
¿Alguien más ha implementado algo similar en el pasado? Si es así, ¿qué enfoque funcionó bien para usted?