Возможности canvas не ограничиваются рисованием. Данный API позволяет обрабатывать видео на лету.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video on Canvas</title>
<style>
section{
float: left;
}
</style>
<script>
var canvas, video;
function initiate(){
var elem = document.getElementById('canvas');
canvas = elem.getContext('2d');
video = document.getElementById('media');
canvas.translate(483, 0);
canvas.scale(-1, 1);
setInterval(processFrames, 33);
}
function processFrames(){
canvas.drawImage(video, 0, 0);
}
addEventListener("load", initiate);
</script>
</head>
<body>
<section>
<video id="media" width="483" height="272" autoplay>
<source src="http://www.minkbooks.com/content/trailer2.mp4">
<source src="http://www.minkbooks.com/content/trailer2.ogg">
</video>
</section>
<section>
<canvas id="canvas" width="483" height="272"></canvas>
</section>
</body>
</html>
Впрочем, для работы с видео, существует API Video, что уже является темой отдельной публикации