闲鱼直播flutter化实践

背景

直播带货已成为近年来最热的“风口”，已成为电商升级的新突破口。闲鱼作为国内最大的二手交易平台市场，直播带货也成为推动成交的强烈需求。但是闲鱼直播原先接入外部提供的直播sdk，存在以下几个痛点问题：

1. 业务定制困难。接外部sdk都存在“改不动，不敢改”困境。目前闲鱼直播和sdk提供方业务特点存在一定差异，产品提出的定制化需求难以得到满足

2. 双端一致性难以保证。android，ios各提供一套sdk，两端表现并非完全一致，存在bug也不敢轻易升级sdk（直播sdk还是2019年版本）

3. 排查舆情问题难度大。目前直播sdk里面日志有哪些，以及日志系统在哪里都不清楚，有问题得求助别人排查。

因此闲鱼想基于直播sdk的一些能力，做一套跨平台直播sdk，减少开发维护成本。考虑到闲鱼在flutter技术栈上有一定技术积累，新版直播通过Flutter实现跨平台开发（支持ios，android），再接入闲鱼的全链路日志系统，能解决目前闲鱼直播面临的问题。

整体设计

基本原则

在设计开发之初，我们定下了几条原则:

1. 复用原生业务无关的核心能力：这里主要考虑到开发成本因素。比如底层视频编解码能力，webview容器等这些，native已经做的相当成熟，如果在flutter重新做，势必会大大延长开发时间。通过插件化复用原生层能力，将加快开发进度

2. native层尽量做薄，flutter层尽量做厚：我们知道flutter是个移动UI框架，很擅长做UI。上一条原则强调复用原生能力，我们很容易陷入一个误区：业务逻辑作为中间的地带（不属于UI，也不属于底层核心能力），放到哪都可以。

如果放到native层，那么flutter就会做的很薄，仅提供有限的接口能力。这样会带来一个问题：如果我们想修改一个业务逻辑，实际上还得改三处代码（android，ios，flutter），开发成本和原来差不多。

如果放到flutter层，那么修改业务代码只需要改flutter一处即可，真正做到跨平台。

功能划分

对照线上老native闲鱼直播间的很多功能，我们发现核心部分主要有：视频播放，评论，分享，关注，分享，宝贝口袋等等（下图左）。这其中难点涉及到如何划分：哪些是核心能力，必须依赖native能力？哪些能flutter化？

首先我们从视觉角度分析,可将直播间拆解为以下三层：播放渲染层，互动容器层，UI层（见下图右）。

播放渲染层：作用是渲染拉流数据，完成视频播放，业务无关。我们可以复用底层拉流和编解码能力，播控控逻辑上移到flutter层。

互动渲染层：基于动态容器完成渲染，完成一些互动玩法（例如直播间红包，拍卖组件等）。这个动态容器是基于nativ