如何下载（或获取为 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 中有一个空值，但它始终存在。获取此 blob 的 XMLHttpRequest 失败。

那么，将播放良好的流视频作为单个文件下载的正确方法是什么？MediaSource 似乎包含整个视频流——我可以访问它作为数组缓冲区或 blob 或其他什么吗？

Answer 1

我想我自己回答了这个问题。据我了解，目前的情况是这样的：

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

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

当然，也可以手动在内存中保留视频的第二个副本，但我不想遵循这种方法，因为它看起来非常浪费和烦人。