在 JavaScript 中更新 objectURL

Question

假设我正在接收来自视频聊天的数据，我需要将数据添加到 HTML 页面中的视频元素中。

代码如下：

var payload = [];   // This array keeps updating, since it is getting the data from the network using media stream.
var remoteVideo = document.getElementById('remoteVideo');
var buffer = new Blob([], { type: "video/x-matroska;codecs=avc1,opus" });
var url = URL.createObjectURL(buffer);
remoteVideo.src = url;

现在，我正在缓冲区中获取数据。如何更新我创建的 url 而不是重新创建一个新的 url 来观看视频？

Answer 1

我认为您可能根本不需要使用MediaSource 更新网址，过程如下：

1. 创建一个MediaSource 对象。
2. 使用 createObjectURl 从 MediaSource 创建对象 URL
3. 将视频的 src 设置为对象 URL
4. 监听sourceopen 事件，当它发生时，创建一个SourceBuffer 实例。
5. 使用SourceBuffer.appendBuffer() 将所有块添加到视频中。

但要密切注意MediaSource 的限制和注意事项。

编辑：

我找到了这个Answer，它更准确地解释了上述过程，还指出了您应该注意的事项，以及一个示例。