大前端介绍与直播原理

一.大前端

1.大前端需要掌握的技能

前端基本技能
- Vue
- React
- Angular
- Webpack
- ES6
服务类
- Node.js
- express.js
- koa.js
- egg.js
3D数据图像（用于游戏）
- three.js
二维图像
- d3.js
- raphael.js
- echart.js
视频相关
- video.js
- hls.js
- flv.js

二.直播原理

1.直播流程

在这里插入图片描述

2.视频格式与浏览器兼容性

在这里插入图片描述

hls更准确的说是一种视频协议，文件对应的后缀是ts，适配Safari浏览器，是苹果推出的视频协议
flv是早期的flash格式
MP4和WEBM是偏点播使用的视频格式（如爱奇艺）
TS和FLV是偏直播使用的视频格式（如斗鱼）

3.视频直播常用协议1：HLS协议

播放器使用video作为点播和直播的基石（将M3U8索引文件[是ts文件的索引]给video进行播放，播放时会被解析成多个ts直播流片段，浏览器会实时向服务器请求M3U8文件里面是每个片段，之后会再次下载，之后会再次请求M3U8等等，从而保证直播的实时和连续）

在这里插入图片描述

有事M3U8文件中还会嵌套M3U8文件（通常M3U8文件就会索引各个TS文件）

在这里插入图片描述

M3U8的分类

event playlist静态列表（不常用）
live playlist动态列表【常用于直播中，拿到M3U8文件其中有TS文件索引，TS文件执行后，又会重新请求M3U8文件，其中的内容发生变化，有新的流过来了】
vod playlist全量列表【常用于点播中，拿到M3U8文件后，文件中信息不变化】

如何知道M3U8是动态的还是静态的？

通常的M3U8动态列表文件信息，如下

#EXTM3U    版本，与浏览器有关，有的浏览器无法播放对应版本
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:10 默认时长
#EXT-X-MEDIA-SEQUENCE:26 序号
#EXTINF:9.901, 时间戳，大概的视频时长
http://media.example.com/wifi/segment26.ts
#EXTINF:9.901, 时间戳，大概的视频时长
http://media.example.com/wifi/segment27.ts
#EXTINF:9.501, 时间戳，大概的视频时长 
http://media.example.com/wifi/segment28.ts

通常的M3U8静态列表文件信息，如下

#EXTM3U    版本，与浏览器有关，有的浏览器无法播放对应版本
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:10 默认时长
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:EVENT 表示是静态列表
#EXTINF:9.901, 时间戳，大概的视频时长
http://media.example.com/wifi/segment26.ts
#EXTINF:9.901, 时间戳，大概的视频时长
http://media.example.com/wifi/segment27.ts
#EXTINF:9.501, 时间戳，大概的视频时长 
http://media.example.com/wifi/segment28.ts

通常的M3U8全量列表文件信息，如下

#EXTM3U    版本，与浏览器有关，有的浏览器无法播放对应版本
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:10 默认时长
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD 表示全量列表
#EXTINF:9.901, 时间戳，大概的视频时长
http://media.example.com/wifi/segment26.ts
#EXTINF:9.901, 时间戳，大概的视频时长
http://media.example.com/wifi/segment27.ts
#EXTINF:9.501, 时间戳，大概的视频时长 
http://media.example.com/wifi/segment28.ts
#EXT-X-ENDLIST 表示列表结束，浏览器不要在更新M3u8文件啦

每个ts文件中是什么内容

在这里插入图片描述

首先需要找PAT的包
PAT包告诉你需要去找一个PMT的包
PMT包告诉你后面解析的ts包哪些是视频，哪些是音频
多个ts包按照视频和音频分类将连续的包组合成一个PES文件（帧）

4.视频直播常用协议2：RTMP协议（开发客户端通常采用）

RTMP协议（传输的过程中也是flv视频格式的，只是传输手段不同）
- RTMP是Real Time Messaging Protocol（实时消息传输协议）的首字母缩写。该协议基于TCP，是一个协议族，包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。RTMP是一种设计用来进行实时数据通信的网络协议，主要用来在Flash、AIR平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。
RTMP协议视图

在这里插入图片描述

5.视频直播常用协议3：HTTP-FLV协议（兼备RTMP低延时和HLS传输快的特性，视频格式是FLV）

RTMP协议升级版HTTP-FLV协议
HTTP-FLV协议结合了HLS协议优点：纯HTTP请求；结合RTMP低延时的特性，中间采用FLV长连接。
HTTP-FLV协议与RTMP的区别与优势
- 可以在一定程度上避免防火墙的干扰（如，有的机房只允许80端口通过）
- 可以很好的兼容HTTP302跳转，做到灵活调度
- 可以使用HTTPS做加密通道
- 很好的支持移动端（Android和IOS）

大前端介绍与直播原理

一.大前端

1.大前端需要掌握的技能

二.直播原理

1.直播流程

2.视频格式与浏览器兼容性

3.视频直播常用协议1：HLS协议

4.视频直播常用协议2：RTMP协议（开发客户端通常采用）

5.视频直播常用协议3：HTTP-FLV协议（兼备RTMP低延时和HLS传输快的特性，视频格式是FLV）

猜你喜欢