added ability to sync video with capture

[MatthewRayfield]

🌻 Addresses https://github.com/spite/ccapture.js/issues/53 🌻

Adds a setting named "syncVideo". If a video element is provided for this setting it is synced with the framerate of the capture using the following method:

• Video is paused upon capture start, and an event listener is added to video's "seeked" event.
• On the capture process function the video is advanced by one frame step.
• When the "seeked" event fires (signaling completion of video frame step) the timeout, interval, requestAnimation, etc. callbacks are called.
• And the loop continues 💫

🦆 @spite I'll be interested to hear your thoughts 🦆

[spite]

This looks really good, thanks!

A few ideas to build upon this:

• syncVideo could be an array of elements, just in case there are more media elements that need to sync up. It does complicate callbacks a bit more, and may be it's not the most usual scenario, but it feels more robust.
• i guess this also works seamlessly with Audio Elements, so even though the sound won't be captured, it's very cool too. in the future we might have better AV encoding and muxing libraries for the web
• a small demo showing how it works would be very helpful for everyone looking to integrate this specific solution

Nice work!

[tonycaso]

Excellent method, works pretty good, however the "ended" listener is not working while capturing, I need to use it to trigger capturer.save(); How can I do it?

Thanks

[hulkyuan]

thank you Matthew!