从0到1打造直播 App

零、概要分享内容：互联网内容载体变迁历程，文字——图片/声音——视频——VR/AR——…….。从直播1.0秀...

概要

分享内容：

互联网内容载体变迁历程，文字——图片/声音——视频——VR/AR——…….。从直播1.0秀场时代（YY），2.0游戏直播（斗鱼、虎牙、熊猫）到如今全民直播3.0泛生活娱乐时代（映客、花椒），国外直播app（Meerkat 、Periscope），随着VA/AR/MR提出的沉浸式视听体验，直播4.0时代很快就能到来。

在这个全民娱乐的时代，直播已经火得不要不要的，各大公司都有自己的直播产品。本文主要从直播的一些基本知识,一步步打造直播app。直播那么火的背后有什么样的技术支撑呢？

先将这些APP按照视频网站按照视频网站、弹幕视频、直播平台、在线秀场、移动短视频、移动直播来划分类别。再按照内容和社交这个维度来进行区分，可以明显看出视频网站、弹幕网站和直播平台更偏内容，他们对内容的需求更加高，用户在上面进行社交沉淀相对比较浅。而后面三者更加偏向社交，他们强调人而不强调内容。所以短期内不会有大的竞争关系，只是前三类、后三者之间的竞争会出现。

大体框架
基本是下图这个套路：录制->编码->网络传输->解码->播放

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

1. 怎样录制直播视频
2. 怎样实时上传直播视频
3. 怎样播放直播视频
4. 直播间的用户是如何交互

一、移动视频直播发展

PC直播（固定场所）——>移动端（形式自由）。

随着越来越多的直播类 App 上线，移动直播进入了前所未有的爆发阶段，目前大多数移动直播以 Native 客户端为主。但是H5端的直播在移动直播端也承载着不可替代的作用，例如 H5 有着传播快，易发布的优势。

完整的直播包括：

1. 视频录制端电脑上的音视频输入设备或者手机端的摄像头或者麦克风，目前以移动端的手机视频为主。
2. 视频播放端可以是电脑上的播放器，手机端的 Native 播放器，还有 H5 的 video 标签等。
3. 流媒体服务器端用来接受视频录制端提供的视频源，同时提供给视频播放端流服务。目前开源的流媒体有RED5，CRTMPD，NGINX-RTMP，SRS。

二、录制视频

如何生产视频数据

封装格式的主要作用是把视频码流和音频码流按照一定的格式存储在一个文件中。

为什么要分封装格式和视频编码格式呢？

这个其实跟网络分七层模型一个原理。解耦和，降低依赖，底层给上层提供基础功能，底层和上层都都可以单独扩展，可以以多种方案组合编码与封装，比如MP4与H264、MP4与MPEG、TS与H264等等。比如这里面的这边文章的编码就只负责将最原始的音频和视频数据就行压缩，而压缩完的数据要怎么组织就拜托给上层的封装，封装接到视频音频数据负责给数据编号，指定同步协议，加入字幕等操作。经过封装后，得到的就是可以播放的上面提到的视频文件MP4或者MKV等等。把这个过程反过来就是上图描述的视频播放的过程。

1、流媒体源

1. PC端的摄像头、屏幕对于PC端的流媒体源，可以使用Open Broadcaster Software串流（支持多种直播平台）。
2. 移动端iOS、Android的摄像头和麦克风。iOS、Android主要是系统提供的API实现。
3. webRTC （Web Real-Time Communication）webRTC是一个支持网页浏览器进行实时语音对话或视频对话的技术，可以在网页浏览器中进行采集、传输、播放，缺点是只在 PC 的 Chrome 上支持较好，移动端支持不太理想。

使用 webRTC 录制视频基本流程是：

1. 调用

   window.navigator.webkitGetUserMedia()

   获取用户的PC摄像头视频数据。
2. 将获取到视频流数据转换成

   window.webkitRTCPeerConnection

   (一种视频流数据格式)。
3. 利用

   webscoket

   将视频流数据传输到服务端

由于许多方法都要加上浏览器前缀，所以很多移动端的浏览器还不支持 webRTC，所以真正的视频录制还是要靠客户端（iOS,Android）来实现,效果会好一些。

2、编码

推荐Andorid4.3（API18）或以上使用硬编，以下版本使用软编；iOS使用全硬编方案。

1. 软编码：libffmpeg
2. 硬编码：MediaCodec(sdk level 16+, Android 4.1, 4.1.1, the JELLY_BEAN)

3、封装

FLV（Flash Video）是Adobe公司设计开发的一种流行的流媒体格式，FLV可以使用Flash Player进行播放，FLV封装格式的文件后缀通常为“.flv”。总体上看，FLV包括文件头（File Header）和文件体（File Body）两部分，其中文件体由一系列的Tag组成。

特点：视频文件体积轻巧、封装简单



每个Tag前面还包含了Previous Tag Size字段，表示前面一个Tag的大小。Tag的类型可以是视频、音频和Script，每个Tag只能包含以上三种类型的数据中的一种。图2展示了FLV文件的详细结构。Tag Data

1. Audio Tag
2. Video Tag
3. Script Tag（控制帧）或叫meta data tag该类型Tag又通常被称为Metadata Tag，会放一些关于FLV视频和音频的元数据信息如：duration、width、height等。通常该类型Tag会跟在File Header后面作为第一个Tag出现，而且只有一个。

如图以Android为例的推流的流程图：

三、视频推流（Stream）

如何推往哪里推

1、协议

国内常见公开的直播协议有几个：RTMP、HDL（HTTP-FLV）、HLS、RTP。

RTMP

Real Time Messaging Protocol是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。

使用RTMP技术的流媒体系统有一个非常明显的特点：使用 Flash Player 作为播放器客户端，而Flash Player 现在已经安装在了全世界将近99%的PC上，因此一般情况下收看RTMP流媒体系统的视音频是不需要安装插件的。用户只需要打开网页，就可以直接收看流媒体。

和 HLS 一样都可以应用于视频直播，区别是 RTMP 基于 flash 无法在 iOS 的浏览器里播放，但是实时性比 HLS 要好。所以一般使用这种协议来上传视频流，也就是视频流推送到服务器。

rtmp现在大部分国外的CDN已不支持，在国内流行度很高。原因有几个方面：

1. 开源软件和开源库的支持稳定完整。如斗鱼主播常用的OBS软件，开源的librtmp库，服务端有nginx-rtmp插件。
2. 播放端安装率高。只要浏览器支持FlashPlayer就能播放RTMP的直播。相对其他协议而言，RTMP协议初次建立连接的时候握手过程过于复杂（RTMP协议本身的交互是基于TCP），视不同的网络状况会带来给首开带来100ms以上的延迟。基于RTMP延迟在2~5秒。

HTTP-FLV

即使用HTTP协议流式的传输媒体内容，直接向后台上传编码后的流媒体数据。相对于RTMP，HTTP更简单和广为人知，而且不担心被Adobe的专利绑架。内容延迟同样可以做到2~5秒，打开速度更快，因为HTTP本身没有复杂的状态交互。所以从延迟角度来看，HTTP-FLV要优于RTMP。

SRS2.0支持该协议：HTML 5 视频直播一站式扫盲

如果您觉得我们的内容还不错，就请转发到朋友圈，和小伙伴一起分享吧~

本文系腾讯Bugly独家内容，转载请在文章开头显眼处注明作者和出处“腾讯Bugly(http://bugly.qq.com)”

    关注 腾讯Bugly