抖音相信大家都听说过，但是知道有 Web 版抖音 的人可能要少一些，和 TikTok 一样抖音也有 Web 版本，可以让我们在浏览器中就可以刷短视频和观看抖音直播。抖音是如何实现在浏览器中直播的呢？本篇文章来解析抖音直播的技术原理。

首先点击 https://live.douyin.com 进入抖音直播页面。

然后随便进入一个直播间并打开开发者工具，查看播放器相关 DOM 结构，如下图所示。

首先可以发现原来抖音也是使用的 xgplayer。另外还可以发现 video 元素的 src 属性是 blob: 开头的视频地址，和我们平时用 video 元素播放的视频有点不一样，要了解为什么视频地址是 blob: 开头的，就需要了解接下来介绍的 MSE API。

Media Source Extensions API（MSE）媒体源扩展 API 提供了实现无插件且基于 Web 的流媒体的功能，不同于简单的使用 video 元素，video 元素对于开发者来说完全是一个黑盒，浏览器自己去加载数据，加载完了自己解析，解码再播放，这个过程中开发者无法进行任何操作。利用 MSE API 开发者可以自定义获取流媒体数据并且还可以对数据做一些操作。

MSE 的兼容性如下图所示。

可以发现 MSE 的兼容性还算可以，IE 11 都支持。但是号称现代 IE 的 Safari 浏览器的 iphone 版，到现在都还不支持 MSE API，应该是苹果想推广自家的 HLS 协议吧，让你在 iphone 设备上播放流媒体只能用他家的协议。

MSE API 主要有 MediaSource 和 SourceBuffer 两个对象，MediaSource 表示是一个视频源，它下有一个或多个 SourceBuffer，SourceBuffer 表示一个源数据，比如一个视频分为视频和音频，我们可以创建两个 SourceBuffer 一个用于播放视频，一个播放音频，MSE 架构图如下所示。