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

示例

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

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

使用MSE播发MP4视频

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>播发MP4</title>
</head>
<body>
  <video id="video"></video>
  <input id="file" type="file">
  <script>
    // mp4的url:https://raw.githubusercontent.com/nickdesaulniers/netfix/gh-pages/demo/frag_bunny.mp4
    const file = document.getElementById("file")
    const video = document.getElementById('video')
    video.controls = false;
    video.autoplay = "autoplay";
    video.muted = true;
    var mediaSource =  new MediaSource();
    video.src = window.URL.createObjectURL(mediaSource);
    var sourceBuffer;
    mediaSource.addEventListener('sourceopen', () => {
      sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    });

    file.addEventListener("change", function (e) {
      var file = e.target.files[0];
      var fr = new FileReader();
      fr.readAsArrayBuffer(file);
      fr.addEventListener("loadend", (e) => {
        var buf = e.target.result;
        console.log(buf);
        sourceBuffer.addEventListener('updateend', function (_) {
          console.log(mediaSource.readyState); // ended
          mediaSource.endOfStream();
          video.play();
        });
        sourceBuffer.appendBuffer(buf);
      }, false)
    })
  </script>
</body>
</html>

注意:视频格式必须为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

参考文章


看见了
840 声望13 粉丝

前端开发,略懂后台;