MSE,无Flash直播

201 阅读2分钟

「直播」是脱离于文字、图片的另外一种社交的方式。各大平台都在深耕这一领域。

之前的直播形式,
要么在 flash 中播放,要么在APP、应用软件中播放,要么就是利用 HLS 在手机端播放

而 Web 在这块一直有痛点。
虽然浏览器自带的播放器标签 Video/Audio 已经拥有【解封装】和【解码】的功能,
我们只需提供一个 MP4 或 WEBM 格式的视频地址给标签,就能播放。
但是,标签支持的媒体封装格式十分有限(W3C标准中只支持MP4)。

由于没有「操作数据流」的接口,只能简单的设置 video.src = xxx 去播放一段录像。
所以,在 Web 上,「音视频」是要加载完毕后才能播放出来的。只能满足一次播放整个曲目的需要,无法实现拆分/合并数个缓冲文件。
用户根本无法拥有流畅的实时观看体验。 整个媒体播放功能(音频、视频)都是相当简陋的。
缺少了诸如「分段加载」、「视频码率切换」、「更换音频语言」、「更换字幕语言」等现代播放器应该有的功能。

以前的前端,只能控制一下音视频播放的表层工作,比如,播放、暂停、快进、音量。

<audio id="audio" src="audio.mp3"></audio> 
<button id='play-audio' >播放</button> 
<button>暂停</button> 
<button>提高音量</button> 
<button>降低音量</button>

const audioElement = document.getElementById('audio');
const playBtnElement = document.getElementById('audio');

// 播放
playBtnElement.onclick = function(){
    audioElement.play()
}

// 暂停
audioElement.pause()
// 提高、降低音量
audioElement.volume+=0.1
audioElement.volume-=0.1

感觉和写 HTML 没区别,并不能对「数据流」做一些操作。
比如,跳帧,音视频同步,拿到 I/B/P 帧生成视频图像之类的。

所以,过去的绝大部分的web视频播放器都是基于 Flash 开发的。 这也是为什么 Flash 这个老古董在各大视频网站上能活到2018年左右的原因。

如果你经常 在线看剧、看电影,特别是用 mac 的,应该发现如今看视频 mac 发热不那么严重了,
那是因为现在视频网站都放弃 Flash,开始使用 HTML5 的播放器。

MSE简介

现在,W3C 提出了 MSE 的标准。
就是为了让前端能够直接操作「音视频数据流」\color{purple}{就是为了让前端能够直接操作「音视频数据流」}
极大的扩展了前端的媒体播放功能

MSE 全称为 MediaSourceExtensions
看名字就能知道,MSE 就是一系列API接口的拓展集合。
核心内容就是 MdiaSourceSourceBuffer

HLS.js,FLV.js 本身也是基于 MSE 开发的。

MSE 的出现,不仅能让 Web 上能够直播,能够「边看边加载」大视频
而且还可以根据协议自己控制相关的延迟率。

前端开发者从此也可以进行音视频的相关开发了。
因为,MSE 的主要工作就是创建 media stream,并且喂给 video/audio 进行播放。
从此,前端可以和 C++/JAVA 的人有共同的话题:对二进制数据流的操作\color{purple}{对二进制数据流的操作}