H5 与小程序直播开发

[MrZWH]

大前端

对于大前端来说，需要掌握以下至少一种技能：

• 服务类
  • Node.js、express.js、koa.js
• 3d 数据图像
  • three.js
• 二维图像
  • d3.js、raphael.js、echart.js
• 视频
  • video.js、hls.js、flv.js

怎么学

• 自己摸索不如前人指路
• 技术方案分分钟复制，不再烦恼
• 在巨人的肩膀上渐行渐远

直播原理

流程图：

收集的数据一开始是以原始二进制流的形式，通过 websocket 也好 http 也好，上传到服务器。原始的流不能用播放器播放，必须采用一定的协议做编码。H.264(视频的编码)、AAC（音频的编码）。 视频格式与浏览器兼容： YouTube 使用的 webm，流式的视频格式，hls 标准来说不是一种视频格式，是一种apple公司推出的视频协议，对视频来说是 ts 文件.ts格式，flv b站的视频格式，是早期的 flash 的视频格式，b站的 h5 播放器也能播放 flv 格式的，为什么呢？

直播协议

整个行业里做直播最常用的三种协议：

• HLS 协议
  • 视频格式是 ts
• RTMP 协议
  • 视频格式是 flv
• HTTP-FLV 协议
  • 视频格式是 flv

点播：多媒体播放器的术语，对播放器来说分点播和直播。

HLS 协议

对于 hls 协议，它会给一个 M3U8 文件。直播跟点播最大的区别：不会一下子给视频地址，会给一个M3U8 索引文件，浏览器会根据 索引文件的片段时长自动跟新 m3u8 文件。

HLS 协议快速预览

1. 安装 Safari 浏览器
2. 用 Safari 浏览器打开下面任意地址均可
   • http://live.streamingfast.net/osmflivech4.m3u8
   • http://live.streamingfast.net/osmflivech5.m3u8
   • http://live.streamingfast.net/osmflivech1.m3u8

m3u8 文件

m3u8 文件里面存放的是索引，每个索引对应这一个 ts 文件，但有时 m3u8 文件里可以嵌套 m3u8 文件。有时候拿到一个 m3u8 文件播放不了需要排查浏览器是否支持。

m3u8 文件还细分为几类：

• live playlist 动态列表，多用于直播
• event playlist 静态列表，在直播行业里几乎是见不到的，标准中有提到，实际应用中没人用
• vod playlist 全量列表 （vod 英文意思“点播”）

m3u8 文件动态列表里面的内容：

m3u8 文件是纯文本文件，不是多媒体的流。
文件内容第一行是 m3u8 文件的版本，使用时需要看浏览器是否支持该版本。

m3u8 文件静态列表里面的内容：

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:EVENT
#EXTINF:9.9001,
http://media.example.com/wifi/segment0.ts
#EXTINF:9.9001,
http://media.example.com/wifi/segment1.ts
#EXTINF:9.9001,
http://media.example.com/wifi/segment2.ts

m3u8 文件全量列表里面的内容：

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:9.9001,
http://media.example.com/wifi/segment0.ts
#EXTINF:9.9001,
http://media.example.com/wifi/segment1.ts
#EXTINF:9.9001,
http://media.example.com/wifi/segment2.ts
#EXT-X-ENDLIST

HTL 是直播里应用最广泛的协议

ts 文件

第一个 ts 文件会有一个 PAT 包，这个包告诉你要去找一个 PMT 的包，PMT 包告诉你后面会解析到 ts 包，告诉你这些 ts 包哪些是视频哪些是音频，很多个ts 组成一个叫 PES 的东西。
浏览器解析一个视频需要知道视频帧和音频帧，哪些ts 包能组成一个帧？需要解析 ts 规范，ts 中有个 header 它会告诉你这些信息。

RTMP 协议

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

视频音频的采集以PC 端为主，如果不是通过 web 的方式来做而是通过客户端的方式来做，这时基本走 RTMP 协议，如果采集端用 web 端来做，比如 h5 ，那么它的协议叫做 webRTC，这是两种不同的技术方案。通常给主播的是客户端采用RTMP 效率比较高。

RTMP 协议在传输过程中也是 flv 视频格式的，只是通信的手段不一样，tcp 通信有三次应答，hls 是 http 的不需要走 3次应答的过程。所以使用 rtmp 时需要注意跟用户端的应答处理。

HTTP-FLV 协议

RTMP 的升级版，RTMP 比 hls 用起来更复杂，hls 实时性差，因为请求一个 m3u8 文件会请求到多个 ts 文件，所以延时的程度跟 ts 文件的切片分片数量有关系。HTTP-FLV 结合了 hls http 请求的优点和 rtmp 低延时的特性，中间建立了一个 flv 长连接。因为中间建立了一个长连接所以通信过程没那么复杂，唯一跟 rtmp 的区别就是播放器跟 cdn 建立的连接是直接的 http 请求。

相对RTMP的优点：

• 可以在一定程度上避免防火墙的干扰（例如，有的机房只允许 80 端口通过）。
• 可以很好的兼容 HTTP 302 的跳转，做到灵活调度。请求 cdn 时如果cdn 的某一个节点出现问题的时候必须要 302 重定向到其它的节点，如果这个都做不到的话就不够灵活会请求失败。
• 可以使用 HTTPS 做加密通道
• 可以很好的支持移动端（Android，IOS）

直播原理总结

• 了解直播协议的分类
  • 三种
• 理解对应协议的通信原理
• 理解直播协议之间的区别（hls 好用但是延时大，RTMP 实时性比较好但是使用起来比较复杂，HTTP-FLV结合两者的优点但是视频格式是flv的）
• 掌握不同场景采用什么协议
  • 采集这一块用客户端来做的，通常是使用 rtmp 协议，因为后端对 tcp 通信比较了解。如果对延时不那么敏感，像斗鱼直播都是采用的 hls 协议，传输的是 ts 文件而不是 flv，它也不需要建立一个长连接，考虑到服务器的并发都是有好处的。

[MrZWH]

video 详解

在 video src 中有些地址回事 blob:https://...开头的地址，这是虚拟地址，下载不到的。

[MrZWH]

直播源的制作

方法一 Nginx + ffmpeg：

1. 安装 Nginx
   • Mac: brew install nginx-full --with-rtmp-module
   • Windows: http://nginx.org/en/docs/windows.html
2. 安装 ffmpeg
   • Mac: brew install ffmpeg
   • Windows: https://ffmpeg.zeranoe.com/builds/
3. 配置 Nginx
4. 准备视频
5. 利用 ffmpeg 推流 安装 VLC 和 Safari 浏览器
   • mac 系统：https://www.videolan.org/vlc/index.zh.html
   • Windows: https://www.videolan.org/vlc.index.zh.html

方法二 集成服务：

1. 下载服务
2. 安装服务
3. 准备源视频
4. 开启服务
5. 利用 ffmpeg 推流
   • ffmpeg -re -i test.mp4 -c copy -f flv rtmp://localhost:1935/live/movie