视频直播一些事

移动直播的发展

     单一的文字，图片，视频这种单一的交流方式已经满足不了广大网民的需求，偏向于

实时的互动交流的移动直播发展的比较火爆

什么是视频？

  一组连续播放的动画

 视频： 原始内容 先进行编码压缩， 再封装然后组成视频

      帧率 frame rate: fps的单位，一秒钟内帧的个数

      码率 bite rate  :  单位时间内传输的数据量（体积）

      分辨率 Bit rate： （像素）

      图片群组： Group of picture &GOP: 一组图片的集合 (一帧一帧组成)

                               原始帧经过编码压缩后会变成  I帧（关键帧），B帧，P帧

        GOP：从第一个I帧到下一个I帧的间隔。

          帧数据: 压缩，编码后形成 GOP， GOP 封装后变成视频VIDEO

视频基础知识

     H5与视频直播（易传播，动态发布）

            直播：  

                      动态改变的视频

                      实时传输

                      边生产，边消费

                 摄像头（编码） 视频流（传输） Server（推流）播放器

       视频直播的结构：

              视频录制端

              视频播放器

              视频服务器

 采集流程：视频和音频是分开的，分开编码后，合成音视频包然后再上传给服务器

 服务器： 接收和转发的作用

         RTMP协议（PC端的flash，Native端使用系统播放器）

         HLS协议（video标签）

                        协议                               原理                                               延时          优点             使用场景

   

RTMP协议     长连接TCP            每个时刻受到数据后立刻发送                       2s           延时低              即时互动

HLS协议       短连接HTTP          集合一段时间数据生成ts分片文件更新m3u8          10s~30s 跨平台             H5直播

 

H5视频弹幕：

  注意事项： 

               移除视频外的弹幕需要清理dom和重用

               移动类型的弹幕要确定好位置，防止重叠

               固定位置弹幕的出现和消失时间

               整个video作为背景，弹幕层盖在上面

弹幕文字使用translateX位移

利用css3和transition-duration控制弹幕速度

文字碰撞和重叠检测

webscoket实时获取弹幕数据

        移动直播性能指标

一 视频首屏打开耗时

          1.优化直播业务逻辑

          2.精简资源加载，减少和延迟加载非直播逻辑的资源

          3. 直播页直出

   直播视频秒开

              修改GOP策略

                   1.播放视频逻辑优先发起，优先级最高

                   2.修改播放器逻辑，拿到关键帧即开始播放

                   3.在服务器端缓存上一个GOP

                   4.合理设置一个GOP时间

二 直播视频的延迟

                    ts文件：5s

                     延时：15s~20s

                   优化HTTP请求？

                          HTTP/2： 二进制分帧（基于本文的协议封装成一帧一帧的协议）

                                           多路复用（一个请求可以始终用一条请求，减少性能消耗）

                                            头部压缩

                                          服务端推送

三 直播页面的交互性能

                             评论内容数据获取：

                                     使用webscoket 

                                     使用长轮训

                                     定时器发起请求

                       评论和点赞的dom渲染

                                    dom及时清理

                                     使用局部滚动或者iscroll 

                                   css3动画和canvas

                          做好异常处理和错误提示

                           直播的交互逻辑和视频的播放逻辑区分开来

                          组件hybrid化

直播性能优化

 

直播系统搭建

 

IOS App

 

Nginx

 

HTML5