Capture a MediaStream From a Canvas, Video or Audio Element

Sam Dutton
Oct 20, 2016 · 3 min read
var canvas = document.querySelector('canvas'); 
var video = document.querySelector('video');
// Optional frames-per-second argument
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the
// stream from the <canvas>.
video.srcObject = stream;
var leftVideo = document.getElementById('leftVideo'); 
var rightVideo = document.getElementById('rightVideo');
leftVideo.onplay = function() {
// Set the source of one <video> element to be a
// stream from another.
var stream = leftVideo.captureStream();
rightVideo.srcObject = stream;
};

But what’s it useful for?

The small print

Demos

Canvas

Video

Support

Find out more


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade