携程移动直播探索( 二 ) 一、背

4）HTTP-Flv
HTTP-Flv：是一种将直播流模拟成flv文件，通过http协议进行下载的模式实现流媒体传输的协议。
它结合了RTMP的低延时，以及可以复用现有HTTP分发资源的流式协议。优势在于可以在一定程度上避免防火墙的干扰，可以使用HTTPS做加密通道，很好的支持移动端。
缺点在于由于它的传输特性，会让流媒体资源缓存在本地客户端，在保密性方面不够好。因为网络流量较大，它也不适合做拉流协议。
文章插图
我们选择RTMP作为主要的流协议的原因有：
1）RTMP是编码器输入的工业标准协议，基本上所有的编码器（摄像头等）都支持RTMP输出。
2）RTMP适合长时间播放的优势，可以保证尽可能的减少用户重连的次数。
3）直播场景互动性交高，对时延要求高。 RTMP通常情况下可以做到3秒延迟，满足大多数场景（hls大概10秒）。
4）WebRTC对浏览器支持较好，对native支持不够，需要做大量的开发工作。
5）由于开源软件和开源库的支持稳定完整（OBS软件，开源的librtmp库，服务端有nginx-rtmp插件）， RTMP在国内流行度很高，技术相对成熟。
目前市面上有很多云直播厂商。可以综合考虑推流协议，时延要求、推拉流费用， SDK的size以及扩展直播场景等方面来选择适合自己的sdk 。
三、直播前端框架当我们需要建立一个直播的时候，我们需要做什么呢？
简单的来说分3步。
第一步：从sdk中拿出推流Manager ，设置预览View ，设置推流地址。
@Overrideprotected void onCreate(Bundle bundle) {super.onCreate(bundle);setContentView(R.layout.live_push);livePusher = new LivePusher();videoView = findViewById(R.id. live_video_preview);livePusher. startCameraPreview(videoView);String pushUrl = "rtmp://...";livePusher.startPusher(PushUrl);}第二步：使用拉流Manager ，设置播放预览view ，设置拉流地址和流类型（RTMP、flv等）。
@Overrideprotected void onCreate(Bundle bundle) {super.onCreate(bundle);setContentView(R.layout.live_pull);livePlayer = new LivePlayer();playerView = findViewById(R.id.live_video_view);String pullURl = "rtmp://...";livePlayer.setPlayerView(playerView)livePlayer.startPlay(pullURl, PLAY_TYPE_LIVE_RTMP)}第三步就可以愉快地观看直播了。
携程直播就是在这个基础之上，进行了复杂的业务开发。视频推流和拉流是需要调用Native直播sdk的方法，所以需要保留在Native中。页面上的互动区域需要更快速的迭代方式，所以选择了RN 。
携程直播作出以下的分层结构：
文章插图
视频直播前端框架图
1）Lib
这一层主要放置整个直播项目通用的类。
ClientProxy：网络请求的通用字段封装和返回的常规错误码处理、序列化处理、通用Log日志控制等。
PushManger 和 PullManger 使用了 Proxy 设计模式用于减少sdk和业务代码的耦合。使用单例模式保证多个直播的配置统一。
Event：跨平台事件传递类（EventBus）， RN、Hybrid的事件都最终调用native的Event方法发送事件来保证多平台事件传递的可能。
RN：
Event.sendEvent("EventName",{ params: 0 });Native：
CtripEventCenter.getInstance().sendMessage(EventName,jsonObject)底层都是调用Native的EventBus 。
IMManger：消息的管理类。控制直播间的弹幕消息，开始结束消息以及礼物等消息的分发。
2）Page
把推流和拉流页面称为Page 。主要作用有两个，首先调用SDK做推拉流。其次，在页面中对RN和Native进行交互，例如从消息中获取流状态、礼物或者其他的消息。然后给RN发Event事件或者调用Native方法来完成相关消息的后续动作。
Page中注册消息监听。
interface CTLiveChatMessageListener {fun startLive()}Page.registerCTLiveChatMessageListener(listener)在listener中使用Event分发事件。
3）View层
Page上挂载了一个透明的RNView作为直播中交互View 。主要负责渲染业务交互view ，比如头像名称、评论列表、礼物动画、商品卡片、分享等。
在 page 的 onCreate 的时候把 view 挂载上去。
manager.beginTransaction().add(R.id.live_crn_fragment, rnFragment,"livePage").commitAllowingStateLoss()
文章插图
然后页面和逻辑放到RN中。
文章插图