On my page, I have a looping video playing. When hitting Play, another video is masked on top of that and it slowly appears. In short, I am masking a video with another video (black/white mask turned into alphadata by Canvas)
The tutorial is adapted from here
This works, but the transition/video are incredible slow because canvas is looping through all the pixels. Does anyone have any pointers on another way to accomplish this or speed up the process?
A working demo of this code can be found here
HTML:
//Buffer canvas (stacked video's: result + alpha mask)
<canvas style="display:none" width="1920" height="2160" id="buffer">
</canvas>
//Output canvas (combines mask with video)
<canvas class="video__output " width="1920" height="1080" id="output">
</canvas>
//buffer canvas uses this video to extract data
<video class="" id="video" preload="auto" style="display:none" >
<source src="assets/video/masking.mp4" type='video/mp4;codecs="avc1.42E01E"' />
</video>
//Video loop always playing
<video poster="assets/video/poster_desktop.jpg" class="video--top loop" autoplay loop>
<source src="assets/video/loop.mp4" type='video/mp4; codecs="avc1.42E01E"' />
</video>
JS:
function processFrame() {
buffer.drawImage(video, 0, 0);
//Get alphadata
let image = buffer.getImageData(0, 0, width, height),
imageData = image.data,
alphaData = buffer.getImageData(0, height, width, height).data;
//Loop through pixels, replace data with alpha channel
for (let i = 3, len = imageData.length; i < len; i = i + 4) {
imageData[i] = alphaData[i-1];
}
//Output to second canvas
output.putImageData(image, 0, 0, 0, 0, width, height);
requestAnimationFrame(processFrame)
}