直播知识小科普(Web直播你需要先知道这些)

不念不忘少年蓝@ 2023-09-23 20:19 96阅读 0赞

## 直播知识小科普 ##

1.  一个典型的直播流程：录制->编码->网络传输（推流->服务器处理->CDN分发）->解码->播放
2.  IPB：一种常用的视频压缩方案，用I帧表示关键帧，B帧表示前向差别帧，P帧表示双向差别帧
3.  GOP (Group of Pictures)：GOP 越长（I帧之间的间隔越大），B 帧所占比例越高，编码的率失真性能越高。虽然B帧压缩率高，但解码时CPU压力会更大。
4.  音视频直播质量好坏的主要指标：**内容延时**、**卡顿（流畅度）**、**首帧时长**
5.  音视频直播需要克服的主要问题：网络环境、多人连麦、主辅路、浏览器兼容性、CDN支持等
6.  **MSE**(Media Source Extensions)：W3C 标准API，解决 HTML5 的流问题（HTML5 原生仅支持播放 mp4/webm 非流格式，不支持 FLV），允许JavaScript动态构建 `<video>` 和 `<audio>` 的媒体流。可以用MediaSource.isTypeSupported() 判断是否支持某种MINE类型。在ios Safari中不支持。

![14674e155d5a4e36b5149ffc3e4cc0dd.png][]

1.  **文件格式/封装格式/容器格式**：一种承载视频的格式，比如flv、avi、mpg、vob、mov、mp4等。而视频是用什么方式进行编解码的，则与Codec相关。举个栗子，MP4格式根据编解码的不同，又分为nMP4、fMP4。nMP4是由嵌套的Boxes 组成，fMP4格式则是由一系列的片段组成，因此只有后者不需要加载整个文件进行播放。
2.  **Codec**：多媒体数字信号编码解码器，能够对音视频进行压缩（CO）与解压缩( DEC ) 。CODEC技术能有效减少数字存储占用的空间，在计算机系统中，使用硬件完成CODEC可以节省CPU的资源，提高系统的运行效率。
3.  **常用视频编码**：MPEG、H264、RealVideo、WMV、QuickTime。。。
4.  **常用音频编码**：PCM、WAV、OGG、APE、AAC、MP3、Vorbis、Opus。。。

## **Web直播现有方案比较** ##

## RTMP协议 ##

1.  基于TCP
2.  adobe垄断，国内支持度高
3.  浏览器端依赖Flash进行播放
4.  2~5秒的延迟

## RTP协议 ##

1.  Real-time Transpo*rt P*rotocol，IETF于1996提出的一个标准
2.  基于UDP
3.  实时性强
4.  用于视频监控、视频会议、IP电话
5.  CDN厂商、浏览器不支持

## HLS 协议 ##

1.  Http Live Streaming，苹果提出的基于HTTP的流媒体传输协议
2.  HTML5直接支持(video)，适合APP直播，PC断只有Safari、Edge支持
3.  必须是H264+AAC编码
4.  因为传输的是切割后的音视频片段，导致内容延时较大![d3d6ed5d5deb4153b921df633c383b83.png][]

## flv.js ##

1.  Bilibli开源，解析flv数据，通过MSE封装成fMP4喂给video标签
2.  编码为H264+AAC
3.  使用HTTP的流式IO([fetch][]或[stream][])或WebSocket协议流式的传输媒体内容
4.  2~5秒的延迟，首帧比RTMP更快

## WebRTC协议 ##

![9bb291ff134e4d18b9512119676d7496.png][]

1、Google力推，已成为W3C标准

2、现代浏览器支持趋势，X5也支持（微信、QQ）

![format_png][]

3、基于UDP，低延迟，弱网抗性强，比flv.js更有优势

方案CPU占用帧率码率延时首帧flv.js0.430700kbit/s1.5s2sWebRTC1.930700kbit/s0.7s1.5s

4、支持Web上行能力

5、编码为H264+OPUS

6、提供NAT穿透技术（ICE）

**实际情况下，当用户数量很大时，对推流设备的性能要求很高，复杂的权限管理也难以实现，采用P2P的架构基本不可行。对于个别用户提供上行流、海量用户只进行拉流的场景，[腾讯课堂][Link 1]实现了一种P2S的解决方案。**进一步学习可阅读jaychen的系列文章[《WebRTC直播技术》][WebRTC]。

![f280262fbfe3471384a6baf5b3100300.png][]

## **小程序+直播**技术方案 ##

1.  基于RTMP，官方说底层使用HTTP/2的一种内部传输机制，但又说是基于UDP的，这就搞不懂了。。。
2.  live-pusher 和 live-player 没有限制第三方云服务
3.  可直接使用腾讯云视频直播能力，只需配置好推流url、播放url即可

推流url：

![cdc8295d14478c4bbf7fa7a723ca5fe0.jpeg][]

播放url：

![97580a860311acb5b3971d0c77ff2d08.jpeg][]

下面是我根据官网教程搭建的一个音视频小程序，搭建过程简单，同一个局域网下直播体验也很流畅（读者也可直接搜索**腾讯视频云**小程序进行体验）：

![6f6d35bac96943d0a27c629451188d6b.png][]

前端核心代码还是相当简洁的：

*  live-pusher组件：设置好url推流地址（仅支持 flv, rtmp 格式）等参数即可，使用bindstatechange获取播放状态变化
 *  live-player组件：设置后src音视频地址（仅支持 flv, rtmp 格式）等参数即可，使用bindstatechange获取播放状态变化

[14674e155d5a4e36b5149ffc3e4cc0dd.png]: https://img-blog.csdnimg.cn/14674e155d5a4e36b5149ffc3e4cc0dd.png
[d3d6ed5d5deb4153b921df633c383b83.png]: https://img-blog.csdnimg.cn/d3d6ed5d5deb4153b921df633c383b83.png
[fetch]: https://link.zhihu.com/?target=https%3A//fetch.spec.whatwg.org/
[stream]: https://link.zhihu.com/?target=https%3A//streams.spec.whatwg.org/
[9bb291ff134e4d18b9512119676d7496.png]: https://img-blog.csdnimg.cn/9bb291ff134e4d18b9512119676d7496.png
[format_png]: https://img-blog.csdnimg.cn/img_convert/042e342ec0c0a48c222de6535b760676.webp?x-oss-process=image/format,png
[Link 1]: https://link.zhihu.com/?target=https%3A//ke.qq.com/
[WebRTC]: https://link.zhihu.com/?target=http%3A//imweb.io/topic/5930541b7720c3b21fa5c303
[f280262fbfe3471384a6baf5b3100300.png]: https://img-blog.csdnimg.cn/f280262fbfe3471384a6baf5b3100300.png
[cdc8295d14478c4bbf7fa7a723ca5fe0.jpeg]: https://img-blog.csdnimg.cn/img_convert/cdc8295d14478c4bbf7fa7a723ca5fe0.jpeg
[97580a860311acb5b3971d0c77ff2d08.jpeg]: https://img-blog.csdnimg.cn/img_convert/97580a860311acb5b3971d0c77ff2d08.jpeg
[6f6d35bac96943d0a27c629451188d6b.png]: https://img-blog.csdnimg.cn/6f6d35bac96943d0a27c629451188d6b.png