HTML5直播技术探究

最新推荐文章于 2021-12-01 17:56:35 发布

InsZVA

最新推荐文章于 2021-12-01 17:56:35 发布

阅读量3.7k

点赞数

分类专栏：前端后端文章标签： html5 直播技术 MSE VP9 js

本文链接：https://blog.csdn.net/InsZVA/article/details/54836044

版权

随着HTML5的发展，视频网站开始转向HTML5播放器。本文探讨了HTML5直播的两种主要思路：jsmpeg和MSE（MediaSourceExtension），重点介绍了MSE在VP8/VP9直播中的应用和挑战，包括DASH方案解决实时性问题，以及编程注意事项如SourceBuffer管理和appendWindowStart/appendWindowEnd的控制。同时，提到了VP9编码在画质和带宽效率上的优势。

摘要由CSDN通过智能技术生成

传统直播技术，大多使用RTMP通过Flash进行传输。随着HTML5的逐渐实现，<video>等媒体标签的浏览器支持，
很多视频逐渐向HTML5靠拢。Youtube等视频网站纷纷开始使用HTML5播放器，然而纵观当前的直播网站，大多
还是依赖Flash。直播为何不采用HTML5呢？

目前的HTML5直播思路有以下几种。一是使用js调用WebGL渲染视频，用websocket/XHR传输，比如jsmpeg项目，
实现了一个MPEG1的js解析器，该项目存在很多bug，另外由于MPEG1的效能极低（比GIF好不了多少），传输的视频
质量较差，而且js解析消耗很高CPU，这种方案不是很理想。二是使用Native的解码方案，使用MediaSourceExtension。
MSE支持一些格式，比如H264，VP8，VP9等（因浏览器而异），这里就VP8/VP9进行讨论。VP8/VP9的容器一般是webm，
然而chrome对webm的解析貌似不正确（很多网友说很多webm视频能够在Firefox上面使用MSE播放，但是不能在chrome上面
播放，ffmpeg压制出来的视频就是无法被chrome播放的）。webm格式大致可以分割为两部分，启动信息和媒体片段：

<EBMLHeader type="list" offset="0">
  <EBMLVersion type="uint" value="1"/>
  <EBMLReadVersion type="uint" value="1"/>
  <EBMLMaxIDLength type="uint" value="4"/>
  <EBMLMaxSizeLength type="uint" value="8"/>
  <DocType type="string" value="webm"/>
  <DocTypeVersion type="uint" value="2"/>
  <DocTypeReadVersion type="uint" value="2"/>
</EBMLHeader>
<Segment type="list" offset="43">
  <SeekHead type="list" offset="55">
    <Seek type="list" offset="61">
      <SeekID type="uint" id_name="Info" value="357149030"/>
      <SeekPosition type="uint" value="229"/>
    </Seek>
    <Seek type="list" offset="75">
      <SeekID type="uint" id_name="Tracks"