ccapture.js icon indicating copy to clipboard operation
ccapture.js copied to clipboard

Capture with video texture

Open queenvictoria opened this issue 9 years ago • 3 comments

I have a complex scene that is successfully rendering out at just under 2 frames per second using Ccapture. All the objects in the scene are textured with video which is playing back behind the scenes at its normal speed (25FPS). The result is the scene plays back super well but the video texture plays back at several times the correct speed.

I've tried setting the video currentTime to synchronise it with time delta like so.

var video = document.getElementById("source");
video.currentTime += dt;

Strangely that, and just console.log(video.currentTime);, both pause the video texture completely (but not the actual video in the page). console.log(video.played); does not.

This is using Chrome Version 51.0.2704.103 (64-bit).

Any thoughts on a work around? And thank you very much for the beautiful library!

queenvictoria avatar Jul 20 '16 20:07 queenvictoria

I've made a fiddle that demonstrates the error. https://jsfiddle.net/queenvictoria/j32d7o1y/

If you uncomment line 44 and 54 (the ones marked Uncomment...) then the video pauses -- both the texture and the HTML5 player. Uncommenting either one is fine. Both together -- no good.

queenvictoria avatar Jul 25 '16 21:07 queenvictoria

Yes, the problem is that I'm assuming that the effects are usually timed with an audio or video track, so those elements are modified to drive the time, not to follow it. I can make a modification so you can tell the capturer "i'm not using video|audio for syncing, so make video|audio elements follow"

spite avatar Jul 26 '16 15:07 spite

Do you think that would fix it?

I've taken another approach which I can't tell fixes it (somethings gone strange with the webm output) but might (unless Ccapture is too clever and undoes my fix).

Instead of setting the position of the video I've set the frame rate and adjust it if the FPS of the canvas changes. Something like this.

var fps = 1000/dt;
document.getElementById('video').playbackRate = fps/25;

queenvictoria avatar Jul 26 '16 20:07 queenvictoria