Can HTML5 MediaSource be used to dynamically generate a single-color video of arbitrary dimensions and length?

Question

Suppose I have a page that allows the user to choose a width, height, color and duration. I want the page to then generate a video of those dimensions and duration that's just a static frame of that color, that will then be played in a <video> tag on that page. Can I use the HTML5 MediaSource API to do this?

Eg: If the user chooses 704x396 + rgb(0, 0, 0) + 00:00:15, then I want to generate a <video> tag that plays a video that's 704x396 in size, 15 seconds long, and completely black. If you're familiar with Aegisub's dummy video feature, that is basically what I'm trying to mimic.

From what I can tell, MediaSource only allows me to feed raw video bytes in an actual video codec that the browser supports. It doesn't have any "higher level" API such as something that lets me feed individual frames.

If not MediaSource, is there any other way to do this (apart from bundling a webm / MP4 encoder compiled to JS of course) ?

Answer 1

Use canvas.captureStream() and MediaRecoder.

HTMLCanvasElement-captureStream

MediaRecorder

Works in Firefox currently. Will work in Chrome someday soon perhaps.