共计 1447 个字符，预计需要花费 4 分钟才能阅读完成。
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()
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 源码
参考文章
- H5 直播系列二 MSE(Media Source Extensions)
- long.js
- webrtc
- 反对的所有 codec
- WebSocket+MSE——HTML5 直播技术解析
- html5 MSE
- Nplayer
