【音视频】MSE

看见了

MSE

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

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

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

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

浏览器是否支持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()

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


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源码

参考文章

阅读 330

solfKwolf的前端杂记
涉及个人学习心得与经验

i'm look for a good job :)

568 声望
10 粉丝
0 条评论

i'm look for a good job :)

568 声望
10 粉丝
文章目录
宣传栏