「HTML5&CSS3&移动开发」分享一下一款直播App开发的过程

听说有人声称开发一款直播App不仅耗时还非常昂贵,今天跟大家说道一下,开发一款直播App到底分几步走?

第一步:分解直播App的功能,我们以X客为例

  1. 视频直播功能,这是一款直播App最主要的功能,要能支持视频直播RTMP推流,使画面传输流畅、清晰(美颜后的清晰,你懂的
  2. 聊天功能,用户之间的互动聊天,包括文字和表情(小粉丝间的小秘密
  3. 互动功能,用户与主播间的互动,点亮个灯,送一束花等等
  4. 支付&提现功能,用户用现金购买礼物送给心仪的主播,主播收到礼物后可再兑换成现金取出
  5. 视频回放功能,在直播的过程中同时录像,使得没看到直播的小粉丝也有机会再看
  6. 分享功能,将房间号分享到微信、微博、QQ等

第二步:寻找合适的云服务SDK进行嵌入,在APICloud的聚合API中可以轻易找到以上的功能模块,挑选合适的模块封装到自己的App中

  1. 视频直播功能有ytylive qupaiLive 亲加云等模块。

拿ytylive举例,此模块支持主流 RTMP 服务器 支持目前所有主流的 RTMP 服务器 (simple-rtmp-server、crtmpserver、FMS 等)。 支持所有的 RTMP 协议 支持所有 RTMP 协议及变种 (RTMP、RTMPT、RTMPE、RTMPS、RTMPTE、RTMPTS 等)。 性能强大 资源 (CPU/内存) 占用率低,使用硬件加速进行编码,压缩比例大,延时小。 支持实时滤镜 支持多种实时滤镜效果 (Gray、InvertColors、Sepia、Fisheye、Glow、GaussionBlur)。 而像亲加云模块共有4个,包括视频直播基础模块、视频直播模块、视频播放器模块和视频直播聊天室模块。

enter image description here

  1. 聊天文本/表情输入有chatbox,UIChatbox等模块。效果如下: enter image description here

  2. 及时通讯(互动功能):融云,环信等模块,也可以自己通过socketManager自己封装协议实现

  3. 支付提现:支付宝、ping++、微信支付、银联支付、现在支付等模块
  4. 视频回放:视频回放功能的实现其实是录像+存储到服务器中,因此使用APICloud的数据云功能,或是七牛云存储,又拍云等模块都可以实现
  5. 直播/主播分享:微信、新浪微博、QQ等平台分享模块

第三步:完成App开发5步骤

现在我们所有的模块已经挑选完毕,开发者按照之前和大家分享过App开发5步骤的内容就可以完成一款直播App的开发。这5步骤包括:

  1. App框架搭建,在APICloud Studio中直接创建应用框架,有三个常用页面框架备选
  2. 积木式拼装,将所有你挑选好的模块,用JavaScript编写页面及模块调用,运用HTML5+CSS3搭建应用的界面UI,完成App编码全过程。
  3. 真机调试,通过模拟器和真机调试功能进行App优化,一键点击即可在iOS和Android手机中进行App优化。
  4. 云编译,在APICloud官网上传App的icon、启动页和证书,一键“云编译”即可同时生成iOS和Android的原生安装包。
  5. 云修复,使用云修复快速迭代,随时发布新版本、新功能,无需提交新的安装包。

做完以上这三个步骤,开发直播App的全过程也就结束了。估计大家还会考虑开发成本的问题,除去部分模块是收费之外,其他步骤都是免费的。况且,由于是积木式拼装的方式,开发时间会大幅缩短。(详情进入apicloud.com官网查询)

最后,再分享一些开发直播App的难点和细节。

  1. 在网络信号弱的情况下,需要保证视频质量。用户如果经常会发生信号不好需要缓存的情况,那么会大大降低用户体验。
  2. 直播画面的延迟情况。数据传输是按照客户端上传到服务器,服务器再下传到客户端的模式,数据越大尤其是高清视频画面,那么整体上传下载速度越慢,客户端显示出现延迟,用户会出现不停缓冲等状况,影响用户的使用。
  3. 页面交互动画。互动直播的内在就是主播与用户的一个互动过程。主流的直播APP通常会添加诸如送花、打赏等等,对于系统兼容性、直播APP运行速度以及流畅度都会造成一定的影响,甚至会出现BUG。
收藏 1 分享浏览 309
1个月前
跟帖
暂无
说几句
广告位 点击查看投放指南

我的收藏