Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I'm currently working on a project where there is a requirement to dynamically composite multiple synchronised video sources onto a single canvas. The initial prototype I put together loaded the video into HTMLVideoElements and then used requestAnimFrame (via Paul Irish's shim) to draw these onto a single canvas and maintain sync between the different elements.

Although this is functional and the system can hold sync fairly well (+/- 80ms tolerance) it is somewhat inefficient to say the least. I've been thinking about optimisations and one approach that seems pretty straight forward is to combine all the media into a single larger 'video sprite' and serve this. This would allow it to be load into a single video element which could then be used extract and render the areas of interest client side using drawImage() and remove the need to manage sync between sources.

Has anyone else implemented something similar in the past? If so what approach worked well for you?

share|improve this question
1  
+1 for probably the best personal website on Programmers. –  Yannis Rizos Jan 10 '12 at 12:21
add comment

1 Answer

Have you checked out popcorn.js?

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla's Popcorn project.

http://popcornjs.org/

share|improve this answer
    
Yep, all over popcorn. Unfortunately however it addresses a different set of issues. The challenge faced in this project was to do with maintaining sync between a set of dynamically selectable media resources. –  Kim Burgess Feb 7 '12 at 22:31
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.