视频直播解决方案

清疚 2022-06-16 12:08 279阅读 0赞

# 背景 #

当下，视频直播行业在中国逐渐走红。在刚刚过去的2015年，视频直播成为互联网行业最抢眼的领域之一。从游戏到秀场，从传统的网页端到移动互联网，各大直播平台包括斗鱼、熊猫tv、虎牙战旗还有纯移动端的印客、易直播等，群雄割据。言归正转，毕竟本文是一篇技术博客，接下来让我们从技术的角度分析如何搭建一个自己的直播平台。

# 流程图 #

首先让我们看一下直播整体流程。![直播流程图][TB2mp.yjVXXXXaqXFXXXXXXXXXX_754328530.jpg]  
首先是直播视频采集端，由主播通过摄像头手机等采集设备，采集视音频流，编码后采用RTMP协议[1][]推流到直播流服务器。这里采用H.264\[^H.264\]编码对视频流进行编码，使用AAC[2][]对音频流进行编码，采用这两种编码的原因是hls协议[3][]要求使用这两种编码。 接下来直播服务器会对从采集端推送的流进行一定的处理。比如，hls协议会将视频流切片成一个个的TS视频文件缓存在服务器中，同时生成一个m3u8文件记录了视频流中的包含的TS文件。 之后如果有播放器请求某一个直播链接，服务器会使用RTMP或者hls协议将流推送到播放器。那么我们该如果根据情况选择这两种协议呢。首先，我们需要明确一点，这两种协议各有利弊。如下所示：

<table style="border-spacing:0px; border-collapse:collapse; background-color:transparent; width:750px; max-width:100%; margin-bottom:20px"> 
 <thead style=""> 
  <tr style=""> 
   <th style="padding:8px; text-align:center; border-top:0px; border-right:1px solid rgb(238,238,238)!important; border-bottom:2px solid rgb(221,221,221); border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:bottom"> &nbsp;</th> 
   <th style="padding:8px; text-align:center; border-top:0px; border-right:1px solid rgb(238,238,238)!important; border-bottom:2px solid rgb(221,221,221); border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:bottom"> RTMP</th> 
   <th style="padding:8px; text-align:center; border-top:0px; border-right:1px solid rgb(238,238,238)!important; border-bottom:2px solid rgb(221,221,221); border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:bottom"> hls</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> Company</td> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> Adobe</td> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> Apple</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> 平台支持</td> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> FlashPlayer&nbsp;<br style=""> 等一些网页端的播放器&nbsp;<br style=""> 移动端 Vitamio</td> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> Apple产品原生支持，<br style=""> Android3.0以上原生支持 桌面机的浏览器需要使用一些第三方库，如JWPlayer</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> 延迟</td> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> 三秒左右的延迟，实时性较高</td> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(238,238,238)!important; line-height:1.42857; vertical-align:top; text-align:center"> 根据TS长度不同而不同，一般会有10s以上的延迟</td> 
  </tr> 
 </tbody> 
</table>

综合以上因素，我们认为如果对实时性要求较高，那么使用RTMP会比较好。网页端使用RTMP会比较好，因为Flash Player原生支持，而大多数的浏览器都会安装Flash player。而在移动端如果对实时性要求不高，那么采用hls比较好，因为ios包括3.0以上的安卓都原生支持hls协议。接下来本文将根据以上的三个步骤的具体实现分别展开说明，为了篇幅考虑，我们会将一些内容放到子文章中。

# 视频采集与编码 #

视频采集可以有多重途径，比如通过电脑摄像头，通过OBS等录屏软件进行录屏，通过手机摄像头采集。由于目前户外直播和移动互联网很火，所以我们就选择实现在安卓设备上通过摄像头采集视频流（其实是因为我是写安卓的= =）。 为了实现这一功能，我们使用了一个开源项目[javacv][] 它包含了一些在计算机视觉领域应用比较多的库，我们主要使用的是它的FFMpeg库。使用FFMpeg的FFMpegFrameRecoder类，我们能够方便地将从android摄像头采集到的帧传输到服务器。具体的通过Camera和FFMpeg推流到服务器的实现请看我们的另一篇文章[Android使用FFMpeg实现推送视频直播流到服务器][Android_FFMpeg]。另外FFMpeg也支持H.264和AAC编码。

# 直播流服务器 #

关于直播服务器，我们选择使用我们中国人开发的一个开源项目——[srs][]，它支持RTMP/HTTP/RTSP等协议的流输入，支持RTMP/HDS/HLS/HTTP等协议的流输出，同时它也支持集群。给作者点赞。   
关于srs的安装和使用可以直接看它在github上的wiki，这里不再赘述。需要注意的一点是该项目在centos 6.x 和ubunut12.x上能正常编译通过，但是在比如我使用的ubuntu14.04上会有一些依赖包的缺失。所以为了方便考虑的话，读者可以在centos和ubuntu12.x上进行test。

# 播放器 #

我们在试验的过程中，使用多种播放器和库在全平台实现了rtmp和hls的播放。在网页端使用了[videojs][]，在安卓端使用[vitamio][]。具体的实现请看我们的另外一篇[如何在网页端和移动端播放rtmp和hls视频流][rtmp_hls]

# 总结 #

当然本文中的解决方案只是最简单的，对于直播服务器集群，直播间的创建和管理，直播间直播密码和权限，内容分发网络CDN都没有进行深入的研究。但是通过本实验性项目，我认为对于我们了解整个直播的业务流程还是很有帮助的。

# 相关文件推荐 #

*  [鏖战双十一-阿里直播平台面临的技术挑战][-]

# 相关项目 #

*  [javacv][]
 *  [srs][]
 *  [Vitamio][vitamio]

1.  Real Time Messaging Protocol (RTMP) was initially a proprietary protocol developed by Macromedia for streaming audio, video and data over the Internet, between a Flash player and a server. Macromedia is now owned by Adobe, which has released an incomplete version of the specification of the protocol for public use. (reference from wikipedia )  
    Flash Player是天生能够播放RTMP流的，所以RTMP流可以在网页上得到很好的支持，另外也有很多其他浏览器能够支持播放RTMP流，如比较知名的JW player，videoJS。另外RTMP流的延迟只有3s，比较适合一些实时性和互动性较高的直播。 [↩][Link 1]
2.  AAC（Advanced Audio Coding），中文名：高级音频编码，出现于1997年，基于MPEG-2的音频编码技术。由Fraunhofer IIS、杜比实验室、AT&T、Sony等公司共同开发，目的是取代MP3格式。2000年，MPEG-4标准出现后，AAC重新集成了其特性，加入了SBR技术和PS技术，为了区别于传统的MPEG-2 AAC又称为MPEG-4 AAC。 [↩][Link 2]
3.  HLS (HTTP Live Streaming)，Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。 [↩][Link 3]

连接地址：https://github.com/beautifulSoup/RtmpRecoder/tree/master

[TB2mp.yjVXXXXaqXFXXXXXXXXXX_754328530.jpg]: /images/20220616/e4701f35f12243ee9c05873358fddf27.png
[1]: http://www.sixwolf.net/blog/2016/01/29/%E7%9B%B4%E6%92%AD%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-%E6%90%AD%E5%BB%BA%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%9B%B4%E6%92%AD%E5%B9%B3%E5%8F%B0/#fn:RTMP
[2]: http://www.sixwolf.net/blog/2016/01/29/%E7%9B%B4%E6%92%AD%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-%E6%90%AD%E5%BB%BA%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%9B%B4%E6%92%AD%E5%B9%B3%E5%8F%B0/#fn:AAC
[3]: http://www.sixwolf.net/blog/2016/01/29/%E7%9B%B4%E6%92%AD%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-%E6%90%AD%E5%BB%BA%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%9B%B4%E6%92%AD%E5%B9%B3%E5%8F%B0/#fn:hls
[javacv]: https://github.com/bytedeco/javacv
[Android_FFMpeg]: http://sixwolf.net/blog/2016/01/30/Android%E4%BD%BF%E7%94%A8FFMpeg%E5%AE%9E%E7%8E%B0%E6%8E%A8%E9%80%81%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD%E6%B5%81%E5%88%B0%E6%9C%8D%E5%8A%A1%E5%99%A8/
[srs]: https://github.com/ossrs/srs
[videojs]: http://videojs.com/
[vitamio]: https://github.com/yixia/VitamioBundle
[rtmp_hls]: http://sixwolf.net/blog/2016/01/30/%E5%9C%A8%E5%90%84%E7%AB%AF%E5%AE%9E%E7%8E%B0Rtmp%E5%92%8Chls%E6%B5%81%E8%A7%86%E9%A2%91%E7%9A%84%E6%92%AD%E6%94%BE/
[-]: http://www.infoq.com/cn/articles/alibaba-broadcast-platform-technology-challenges
[Link 1]: http://www.sixwolf.net/blog/2016/01/29/%E7%9B%B4%E6%92%AD%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-%E6%90%AD%E5%BB%BA%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%9B%B4%E6%92%AD%E5%B9%B3%E5%8F%B0/#fnref:RTMP
[Link 2]: http://www.sixwolf.net/blog/2016/01/29/%E7%9B%B4%E6%92%AD%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-%E6%90%AD%E5%BB%BA%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%9B%B4%E6%92%AD%E5%B9%B3%E5%8F%B0/#fnref:AAC
[Link 3]: http://www.sixwolf.net/blog/2016/01/29/%E7%9B%B4%E6%92%AD%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-%E6%90%AD%E5%BB%BA%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%9B%B4%E6%92%AD%E5%B9%B3%E5%8F%B0/#fnref:hls