Video to canvas demo

by Julien Etienne

JavaScript

var video = document.createElement('video');
var c = document.createElement('canvas');
var ctx = c.getContext('2d');

document.body.appendChild(video);
document.body.appendChild(c);

video.addEventListener('loadeddata', function() {
  c.width = video.videoWidth * 2
  c.height = video.videoHeight;
}, false);

video.preload = 'auto';
video.src = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
video.controls = true;

var draw = () => {
  ctx.drawImage(video, 0, 0, c.width, c.height);
  //edit the image here
	requestAnimationFrame(draw);
};

requestAnimationFrame(draw);