无线端的弹幕实现方案

前段时间做了游戏的相关业务,其中弹幕相关的内容自成一块。弹幕已经不只是最初的视频弹幕了,战火已经烧到了评论区,烧到了手机淘宝的首页搜索结果。作为一种近几年迅速燃起的内容呈现形式,有必要适时引入,对于休闲化、娱乐化的业务更是如此。那么,要做出一个较为完整的弹幕效果来,需要哪几个部分呢?尤其是,在集团内部,怎么快速地搭建起一个可用的弹幕框架来?本文分3块来阐述。

  1. 弹幕渲染层
  2. 弹幕数据通道
  3. 弹幕服务逻辑

弹幕渲染层

目前弹幕的呈现载体主要是Web、无线客户端。因为我们的工作主要针对无线端,所以本文主要以无线端为例——包括iOS,Android两类系统。

碰撞检测

弹幕无非是动画,是分布在时间轴上图像的连续运动。自然可以用Native的动画来实现。不过弹幕动画有一个重要的特征,即保持动画元素(sprites)尽可能少地碰撞,以使弹幕承载的信息能够清晰地传达,执行碰撞检测是必须的。但弹幕里的碰撞检测相对简单,因为弹幕的运动轨迹相对简单并且容易预测,所以只需要在一条弹幕将要显示之前,根据已经显示的弹幕(位置、速度、活跃的时间等)来确定他的运动轨迹。以尽最大可能地在其生命周期内不与已有弹幕冲突。

弹幕的同步问题

弹幕不是超然而独立的,往往相伴业务场景而生,目前可见最多的场景是视频,直播或者录播皆有。到此时则涉及到一个时间同步的问题。比如,一位用户在看一段时间第314s的时候突然有感而发,发出了一条弹幕,自然希望其他观众能够在看到视频此刻看到他的弹幕。所以一条弹幕上屏的时间是需要明确的,想想那些年文不对题的字幕君吧。那么,如何实现呢?一般,可以为一条弹幕提供一个时间点delay,当到了这个时刻,由控制器把这条弹幕播放出去。但仅仅这些是不够的,因为视频还存在暂停,存在快进快退,所以你必须也为弹幕组件提供类似的接口,以期能和视频内容同步。其他的应用场景也是类似的。比如下面的样子(弹幕在向左运动):

弹幕的样式

弹幕的运动样式主要有两种,一种是横向的过场弹幕,一种是纵向的浮动弹幕。弹幕的内容形式不外乎一段文字或者图片,其中以文字为主。对于文字,则有文字的颜色、背景、字体、边框等属性,这一切必须是灵活可配的。当然实际应用中一个APP需要的是风格统一的、优雅美观的弹幕动画。所以弹幕的方向不要太混乱,不要有太多不一样的主题配置。你可以定义几类色调协调但样式不同的弹幕,然后由业务代码决定使用哪一种风格的弹幕。

渲染效率

性能直接关系到用户体验。在绝大多数场景中,锦上添花的弹幕往往伴随着具体的业务逻辑,业务逻辑会占用CPU——甚至很高的CPU,比如视频解码———所以弹幕动画应该尽可能地使用GPU渲染。为应对线上可能的大规模弹幕的情况,本地最好也能测试到大量弹幕的情况。可以使用一个定时器,模拟客户端频繁接受渲染弹幕的情况,看看实际中弹幕的性能究竟如何。

限流

弹幕稀稀疏疏地铺满半屏窗口,朦胧中犹抱琵琶半遮面的感觉,自然是最好的。但万一遇到弹幕决堤,内容疯狂涌来,那当如何应对?渲染内容层层堆叠,既看不清,又降低了系统应用性能,为此可以在业务或者组件中选择限流。

弹幕数据层

若不考虑弹幕在用户间共享,只需下图左侧的模块即可;若需引入弹幕共享、存储功能,则如下图右侧所示。

但实际情况往往比这复杂。弹幕很多时候是实时的,最好使用长连接来传输数据。业务导向的项目,很少从零开始开发专门的弹幕服务通道,而是尽可能地应用已有的服务组件。淘宝在长连通道上有多个选择,但其功能又是不尽相同的。这种不同也会带来弹幕实现方案的不同。比如通道A支持订阅功能,消息会根据订阅关系分发;而通道B是单纯的通道,订阅关系由业务方维护,凡是发送到客户端的消息都会接收,所以流量需要业务服务端来控制。

经过服务端的必要性

仅仅使用长连接通道是不够的,还需引入业务服务器,其原因如下:

  • 如果长连通道不支持客户端发送消息,那么弹幕的发送要走其它的接口
  • 因业务原因,需要统一多个长连接通道,以便更好地做 多端同步,故引入中间服务器做协调
  • 一些业务相关的需求,不适合在长连接服务器上做,比如内容过滤、弹幕存储、服务端限流等

整体的数据流如下图所示:

消息格式制定

通过长连接传输的弹幕消息会有一些附加数据需要考虑,比如弹幕的样式、出现的时间,随着业务的扩展,可能需要更多的辅助字段。所以弹幕消息必须能够向后兼容,一般可设置为message,version两个字段,message为纯粹的json字符串,version表示消息的版本号。先解析version,根据判断得到的version选择响应的解析样式。太多的附加信息会降低数据的利用率,此是需要权衡的地方。当然,如果针对的是在线视频业务,弹幕的流量相比于视频流而言,就显得不那么重要了。

自发的弹幕消息

主要有两种:

  1. 用户发送了弹幕消息后,通过网络发送消息的同时直接将弹幕数据上屏,以提升用户所见即所得的体验;当收到相同的弹幕消息后,将消息抛弃。
  2. 用户发送了弹幕消息后,通过正常的网络接收消息然后渲染呈现,这样会因延时损失一定的用户体验,但逻辑简单,并且可以控制所有弹幕数据。

弹幕服务层

主题维护

主题代表弹幕消息围绕的中心。在不同的业务场景中,主题的呈现方式可能是不同的。在视频直播业务中,主题代表了一个个直播房间,弹幕围绕着视频展开;在新闻咨询业务中,主题代表了一则则新闻,弹幕围绕着新闻展开。客户端与主题存在多对一的关系,如下图所示:

用户U1、U2订阅了主题T1,用户U3、U4订阅了主题T2。由于处于不同的语境中,U1、U2发送的弹幕U3、U4应该是不能接收到的,反之亦然。很自然服务端需要维护一个用户到主题的映射表简单的实现是,客户端监测到用户进入特定主题之后,发送一条网络请求登记这样一条订阅;用户离开特定主题时发送网络请求注销登记。但由于实际客户端运行场景复杂,离开特定主题不一定来得及发送网络请求。补充方案是,由客户端每隔特定时间心跳一次,用以告知服务端维护映射表。一旦服务端一段时间没有监听到心跳信息,就取消映射表中的一条订阅。这里需要注意的是,服务端需要防止心跳的伪造,否则可能映射表可能会因攻击而混乱掉。一旦映射表正确建立,用户发送的弹幕消息就可以准确传达到相同主题的用户客户端了。

弹幕存储

对于直播等即时性业务,弹幕数据一般没有重播的必要;但是对于录播,则需要持久化弹幕,如是方能在其他用户看视频的时候看到其他人发出过的弹幕消息。持久化这类弹幕数据,必须在存储弹幕的时候带上弹幕对应的时间点。在用户进入了某一主题之后,批量返回给客户端对应的弹幕数据,由客户端将弹幕数据对应到视频业务响应的时间点上;如果此主题对应的弹幕数据很多,服务端可能实现做一定的筛选;对于录播同时新发送的弹幕,则由服务端记录并添加到对应的弹幕数据列表中。

转载自:http://taobaofed.org/blog/2016/05/13/barrage-in-mobile/

作者:拂铭

时间: 2024-08-30 09:17:11

无线端的弹幕实现方案的相关文章

Preact——无线端活动页的轻量级开发方案

React开创了新的避免手动操作DOM方式--JSX,它不仅仅是一套库,而是一套标准. 1.前言 React现如今已经成为前端开发者的首选技术了,它天生携带着组件化的理念,并且拥有极强的生态,如Redux,Flux等数据管理工具,Material-UI,MUI,Ant.Design等UI组件,对于一个全新的控制台系统,在脚手架的辅助下,我们可以花费很少的时间就能投入到业务开发中. 对于无线端,React也能够很好的支持,但是对于一些运营活动页面来说,大部分情况下使用kimi是可以应付的,这些活动

阿里巴巴无线端设计:用户在网站端的认知映射

文章描述:从无到有:阿里巴巴中国站手机客户端项目设计. 从无到有的阿里巴巴无线端设计,经历了由前期的产品定位.产品形态探索.无线需求场景脑暴.产品拆解.分合的产品思路讨论.版本规划到手机行为.手机平台特性分析乃至信息架构的确定.细节的推敲- 无线端敏捷开发节奏快,如何低成本.有条不紊的迭代更新,版本规划以及产品的拓展性考虑尤为关键.九宫格聚合的工具平台形态和运营形态在我们客户端的定位中必然共存,但一期内容不足功能较少,过渡期既要保证目前版本的充实和架构合理,又要考虑用户习惯的延续和activit

携程转型无线端再陷裁员风波:优化地面销售

中介交易 SEO诊断 淘宝客 云主机 技术大厅 乐琰 "神童"梁建章回归携程(51.03, 0.87, 1.73%)CEO位置后,携程正大规模转型无线端业务,携程昨日透露,在暑期旺季,携程来自无线的酒店单日交易订单比峰值已达40%,超过PC网站,接下来其还将力拓(49.57, 0.21, 0.43%)无线端. 然而无线端业务的上升也让携程地面人工业务缩减,继今年1月底传出裁员数百人的消息后,日前携程再传将裁员地面营销人员.对此,携程坦言,在转型过程中,近期确实对原有地面销售渠道和电话营

携程转型无线端陷裁员风波地面人员何去何从

"神童"梁建章回归携程CEO位置后,携程正大规模转型无线端业务,携程昨日透露,在暑期旺季,携程来自无线的酒店单日交易订单比峰值已达40%,超过PC网站,接下来其还将力拓无线端.然而无线端业务的上升也让携程地面人工业务缩减,继今年1月底传出裁员数百人的消息后,日前携程再传将裁员地面营销人员.对此,携程坦言,在转型过程中,近期确实对原有地面销售渠道和电话营销部门进行了"优化".无线订单峰值达40%在刚过去的中秋节,细心的用户会发现携程发布中秋版 携程旅行5.0客户端,推

无线端网站优化的着力点及工具应用介绍

近期由于公司的战略由PC端逐步向无线端靠拢,我想这也是大部分稍微正规互联网企业的必由之路吧,当然,无线端的主角依然是无线APP应用,而作为seo来说,无线APP自然不是我们所能及的,而无线手机站的优化则是我们所必须面临的下一个目的地,我把它称作为下一个"深度"蓝海,之所以用深度这个词,因为从百度官方目前的说法来看,对于手机端wap站的优化,确实没有一个实际的规则可言,对于诸多尝试中的站长来说,之前的规则貌似在这里都不适应,依然是毫无头绪.在这里,笔者根据近几个月的研究,谈谈自己对于wa

Dribbble无线端交互设计GIF动态图案例

文章描述:无线端交互设计(Dribbble GIF动态图实例). 盘点Dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟:) [1] [2] [3] [4] [5] [6]  下一页

用户体验部无线端APP统一化路程

一.为什么要做? 最初我们只有一个产品,产品就是品牌,品牌也就是这个产品,但后来产品多了,丰富了,开始强调差异化,我们需要提取更多共性的特征到品牌塑造中.品牌也就自然会独立出来,作特定考虑研究.品牌的核心仍然是产品,尤其在快速变化的互联网.移动互联网品牌化还不够理想的情况下,做好产品自然是给品牌加分的事情. 系统化的思考产品,更多的横向关联的推衍及提取共性,无疑会给产品迭代带来好处,会使用户认知与使用降低成本,功能传承性得到体现,通过这样一系列共性的传递,从而树立品牌特征,形成我们独特的语言.

性价比E3独显高端游戏装机配置方案

  一套经典高性价比E3独显高端游戏装机配置方案,具体如下. 经典高端高性价比 6000元至强E3独显爽玩游戏大作配置推荐 配件名称 品牌型号 参考价格 处理器 Intel至强E3-1231 V3(散片) ¥1299 散热器 九州风神玄冰400 ¥99 显卡 技嘉 GTX1060 G1 GAMING 6GB ¥2099 主板 华硕B85M-GAMER ¥499 内存 金士顿HyperX骇客神条FURY 8G DDR3 1866 ¥349 硬盘 影驰铁甲战将240G SSD固态硬盘 ¥449 机箱

无线端交互设计(Dribbble GIF动态图实例)

盘点Dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟:)