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

Posted 2023-05-08

【中文标题】如何下载（或以 blob 形式获取）用于流式传输 HTML5 视频的 MediaSource？

【英文标题】：How to download (or get as a blob) a MediaSource used for streaming HTML5 video?

【发布时间】：2018-11-28 23:44:22

【问题描述】：

我正在通过 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。我不知道为什么该网址中有一个空值，但它始终存在。获取此 blob 的 XMLHttpRequest 失败。

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

【参考方案1】：

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

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

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

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