什么是推流，拉流
推流：把视频，音频数据采集好传输到服务器的过程
拉流：从服务器把视频，音频数据拉取下来进行播放的过程
拉流过程：
根据协议类型（如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标签采用了硬件加速，性能更好
实现一个简单的直播
- 下载安装livego（go编写的直播服务器，主播推流到音视频服务，音视频服务再转发给所有连接的客户端）
brew install go //安装go环境
git clone https://github.com/gwuhaolin/livego.git //clone livego
cd livego
go build // 进行编译
./livego 启动livego
启动成功各协议对应接口
image.png
- 使用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
- 在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,
}}
/>
)
}
}
网友评论