如何下载（或获取为Blob）用于流式传输HTML5视频的MediaSource？

Question

我正在通过WebSocket将动态生成的MP4流式传输到网页中。我在碎片到达时组装了一个MediaSource (https://developer.mozilla.org/en-US/docs/Web/API/MediaSource)，将其用于HTML5视频元素，我的视频在所有主要浏览器中播放得很好。

我想做的是添加用户下载此视频的功能。我的第一次尝试是通过video.src属性访问它，然后使用window.URL.createObjectURL(my_media_source)进行设置。这个URL是形如"blob:null/abb348e0-3459-8344-bf1e-063dd001f09a"的Blob URL。 我不知道为什么这个URL中有一个null ，但它始终存在。尝试通过XMLHttpRequest获取此Blob失败。

那么，正确的方法是什么样的，以获取可以成功下载的单个文件？MediaSource似乎包含整个视频流 - 我能否像获取arraybuffer或blob之类的东西那样访问它？

- user2333829

Answer 1

我认为这个问题我自己已经回答了，据我所知，现在的情况是：

首先，看来从MediaSource获取二进制数据目前实际上是不可能的。甚至还有一个关于这个问题的W3C标准： https://github.com/w3c/media-source/issues/209

目前可行的方法是使用相对较新的MediaRecorder (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) API，但并非所有浏览器都支持。这种方法的缺点是浏览器会重新编码视频，并且你对输出格式的控制更少。我无法让Chrome生成mp4，只能生成webm。此外，如果之前已经请求过二进制数据，则每次请求二进制数据时，它只会给出从上次请求开始的数据。

当然，你也可以手动在内存中保留第二份视频副本，但我不想采取这种方法，因为这似乎非常浪费和麻烦。

- user2333829