【bigo】年度盛典技术总结--BIGOLIVE前端组

[masongzhi]

背景

年末将至，各直播平台都会上线了相应的年末活动，各公会、主播也都纷纷参加活动冲年终业绩，而BigoLive作为YY旗下的海外直播平台当然也不落下步伐，相比与国内已经成规模的直播带货，海外发展形式则更为偏向于传统直播的“秀场”，所以我们的年末活动也都围绕这直播打赏模式做活动，并将各个用户/主播福利点满，争取早日业绩达标；为了完成这一目标，早在9月1号便密锣紧鼓地开发年度盛典的首个活动——区域家族赛，紧接其后的还有区域个人赛、全球家族赛、全球个人赛，BigoLive前端营收组从9月至11月陆续地投入大量人力参与开发年度盛典，其最终效果也同比上年度更佳。

活动流程与概况

• 活动主要分为预赛，晋级赛，半决赛与决赛四个阶段。参与的用户包含了家族，主播，用户，针对不同的人群设置不同的竞赛晋升机制，由于每类人群的利益都是息息相关的，所以在活动玩法上给每类人群足够有吸引力的奖励机制，让大家形成一个作战团体，家族靠主播获得票，主播靠家族协助运营粉丝获得更多打赏，主播通过粉丝打赏获得高排名，粉丝通过打赏获得荣誉称号。
• 从整体的活动设计上来看，逻辑还是较为清晰的，模块划分也合理，包含各赛程，榜单，活动规则，家族奖励，个人奖励，额外的还有相关活动的赛况介绍，包含打得火热的直播间，官方最新战况报道，粉丝精华帖子推荐等等，让用户看到了一个更加真实，更有感情更有温度的比赛。
• 每个赛段的活动是一环扣一环的，家族赛得到的复活卡可以在个人赛使用，区域家族赛打榜的前N名（各区域设置不同）能够得到参与全球赛的资格等；在原型与UI的设计上，产品和设计师、技术都达成了共识：后一个活动在前一个活动的基础上做改动，这样能够在保持UI风格不变的情况下，更利于前端做模块/组件的分割；另外在人员排期上也是安排了双线同时并进，更大程度的提前提测日期，以便上线前进行充分的测试。

前端技术设计

年度盛典可谓是把整个直播体系的功能都用上了一遍，从送礼打榜、贵族升级到bigo宠物养成、贴吧分享等等形成了一条引导用户操作的链路；展示模块上也是用上了直播间内web元素的活动面板、轮播入口、暴奖弹窗、半屏页拉起等功能，那么这篇文章我们会讲述年度盛典的整体设计以及使用到的公共模块。

1.活动主页

从UI图可以看出，UI对组件的划分也是与技术的想法是比较一致的。能从UI上每个模块之间都能进行解耦，封装出榜单、弹窗、赛程信息、直播间跳转链接、广告轮播等大量可复用的交互展示组件。此外，数据上也可以通过vuex进行状态管理，代码设计时就像搭积木一样对每个赛程阶段都构建一个组装界面，每个界面内是不同组件的组合，这样用户在切换不同阶段数据的时候只是更新 store 的状态即可，所以keep-alive+component就形成一个很好的配合；

• 六边形头像

  按照客户端的规范，家族头像是以六边形的形式展示的，使用web来展示六边形，我们准备的3种方案：

  1. 如果背景色固定，可以在正常头像上层遮盖一个挖空六边形的模板，但实际UI中背景颜色过多，遂放弃该方案；

  2. 使用clip-path描绘各个顶点，使用方便，缺点为兼容性不够全面；

  3. 由于要兼容4.3和ios9机型，所以不使用css3的语法，构思是使用多个变形的矩形进行叠加，运用overflow: hidden;进行边界的描绘;

     <template>
       <div class="hexagon-container">
         <div class="hexagon-container-in1">
           <div class="hexagon-container-in2" :style="{backgroundImage: `url(${backgroundImage})`}"></div>
         </div>
       </div>
     </template>
     <style lang="scss">
       .hexagon-container {
         width: 100%;
         height: 100%;
         overflow: hidden;
         visibility: hidden;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate3d(-50%, -50%, 0) rotate(120deg);
     
         .hexagon-container-in1 {
           overflow: hidden;
           width: 100%;
           height: 100%;
           transform: rotate(-60deg);
     
           .hexagon-container-in2 {
             width: 100%;
             height: 100%;
             visibility: visible;
             transform: rotate(-60deg);
             background: center no-repeat;
             background-size: cover;
           }
         }
       }
     </style>

     最终效果：

     

2.活动面板

活动面板是悬浮在直播间左上角（多人房为右下角）的一块180px*250px的webview，相信大家在其他直播软件也能看到其存在，差异就在于是客户端实现还是web实现；年度盛典作为需要强曝光的活动，所以活动面板也是需要配置开发的，实时性的数据更新是面板展示数据的关键，主播和观众的每一次操作都能反映在面板中，提高观众们的积极性，增加主播间的竞争性。
活动模板整体设计如下：

2.1 相关交互

活动面板是主播间主要的活动入口，所以产品会以面板为出发点规划用户的整体操作路径，点击面板主体部分可拉起礼物面板并定位到相关活动配置的礼物位置，点击顶部可通过内部jsbridge协议打开半屏页展示活动主页，另外直播间还有爆奖和提示弹窗，都可通过在面板监听数据更新，调用不同接口展示相应的页面，弹窗之间有队列进行管控，避免多个弹窗同时触发导致数据丢失。

3.奖励展示

奖励展示页面可以说是主播和用户们最为关注的一个页面了，不同区域会根据用户消费能力进行区域化配置奖励展示来增强活动与用户的匹配性，提升用户消费，拉动营收。

以上只是一个区域的一个分组赛程的奖励展示，Bigolive 作为全球直播平台此次共上线区域20+、每个区域下分组个数1-3个不等、奖励配置明细均需根据各个区域用户消费能力进行差异化配置。此时庞大的奖励展示配置就需要前端进行维护。考虑到研发手动填写奖励配置工作量甚巨、容易填写出错，且配置文件还可能频繁改动，导致一些不可预料的人为失误，目前采用的方案是：

• 由研发人员列出所需要填写的表格字段
• 由产品人员将奖励配置如：配置所属区域、奖励多语言、奖励图片、奖励数量、奖励id、展示类别等数据填写在表格中。
• 使用浏览器插件 sheetToCode 进行批量导出，前端再根据不同字段进行奖励展示的适配。
• 如果奖励配置有改动，研发人员只需要重新用插件导入一遍配置即可，不需要改动原有代码设计。

此方案还抽离成了公共组件，供四个年度盛典赛段共同使用，提高了代码的复用性，减少繁琐低效的人力精力投入。

4 Pear系统配置平台

Bigolive的营收活动，按上线区域可分为单区域活动、多区域活动与全球活动，那么在开发中就需要对多个国家和区域做本土化处理，支持23种语言的文案展示。在初期，我们的多语言策略是基于vue-i18n和多语言拉取脚本，使用excel-tobe-json3将多种语言处理成多份js文件，保存在本地，根据vue-i18n获取到的语言码异步加载多语言文案。

• 由此带来的问题是，活动线上运行期间，如果产品需要对某句文案做修改，就需要联系开发，开发在手动运行多语言脚本更新多语言文件，再构建项目代码、代码 CR、填写变更、层层审批，走严格的活动发版流程，耗时良久才能最终展示到用户面前。
• 如果文案修改多次的话，频繁的发版不但影响研发的日常工作效率，也提升了人为出错的概率，影响线上活动的稳定性；

这次年度盛典活动，采用了公司新搭建的Pear系统配置平台，通过在远程机器上运行多语言拉取脚本并同步到cdn机器，就可以得到一份由线上接口获取的多语言数据；在实际体验中也适当地优化了我们技术的开发流程，在开发过程中无需等待去区域运营翻译好文档，而是将业务代码提交上线后，在运行时进行vue-i18n的数据载入；另外我们封装了私有库@bigo/pear-fetch，用以读取构建参数区分拉取不同环境的配置文件，同时拉取一份保底的英文多语言配置（可自行设置保底语言）用以当前语言获取key失败时降级使用英文。

Pear系统接入到年度盛典中后，在整个活动进行到过程中，产品的文案变动20+次，修改完成在Pear点击发布即可上线，实现了文案的“热更新”，省去了多次构建发布的流程，统计下来至少节省了18个小时。除了文案的可配置，活动奖励，赛程安排等静态数据，也实现了平台配置化，活动过程中产品需要调整奖励数值和赛程安排，也能通过Pear自行配置，年度盛典的配置修改更灵活，从设计上将配置与业务代码解耦，降低了沟通成本并提高了整体效率。

5 mp4+canvas替代动图

年度盛典中设计大佬希望有更多的动态元素，在此前的方案中大多使用gif，但不能显示透明背景，Lottie、Svga等动画方案则需要为此引入较为庞大的第三方库，技术侧为了活动能够以较小的体积运行上线，在立项期间进行了调研；
webp效果很虽好，但在ios旧系统上无法运行，通过搜索没有发现比较好的解决方法；在搜寻客户端播放动图的技术中，发现设计为客户端做的动态礼物素材是一个左右镜像的mp4文件，通过对比俩边的像素点（黑色则渲染为透明）将图像结合在一起，这样处理的效果帧数高、体积小，所以便找寻web是否也可以通过这种方式播放无用户交互的动画；

default.mp4

H5实现alpha通道视频在这篇文章中发现了可通过video + canvas重新绘制视频内容，当描述的点在黑白镜像内是黑色，则设置为透明，通过实时监听video的play事件绘制canvas，我们就可以得到一个透明底的动图效果，且兼容性上有良好的表现；

但在实际测试中，发现低端机的性能不太好，优化点有两个：
1.完整方法为每个点都绘制，低端机则每俩个点才绘制；
2.不实时监听play事件，加上间隔时间虽然帧数会降低，但页面不会卡顿；

以下为Svga、png、mp4部分性能测试结果

另外也将video + canvas播放动图做成了npm库，之后其他业务线需要可以直接使用，不再需要调试。

总结

年度盛典中使用到的公共模块较多，而且今年前端的基建完善了许多，大多数模块都进行了更替迭代，作为业务使用人员需要进行严格的内部自测流程才可交付验收，这一部分压力便落到了进行年度盛典开发的同事们头上，在时间有限的情况下活动顺利验收提测、顺利保障线上运行，是大家共同的努力结果；