【音视频】MSE

MSE

MSE全称是媒体源扩展 API(Media Source Extensions API), 提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 和 元素进行播放。

MSE 使我们可以把通常的单个媒体文件的 src 值替换成引用 MediaSource对象（一个包含即将播放的媒体文件的准备状态等信息的容器），以及引用多个SourceBuffer对象（代表多个组成整个串流的不同媒体块）的元素。MSE 让我们能够根据内容获取的大小和频率，或是内存占用详情（例如什么时候缓存被回收），进行更加精准地控制。 它是基于它可扩展的 API 建立自适应比特率流客户端（例如DASH 或 HLS 的客户端）的基础。

浏览器支持兼容 MSE 的各种媒体容器，但采用 H.264 视频编码、AAC 音频编码和 MP4 容器的格式是非常常见的，且一定兼容。

如果没有精确的控制时间、媒体质量和内存释放等需求，使用 和 是一个更加简单但够用的方案。

浏览器是否支持MSE

if('MediaSource' in window) {
  //
}

MIME 格式能否被客户端录制

var canRecord = MediaRecorder.isTypeSupported(mimeType)

编码格式是受浏览器限制的：

WEB API

MediaSource

new MediaSource()

属性

• activeSourceBuffers

var myActiveSourceBuffers = mediaSource.activeSourceBuffers;

• duration

用来获取或者设置当前媒体展示的时长。

mediaSource.duration = 5.5; // 5.5 seconds

var myDuration = mediaSource.duration;

• readyState
• closed: 当前源并未附着到一个 media 元素上。
• open: 当前源已附着到一个 media 元素并准备好接收 SourceBuffer 对象。
• ended: 当前源已附着到一个 media 元素，但流已被MediaSource.endOfStream()结束。

方法

• MediaSource.addSourceBuffer()

MediaSource 的 addSourceBuffer() 方法会根据给定的 MIME 类型创建一个新的 SourceBuffer 对象，然后会将它追加到 MediaSource 的 SourceBuffers 列表中。

const mimeType = 'video/mp4;codecs=avc1.420028'; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
var sourceBuffer = mediaSource.addSourceBuffer(mimeType);

• MediaSource.endOfStream()

MediaSource 接口的 endOfStream() 方法意味着流的结束。

一般只有几种情況会用到：

• 发生错误时
• 重置视频
• 结束流传输
• MediaSource.setLiveSeekableRange()

设置用户可以在媒体元素中查找的范围。(不常用，了解即可)

感觉要看下jsmpeg源码

示例

你可以使用MSE实现以下功能：

• 自适应拼接，如广告插入
• 时光平移（Time shifting）
• 控制性能和下载大小

使用MSE播发MP4视频

注意：视频格式必须为fragmented MP4，否则会出现类似以下报错:

index.html:34 Uncaught DOMException: Failed to execute 'endOfStream' on 'MediaSource': The MediaSource's readyState is not 'open'.

遇到一个问题： 使用ffmpeg转非fragmented MP4 为 fragmented MP4, 但还是报错，而使用mp4fragment则没有问题。（待解决）

# 有问题
ffmpeg -i non_fragmented.mp4 -strict -2 -movflags frag_keyframe+empty_moov fragmented.mp4

# 成功
mp4fragment non_fragmented.mp4 fragmented.mp4

参考文章

• H5直播系列二 MSE(Media Source Extensions)
• long.js
• webrtc
• 支持的所有codec
• WebSocket+MSE——HTML5 直播技术解析
• html5 MSE
• Nplayer
• video 转 blob：Failed to execute 'endOfStream' on 'MediaSource'？