这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战
小白：我们今天遇到的是视频丢包导致的花屏问题，是流媒体相关的问题。 小白：本次是在移动端出现的问题，移动端我们是使用websocket将h264格式的流传给web端，进行解码绘制到canvas上。
什么是流媒体？
流媒体（streaming media）是指将一连串的媒体数据压缩后，经过网上分段发送数据，在网上即时传输影音以供观赏的一种技术与过程，此技术使得数据包得以像流水一样发送；如果不使用此技术，就必须在使用前下载整个媒体文件。
H264
H.264是 国际标准化组织（ISO）和 国际电信联盟（ITU）共同提出的继MPEG4之后的新一代数字视频压缩格式。
项目背景
- 移动端项目
- 解析 streamer 流，使用 canvas 渲染。
- 流程：streamer —> h264 —> websocket —> web-javascript解码 —> canvas
问题描述
1、关闭虚拟手柄，再次连接，会出现花屏
2、虚拟手柄转屏后，出现花屏
3、虚拟手柄切换前后台，出现花屏
4、TV盒子切换分辨率后，虚拟手柄也会出现花屏
问题分析
- H264 解码有个 IBP ，I 是关键帧，是一帧完整的图像，必须要先有个 I 才能解码后面的 BP， BP帧 可以随便少，但是I帧不能少，I帧 是隔一段才有一个，当客户端连接上来，服务器会以最快速度找到流中最近I帧，从I帧开始发送直播数据；
- 花屏问题，是丢包导致的。
问题解决方法
- 设定每隔5S发送一个 I帧，得到I帧后开始发送直播数据，这期间可能会出现黑屏问题，如果从第4S连进来，可能就没问题，从第1S连进来，就会出现3、4S黑屏情况。
- 在解析到第一个 I帧 之前，先推图，I帧解析成功在播放视频。
小白：我们公司也有用到web端项目的播流，web端我们使用的是什么类型的流呢?
Web端流媒体协议
1. Web Real-Time Communication (WebRTC)
-
WebRTC 是 Google 推出的，用作Web端实现流媒体的协议；
-
使用 video标签 进行播放；
-
我们常见的淘宝直播，便是基于 WebRTC 实现的低延迟直播。
2. Real-Time Messaging Protocol (RTMP)——实时消息传输协议
-
RTMP 是 Macromedia 开发的一套视频直播协议，现在属于 Adobe；
-
基于 Flash 进行播放，需要依赖 Flash 插件, 虽然 RTMP 协议延迟非常低，但 Flash 插件正在被迅速淘汰，因此目前 RTMP 主要用于提取 stream，不建议使用该协议进行播流。
