视频直播的技术原理和实现思路方案整理

[ufologist]

包括原理篇/思路篇/实践篇/方案篇/前端篇/总结

原理篇

• 何李石：七牛直播云服务技术详解

  直播模型及其实现

  一个通用的直播模型一般包括三个模块：主播方、服务器端和播放端。

  

  首先是主播方，它是产生视频流的源头，由一系列流程组成：第一，通过一定的设备来采集数据；第二，将采集的这些视频进行一系列的处理，比如水印、美颜和特效滤镜等处理；第三，将处理后的结果视频编码压缩成可观看可传输的视频流；第四，分发推流，即将压缩后的视频流通过网络通道传输出去。

  其次是播放端，播放端功能有两个层面，第一个层面是关键性的需求；另一层面是业务层面的。先看第一个层面，它涉及到一些非常关键的指标，比如秒开，在很多场景当中都有这样的要求，然后是对于一些重要内容的版权保护。为了达到更好的效果，我们还需要配合服务端做智能解析，这在某些场景下也是关键性需求。再来看第二个层面也即业务层面的功能，对于一个社交直播产品来说，在播放端，观众希望能够实时的看到主播端推过来的视频流，并且和主播以及其他观众产生一定的互动，因此它可能包含一些像点赞、聊天和弹幕这样的功能，以及礼物这样更高级的道具。

  直播服务器端提供的最核心功能是收集主播端的视频推流，并将其放大后推送给所有观众端。除了这个核心功能，还有很多运营级别的诉求，比如鉴权认证，视频连线和实时转码，自动鉴黄，多屏合一，以及云端录制存储等功能。另外，对于一个主播端推出的视频流，中间需要经过一些环节才能到达播放端，因此对中间环节的质量进行监控，以及根据这些监控来进行智能调度，也是非常重要的诉求。

  实际上无论是主播端还是播放端，他们的诉求都不会仅仅是拍摄视频和播放视频这么简单。在这个核心诉求被满足之后，还有很多关键诉求需要被满足。比如，对于一个消费级的直播产品来说，除了这三大模块之外，还需要实现一个业务服务端来进行推流和播放控制，以及所有用户状态的维持。如此，就构成了一个消费级可用的直播产品。

思路篇

• 从0到1打造直播 App

  

  录制->编码->网络传输->解码->播放

  以上为直播的整体流程，根据该流程分为以下技术点：

  • 怎样录制直播视频(流媒体源/编码/封装)
  • 怎样实时上传直播视频(视频推流: 如何推/往哪里推/推流服务器)
  • 怎样播放直播视频(如何看: HLS/rtmp/flv)
  • 直播间的用户是如何交互(送礼物/聊天室/弹幕)

• 如何搭建一个完整的视频直播系统？

  正如 @姚冬 所说，一个完整的直播系统大致包含这几个环节：采集、前处理、编码、传输、解码和渲染。在两端传输的过程中再加上一个服务端处理。大致的模型如下：

  

• 直播系统解决方案-搭建你自己的直播平台

  • 视频采集与编码: JavaCV FFmpeg
  • 直播流服务器: SRS
  • 播放器: 网页端 Video.js 安卓端 Vitamio

实践篇

• 如何快速的开发一个完整的iOS直播app 原理篇/播放篇/采集篇/美颜篇

  直播难：个人认为要想把直播从零开始做出来，绝对是牛逼中的牛逼，大牛中的大牛，因为直播中运用到的技术难点非常之多，视频/音频处理，图形处理，视频/音频压缩，CDN分发，即时通讯等技术，每一个技术都够你学几年的。

  直播易：已经有各个领域的大牛，封装好了许多牛逼的框架，我们只需要用别人写好的框架，就能快速的搭建一个直播app，也就是传说中的站在大牛肩膀上编程。

  • 一个完整直播app功能
    • 聊天/礼物/直播列表/自己直播/房间逻辑/用户逻辑/观看直播/统计/超管
  • 一个完整直播app原理
    • 直播原理：把主播录制的视频，推送到服务器，在由服务器分发给观众观看。
    • 直播环节：推流端（采集、美颜处理、编码、推流）、服务端处理（转码、录制、截图、鉴黄）、播放器（拉流、解码、渲染）、互动系统（聊天室、礼物系统、赞）
  • 一个完整直播app实现流程
    • 采集/滤镜处理/编码/推流/CDN分发/拉流/解码/播放/聊天互动
  • 一个完整直播app架构
    • 
  • 一个完整直播app技术点
    • 
  • 如何快速的开发一个完整的iOS直播app
    • 利用第三方直播SDK快速的开发
  • 直播功能：自研还是使用第三方直播SDK开发？
    • 第三方SDK开发: 对于一个初创团队来讲，自研直播不管在技术门槛、CDN、带宽上都是有很大的门槛的，而且需要耗费大量的时间才能做出成品，不利于拉投资。
    • 自研：公司直播平台大，从长远看，自研可以节省成本，技术成面比直接用SDK可控多了。
  • 第三方SDK好处
    • 降低成本/提升效率/降低风险/专业的事，找专业的人来做

• 做一款仿映客的直播App？看我就够了

  • 技术实现层面
    • 技术相对都比较成熟，设备也都支持硬编码
    • github上有现成的开源实现，推流、美颜、水印、弹幕、点赞动画、滤镜、播放都有。技术其实不是很难，而且现在很多云厂商都提供SDK，七牛云、金山云、乐视云、腾讯云、百度云、斗鱼直播伴侣推流端，功能几乎都是一样的，没啥亮点，不同的是整个直播平台服务差异和接入的简易性。后端现在 RTMP/HTTP-FLV 清一色，App挂个源站直接接入云厂商或CDN就OK。
  • 运营成本和客户体验
    • 根据网上的数据，斗鱼 TV 为 3 亿人民币，战旗 TV 为 1.5 亿人民币，龙珠为 1.2 亿人民币，虎牙为 3000 万 + 人民币。
  • 项目搭建
    • 流媒体传输: RTMP
    • 推流: LaiFengiOS/LFLiveKit
    • 美颜: BeautifyFace
    • 播放端: Bilibili/ijkplayer
    • GrayJIAXU/520Linkee

• iOS视频直播初窥:高仿<喵播APP>

  • 技术坑 : 降噪, 音频解码器, 蓝牙适配, 回声消除, 信令控制, 登录, 鉴权, 权限管理, 状态管理, 应用消息, 消息推送, 礼物系统, 即时聊天, 支付系统, 统计系统, 数据库, 缓存, 分布式文件存储, 消息队列, 运维系统等等大小不一的坑等你来填!!!
  • 资金坑 : 以带宽为例, 2万人同时在线, 手机码率在600KB, 每个月的带宽费用至少在30万左右. 根据欢聚时代(YY)15年四季度财务报, 他们的带宽成本为人民币1.611亿元, 折合每月5000万+. 人力成本+渠道支出和其他支出就不详谈了.
  • 社会坑: 还得每时每刻与各种黑暗势力斗争, 包括色情, 广告, 刷小号, 刷充值, 告侵权, DDos...(我反编译喵播的官方APP, 他们的项目名就叫Shehui, O(∩_∩)O哈哈~)

• LaiFeng-Android/SopCastComponent

  来疯直播安卓控件，支持flv，支持rtmp，支持添加视频特效等等

  整个项目完成了采集、 视音频处理、编码、数据发送前处理、数据发送的功能。整个项目支持flv封包，rtmp上传

• LaiFengiOS/LFLiveKit

  LaiFeng IOS Live Kit,H264 and AAC Hard coding，support GPUImage Beauty， rtmp transmission，weak network lost frame，Dynamic switching rate

方案篇

各种云厂商提供的直播云解决方案

• 阿里云视频直播解决方案

  • 直播推流 SDK(iOS/Android)
  • 直播播放器 SDK(iOS/Android)

  

• 直播聊天室 - 融云即时通讯云

  • 视频直播
  • 聊天互动
  • 主播端/观众端

前端篇

• H5视频直播扫盲 | AlloyTeam

  对于视频播放，可以使用 HLS(HTTP Live Streaming)协议播放直播流， ios 和 android 都天然支持这种协议，配置简单，直接使用 video 标签即可。

  到底什么是HLS协议？

  简单讲就是把整个流分成一个个小的，基于HTTP的文件来下载，每次只下载一些，前面提到了用于H5播放直播视频时引入的一个.m3u8(extended M3U playlist)的文件，这个文件就是基于HLS协议，存放视频流元数据的文件。

  

• H5直播起航 | Aotu.io「凹凸实验室」

  WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主（HLS存在延迟性问题，也可以借助 video.js 采用RTMP），PC端则以 RTMP 为主实时性较好

  移动端 iOS 和 Android 都天然支持HLS协议，做好视频采集端、视频流推流服务之后，便可以直接在H5页面配置 video 标签播放直播视频, HLS 在 PC 端仅支持safari浏览器，类似chrome浏览器使用HTML5 video标签无法播放 m3u8 格式，可直接采用网上一些比较成熟的方案

• videojs-contrib-hls

  HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on mobile devices thanks to its native support on iOS and Android. Unfortunately, all the major desktop browsers except for Safari are missing HLS support.

• Web 前端如何播放 HLS(.m3u8) 视频

  • 移动端可直接通过 <video> 标签来播放 .m3u8 格式的视频: mobile-hls-video.html
  • PC端需要通过其他手段(例如 videojs-contrib-hls)来解码 .m3u8 格式的视频, 才能够通过 <video> 标签或者 flash 来播放: pc-hls-video.html

更多参考

• fir.im Weekly - 揭秘直播移动 APP 技术实现
• PPT+长文推荐：『直播』大时代
• 如何开发出一款仿映客直播APP项目实践篇
• android音视频点/直播模块开发
• 直播协议的选择：RTMP vs. HLS
• HTML5 视频直播 | JerryQu
• 有支持M3U8格式的HTML5播放器吗？

• yangchao0033/HLS-Demo

  

总结

• 如果想最快的实现直播功能, 最好选用直播云, 因为其提供了完善的 SDK, 从推流到流服务器再到最终的播放器, 一条龙服务下来.
• 如果想自己搭建整个一套, 技术选型可以参考
  • (主播)采集推流: iOS LaiFengiOS/LFLiveKit Android LaiFeng-Android/SopCastComponent
  • (上传)流服务器: SRS
  • (观众)播放器: App 端 [Bilibili/ijkplayer]() 网页端 Video.js

[preblam]

说的都是我没有视频基础所需要的额

[liveCoder007]

there is a good android opensource project yasea. https://github.com/begeekmyfriend/yasea

but if your want to full living product. you can see also: http://weking.io

[smithgoo]

I want to get all demo

[Chiver]

Very beginner-friendly tutorial, thanks a lot.