If you haven’t attempted to get media out of web page before, you can be forgiven for thinking it would be a simple exercise. For a long time however, anything beyond a trivial static frame varies between an arduous exploration of an excessive amount of web APIs, to downright impossible without talking to a server.
Fortunately, the Media Recorder API helps to address this issue. Without any plugins, extensions, or any back-end code, we can generate a piece of original video content solely in the browser! …with some caveats. We’ll go through what you can do with Media Recorder and other related APIs, what you can’t, and what’s on the horizon.
A few years ago as a junior Jessica was working in ad tech (“I know, I know…”). If you remember the Warcraft movie – yes, it was terrible – she had to create a ‘Warcraft yourself’ tool that put let people put their photo into the trailer. This mean Jessica watched that trailer hundreds of times… But the project worked and shipped under extremely tight deadlines.
But then the PM asked ‘can they save the video’? …and the answer was no. Which seemed weird given the pixels are right there on screen, but actually creating a file was just out of the question. The amount of backend work and pipelines was prohibitive, it would have taken far too long to get it all going. They looked into the Media Recorder API but it just wasn’t ready to use. So that’s where it ended at the time.
But now Jess is working on the video team at Canva. It was a chance to revisit the Media Recorder API… and things have progressed!
Example: generated canvas with 1000 dots on it. It’s fun but what if you wanted to keep it? Media Recorder API includes
new MediaRecorder(stream). What’s a stream? There is a spec for Media Stream, but there are Media Devices that let you do things like capture the screen, or a stream from the camera.
(code examples of the API, which sets up a listener to capture blobs from a stream, and start/stop methods)
You can create an ongoing stream from a file; and if you pause and restart the original video you can see the stream continues. This means you can create effects like jump cuts.
There is a
canvas capture API, which lets you capture a stream from a canvas as you write to it. You can choose the frame rate (default is to update whenever the stream updates). It’s possible to use this to capture specific frames.
mediaRecorder lets you set both the contain mime type and codecs (so you can set audio and video codecs). Currently the browsers all produce quite different files despite all notionally supporting webm.
Issues… there’s a few!
Support – promising, but not there yet. And the different browsers producing different files can be an issue.
Bugs – there are quite a few. eg. Chrome gives a black screen if you want something that’s too high-rez.
webm – just not very popular, not natively supported on most OSes (just because we’re all nerds with VLC doesn’t mean all our clients use it)
So it’s not quite there for prime time, but it’s not that far away. It’s enough to be useful.