html - 是否可以使用 HTML5 MediaSource 动态生成任意尺寸和长度的单色视频？

Question

假设我有一个页面允许用户选择宽度、高度、颜色和持续时间。我希望该页面随后生成具有这些尺寸和持续时间的视频，该视频只是该颜色的静态帧，然后将在该页面的

例如:如果用户选择 704x396 + rgb(0, 0, 0) + 00:00:15，那么我想生成一个

据我所知，MediaSource 只允许我 feed raw video bytes in an actual video codec that the browser supports.它没有任何“更高级别”的 API，例如让我提供单个帧的东西。

如果不是 MediaSource，有没有其他方法可以做到这一点(当然除了捆绑编译为 JS 的 webm/MP4 编码器)？

Answer 1

使用 canvas.captureStream() 和 MediaRecoder。

HTMLCanvasElement-captureStream

MediaRecorder

目前适用于 Firefox。也许有一天会在 Chrome 中工作。