一步步认识视频直播

什么是推流，拉流

推流：把视频，音频数据采集好传输到服务器的过程
拉流：从服务器把视频，音频数据拉取下来进行播放的过程

拉流过程：

根据协议类型（如RTMP、RTP、RTSP、HTTP等），与服务器建立连接并接收数据；

• 解析二进制数据，从中找到相关流信息；
• 根据不同的封装格式（如FLV、TS）解复用（demux）；
• 分别得到已编码的H.264视频数据和AAC音频数据；
• 使用硬解码（对应系统的API）或软解码（FFMpeg）来解压音视频数据；
• 经过解码后得到原始的视频数据（YUV）和音频数据（AAC）；
• 因为音频和视频解码是分开的，所以我们得把它们同步起来，否则会出现音视频不同步的现象，比如别人说话会跟口型对不上；
• 最后把同步的音频数据送到耳机或外放，视频数据送到屏幕上显示。

推流过程：

• 经过输出设备(AVCaptureVideoDataOutput)得到原始的采样数据--视频数据（YUV）和音频数据（AAC）；
• 使用硬编码（对应系统的API）或软编码（FFMpeg）来编码压缩音视频数据；
• 分别得到已编码的H.264视频数据和AAC音频数据；
• 根据不同的封装格式（如FLV、TS、MPEG-TS）；
• 使用HLS协议的时候加上这一步（HLS分段生成策略及m3u8索引文件）
• 通过流上传到服务器；
• 服务器进行相关协议的分发

什么是软解码，硬解码

软解码：由显卡核心GPU来对高清视频进行解码工作，CPU占用率很低，画质效果比软解码略差一点，需要对播放器进行设置。
硬解码：由CPU负责解码进行播放。

	优点	缺点
硬解码	播放流畅、低功耗	受视频格式限制、功耗大、画质没有软解码好
软解码	不受视频格式限制、画质略好于硬解	会占用过高的资源、对于高清视频可能没有硬解码流畅(主要看CPU的能力）

什么是RTMP, HTTP-FLV, HLS (传输协议)

RTMP: Adobe发布的一个视频传输的协议，底层基于TCP，在浏览器端依赖Flash
HTTP-FLV: 将音视频数据封装成FIV格式，通过HTTP协议传输给客户端，流式传输
WEBSOCKET-FLV：http-flv的websocket版
HLS: Http Live Streaming, 苹果提出的基于HTTP的流媒体传输协议，Html5可以直接打开播放，不用依赖Flash

	RTMP	HLS	HTTP-FLV
全称	Real-Time Messaging Protocol	Http Live Streaming	RTMP over HTTP
协议	TCP长连接	HTTP短连接	HTTP 长连接
原理	每个时刻的数据收到后立刻转发	集合一段时间的数据，生成ts切片文件（三片），并更新m3u8索引	同RTMP,使用HTTP协议
播放器	Flash	Video	Flash Video
延时	1-3秒	5-20秒	1-3秒
web支持	H5中需使用插件	支持H5	H5中需使用插件

什么是flv.js

flv.js是B站的开源项目，它可以解析flv文件传给原生的h5 video标签，使浏览器可以不借助flash播放flv文件，即可以在浏览器端实现直播
浏览器对原生video标签采用了硬件加速，性能更好

实现一个简单的直播

1. 下载安装livego（go编写的直播服务器，主播推流到音视频服务，音视频服务再转发给所有连接的客户端）

brew install go //安装go环境
git clone https://github.com/gwuhaolin/livego.git //clone livego
cd livego
go build // 进行编译
./livego 启动livego

启动成功各协议对应接口

image.png

2. 使用ffmpeg（多媒体视频处理工具）给livego推流

brew install ffmpeg //安装ffmpeg
ffmpeg -f avfoundation framerate -30 -i "0" -vcodec h264 -acodec aac -f flv rtmp://localhost/live/test //生成推流地址
ffplay -i // ffmpeg用来播放视频的指令
ffplay -i rtmp://localhost:1935/live/test //用该指令可以验证是否推流成功

livego生成的播放地址

RTMP:rtmp://localhost:1935/live/test
FLV:http://127.0.0.1:7001/live/test.flv
HLS:http://127.0.0.1:7002/live/test.m3u8

3. 在web端实现拉流直播（HTTP-FLV协议)

• 西瓜播放器版 （文档：https://h5player.bytedance.com/）

// npm install xgplayer-flv //安装西瓜播放器flv插件
import FlvJsPlayer from 'xgplayer-flv';

const flvurl = `http://127.0.0.1:7001/live/test.flv` //livego flv地址
// 不能写成http://localhost:7001/live/test.flv 否则会获取不到

class XgPlayer extends Component {
  constructor (props) {
    super(props)
    this.player = null;
  }

  componentDidMount() {
       this.init()
  }

  init(){
      this.player = new FlvJsPlayer({
        el:this.playerElement,
        url:flvurl,
        isLive: true,
        preloadTime: 30,
        minCachedTime: 5,
        cors: true,
      })
  }


  render() {
    return (
      <div id='livePlayer' ref={el => this.playerElement = el} style={{width:'100%'}}>
      </div>
    )
  }
}

flv.js版

// npm install reflv 
import Reflv from 'reflv';

export default class HttpFlv extends PureComponent {
  render() {
    return (
      <Reflv
        url='http://127.0.0.1:7001/live/test.flv'
        type="flv"
        isLive
        cors
        config={{
          enableWorker: true,
          enableStashBuffer: false,
          stashInitialSize: 128,
        }}
      />
    )
  }
}