html - 如何下载(或以 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。我不知道为什么该网址中有一个空值，但它一直存在。获取此 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，但并非所有浏览器都支持它。这样做的缺点是浏览器会重新编码视频并且您对输出格式的控制较少——我无法让 Chrome 生成 mp4，只能生成 webm。此外，如果先前有二进制数据请求，则每次请求二进制数据时，它只会为您提供从先前请求开始的数据。

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