app开发直播功能实践案例 系统讲解

　　「直播+电商」这种新的商业模式可以很好的解决用户购物的痛点，用户可以更实时更直观地了解商品信息。蘑菇街作为国内「直播+电商」模式的先行者，在七牛架构师实践日上，带来了他们从直播立项到开发上线全过程的经验分享。下面就是对他此次演讲内容的整理。

　　中科研拓：提供直播软件APP定制开发服务，多个成功案例、十年研发经验，专业团队为你服务。

　　服务热线：400-0316-532

　　直播简介

　　直播最主要的特点就是实时性与互动性，这也是直播与点播之间的差别所在，它可以实时将主播端的视频信息以较低延迟传输到观众端，与此同时，观众可以通过群聊或者送礼物的方式与主播进行互动。

　　图 1

　　直播主要由以下几个环节所组成（图 1）

　　1. 主播端采集

　　2. 处理：美颜、水印，基于人脸识别的动态贴纸；

　　3. 编码：视频主要是基于 H264 的编码格式；

　　4. 推流：使用 RTP 的实时传输协议，如 RTSP、RTMP、HLS；

　　5. 网络传输：使用 CDN 服务厂商的服务；

　　6. 拉流：需要服务端处理转码，支持多分辨率，支持 RTP 实时传输协议；

　　7. 解码：可以使用硬件或者软件解码；

　　8. 播放。

　　以上主要环节绝大部分由云服务解决。蘑菇街直播目前在前处理中加入了蘑菇街自研的基于人脸识别的动态贴纸功能。前处理和播放都是使用强大的开源库 GPUImage。

　　移动端直播形态

　　直播形态及框架组成

　　目前移动端直播形态大体分为以下几种：全民直播、社交直播、电商直播和手游直播。蘑菇街的直播，主要以电商为主。下面主要介绍蘑菇街直播的组成。

　　图 2

　　图 2 是蘑菇街直播的大致组成，包含三大模块，分别是媒体模块、服务模块和管理模块。

　　1）媒体模块

　　由直播和直播回放组成。直播回放的目的有两个，一是在直播过程中，将平台上优质的内容沉淀下来，其次是可以在直播较少的时间段提供直播回放，增加内容的广度。

　　2）服务模块

　　也称为业务模块，其中包括电商、支付、聊天、礼物、运营、抽奖、安全以及统计系统；

　　图 3

　　其中，电商系统（图 3）是蘑菇街自己加入的一个特有的系统，主要是让卖家在直播过程中，可以上架商品发放优惠券，主打商品通道，之后观众就可以在观众端进行商品浏览、加购、下单、购买以及领取优惠券这些行为。观众端的大小窗自由切换，为观众提供了更加便捷的消费模式，可以无缝地进行观看和购买，这个模块不管是从产品层面还是技术层面都算是做的比较成功的。统计数据显示，大部分直播间的成交场景，都来源于从直播间切换到详情页时所产生的下单购买行为。

　　3）管理模块

　　管理模块主要用于后台管理。

　　图 4

　　蘑菇街的直播的页面主要分为主播端和观众端两部分；图 4 为蘑菇街直播的主播端页面的综合展示。

　　图 5

　　图 5 为主播信息页面，页面下面为主推商品以及其价钱显示。

　　图 6

　　图 6 页面底部依次为人脸识别/贴纸、电商、切换分辨率、美颜这些功能模块。其中电商模块主要是主播用于设置商品展示这些功能；分辨率这块默认标清为 960P，可以切换为高清（1280P）/流畅（640P）。

　　图 7

　　图 7 为蘑菇街直播的观众端页面综合展示。

　　图 8

　　如图 8 所示，观众端和主播端最主要的区别是大小窗切换功能（页面底端从左向右数第二个模块），点开之后切换到小窗，小窗可以任意拖动。

　　图 9