使用媒体源 API 平滑表示更改

Question

我目前正在使用 JavaScript 和 MediaSource API 开发 DASH 播放器

流媒体工作正常，但我一直在改变表示形式。在播放期间更改表示的最暴力方法可能是替换 HTML 文档中的 元素。

然而，我想知道是否有一种简单的方法可以使用 Media Source API 实现适配（更改表示）。我读过单个媒体源对象可以处理许多源缓冲区，但是在添加第二个视频缓冲区后会引发异常。

我使用的是Chrome 43.0.2357.65m

var mediaSource = MediaSource();
var url = URL.createObjectURL(mediaSource);

videoElement.src = url;

mediaSource.addEventListener('sourceopen', function () {
    var buffer1 = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.4d4015"');
    var buffer2 = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.4d4015"');
}

例外：

Uncaught QuotaExceededError: Failed to execute 'addSourceBuffer' on    'MediaSource': This MediaSource has reached the limit of SourceBuffer objects it can handle. No additional SourceBuffer objects may be added.

Answer 1

不幸的是，MSE 规范并没有太多关于平滑改变表示的内容。学习如何做到这一点的方法是阅读现有的破折号播放器的代码并看看它是如何做到的。为了节省您大量时间，以下是具体操作方法：

1. 首先，您只需要一个源缓冲区。不同表示的编解码器不同并不重要。您创建一个源缓冲区并在播放器的整个生命周期中使用它。切换表示多少次并不重要。

2. 切换表示的方式其实很简单。您只需将目标表示的初始化标头附加到源缓冲区即可。就是这样。之后，解码器已重新初始化，您可以开始附加属于新表示的段。

3. 附加目标表示的片段并享受平滑过渡。

就是这样。一旦你弄清楚你必须做什么，这并不难。

Answer 2

我还在制作一个从多个摄像机进行直播的应用程序，在播放器已经开始从第一个摄像机的源播放后尝试播放另一个摄像机的流时，遇到了同样的问题。

我还尝试将一台摄像机拍摄的镜头的表现形式切换到另一台摄像机拍摄的镜头。我尝试在从第二个摄像机提供媒体源素材之前附加第二个摄像机的初始化段，以便它继续顺利播放。但由于某种原因它不起作用。

所以我所做的是在捕获视频时在画布元素而不是视频元素中播放它们。当我更换摄像机时，画布内正在播放的视频将更改为另一个摄像机并流畅播放。

这就是技巧，我不是直接从相机流式传输，而是从画布元素流式传输！我使用媒体记录器 API 来捕获画布元素的内容并对其进行流式传输。现在问题已经解决了，即使摄像机和表现形式似乎发生了变化，但正在流式传输的镜头的实际表现形式却没有变化。