Video and Canvas merging about whammy

[positlabs]

I think you're going to have to draw the video into the canvas, no matter how you save the output

[kenseii]

Thanks for the reply, is It possible to have an example that would be very helpful.

<div id="video_box">
                <div id="video_overlays">
                    <canvas class="canvas"  id="canvas"></canvas></div>
                <div>
                    <video controls="true" id="video" src="video1_1.mp4"/>
                </div>
</div>

My html looks like that

and the js looks like this:

function download_merge() {
        var encoder = new Whammy.Video(15);
        var canvas_video = document.querySelector('canvas').getContext('2d');
        canvas_video.save();
        console.log(canvas_video);

        encoder.add(canvas_video);
        console.log(encoder);
        encoder.compile(false, function(output){
            var url = (window.URL || window.URL).createObjectURL(output);
            //var url = URL.createObjectURL(output);
            console.log(url);
            document.getElementById('download_link').href = url;
        });
    }

[positlabs]

Use requestAnimationFrame and context2d.drawImage(yourVideoElement)

[kenseii]

Use requestAnimationFrame and context2d.drawImage(yourVideoElement)
Thank you,
should I apply the requestAnimationFrame on the text canvas or the video element?

[positlabs]

You will need to redraw the text every time the video is drawn.

[kenseii]

Thanks for the reply, please can you share an example of the code?