分类： 云计算
2022-12-02 14:17:16
目前视频直播，尤其是移动端的视频直播已经火到不行了，基本上各大互联网公司都有了自己的直播产品，所以对于直播的一些基本知识和主要技术点也要有所了解，本次分享就向大家介绍一下分享一下直播的整个流程和一些技术点，并动手实现一个简单的Demo。
直播视频的录制
对于H5视频录制，可以使用强大的 webRTC （Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在 PC 的 Chrome 上支持较好，移动端支持不太理想。
使用 webRTC 录制视频基本流程是：
调用 window.navigator.webkitGetUserMedia() 获取用户的PC摄像头视频数据；
将获取到视频流数据转换成 window.webkitRTCPeerConnection (一种视频流数据格式)；
利用 webscoket 将视频流数据传输到服务端。
由于许多方法都要加上浏览器前缀，所以很多移动端的浏览器还不支持 webRTC，所以真正的视频录制还是要靠客户端（iOS,Android）来实现,效果会好一些。
HTML5如何播放直播的视频
对于视频播放，可以使用 HLS(HTTP Live Streaming)协议播放直播流，iOS和 Android 都天然支持这种协议，配置简单，直接使用 video 标签即可。
什么是 HLS 协议
简单讲就是把整个流分成一个个小的，基于 HTTP 的文件来下载，每次只下载一些，前面提到了用于 H5 播放直播视频时引入的一个 .m3u8 的文件，这个文件就是基于 HLS 协议，存放视频流元数据的文件。
每一个 .m3u8 文件，分别对应若干个 ts 文件，这些 ts 文件才是真正存放视频的数据，m3u8 文件只是存放了一些 ts 文件的配置信息和相关路径，当视频播放时，.m3u8 是动态改变的，video 标签会解析这个文件，并找到对应的 ts 文件来播放，所以一般为了加快速度，.m3u8 放在 Web 服务器上，ts 文件放在 CDN 上。
.m3u8 文件，其实就是以 UTF-8 编码的 m3u 文件，这个文件本身不能播放，只是存放了播放信息的文本文件。
HLS 的请求流程
流程大体如下：
HTTP 请求 m3u8 的 url；
服务端返回一个 m3u8 的播放列表，这个播放列表是实时更新的，一般一次给出5段数据的 url；
客户端解析 m3u8 的播放列表，再按序请求每一段的 url，获取 ts 数据流。
HLS 直播延时
我们知道 hls 协议是将直播流分成一段一段的小段视频去下载播放的，所以假设列表里面的包含5个 ts 文件，每个 TS 文件包含5秒的视频内容，那么整体的延迟就是25秒。因为当你看到这些视频时，主播已经将视频录制好上传上去了，所以时这样产生的延迟。当然可以缩短列表的长度和单个 ts 文件的大小来降低延迟，极致来说可以缩减列表长度为1，并且 ts 的时长为1s，但是这样会造成请求次数增加，增大服务器压力，当网速慢时回造成更多的缓冲，所以苹果官方推荐的 ts 时长时10s，所以这样就会大改有30s的延迟。所以服务器接收流，转码，保存，切块，再分发给客户端，这里就延时的根本原因。即时通讯聊天软件app开发可以加蔚可云的v：weikeyun24咨询
但是 H5 直播视频却有一些不可替代的优势:
传播性好，利于分享等操作；
可以动态发布，有利于实时迭代产品需求并迅速上线；
不用安装 App，直接打开浏览器即可。
以iOS为例演示采集（录制）音视频数据
关于音视频采集录制，首先明确下面几个概念：
视频编码：所谓视频编码就是指通过特定的压缩技术，将某个视频格式的文件转换成另一种视频格式文件的方式，我们使用的 iPhone 录制的视频，必须要经过编码，上传，解码，才能真正的在用户端的播放器里播放。
编解码标准：视频流传输中{BANNED}最佳为重要的编解码标准有国际电联的 H.261、H.263、H.264，其中 HLS 协议支持 H.264 格式的编码。
音频编码：同视频编码类似，将原始的音频流按照一定的标准进行编码，上传，解码，同时在播放器里播放，当然音频也有许多编码标准，例如 PCM 编码，WMA 编码，AAC 编码等等，这里我们 HLS 协议支持的音频编码方式是 AAC 编码。
利用 iOS 上的摄像头，进行音视频的数据采集，主要分为以下几个步骤：
音视频的采集，iOS 中，利用 AVCaptureSession 和 AVCaptureDevice 可以采集到原始的音视频数据流。
对视频进行 H264 编码，对音频进行 AAC 编码，在 iOS 中分别有已经封装好的编码库来实现对音视频的编码。
对编码后的音、视频数据进行组装封包；
建立 RTMP 连接并上推到服务端。
关于 RTMP
Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。和 HLS 一样都可以应用于视频直播，区别是 RTMP 基于 flash 无法在 iOS 的浏览器里播放，但是实时性比 HLS 要好。所以一般使用这种协议来上传视频流，也就是视频流推送到服务器。
关于推流
所谓推流，就是将我们已经编码好的音视频数据发往视频流服务器中，在 iOS 代码里面一般常用的是使用 RTMP 推流，可以使用第三方库 librtmp-iOS 进行推流，librtmp 封装了一些核心的 API 供使用者调用。例如推流 API 等等，配置服务器地址，即可将转码后的视频流推往服务器。
那么如何搭建一个推流服务器呢？
视频直播中的用户交互
对于直播中的用户交互大致可以分为：
送礼物；
发表评论或者弹幕。
对于送礼物，在 H5 端可以利用 DOM 和 CSS3 实现送礼物逻辑和一些特殊的礼物动画，实现技术难点不大。
对于弹幕来说，要稍微复杂一些，可能需要关注以下几点：
弹幕实时性，可以利用 webscoket 来实时发送和接收新的弹幕并渲染出来；
对于不支持 webscoket 的浏览器来说，只能降级为长轮询或者前端定时器发送请求来获取实时弹幕；
弹幕渲染时的动画和碰撞检测(即弹幕不重叠)等等。
