APP开发平台 > Blog > 如何开发一款很溜的直播APP应用?

如何开发一款很溜的直播APP应用?

  最近几年,直播行业一直是互联网非常火热的热点,很多创业者纷纷选择了直播来创业,但是如何开发出一个直播类的APP来完成自己的创业梦想一直有很多开发者很疑惑,APICloud本次就为大家安排了一次直播类APP来做分享。邀请了APICloud开发者技术大神为大家分享直播类APP的开发经验!

  讲师介绍:

  卢智华-APICloud早期开发者,俗称拓荒牛,拥有多个项目开发经验,涉及金融、社交、招聘、商城、资讯等领域。热衷探索各种前端工程化构建工具及框架,旨于提高效率,目前担任公司技术负责人。

  大纲

  一、 主体功能分解

  推流(主播)

  拉流(观众)

  连麦

  聊天室

  文字消息

  弹幕消息

  礼物消息

  支付

  二、核心技术储备

  直播服务商:阿里云、乐视云、亲加云、七牛云、AnyRTC、网易云...本次以亲加云为讲解案例

  即时通讯:融云、环信

  多媒体资源储存:七牛、又拍云、阿里云

  分享:QQ、微信、微博

  推送:极光、信鸽...

  支付:微信支付、支付宝、苹果内购(非Apple Pay)

  Apple pay和程序内购买的区别:Apple Pay用于销售物理商品,比如食品杂货、衣服和电器,也能用于支付俱乐部的会员资格、酒店预订以及演出门票;另一方面,应用内支付只用于销售虚拟物品,如你的APP里的消耗类内容(宝石/金币),以及订阅服务内容。

  利用Ping++快速集成微信支付与支付宝

  三、技术实践(以亲加云官方DEMO为准)

  体验Demo

  前期准备

  项目架构

  推流流程

  拉流流程

  聊天室消息机制

  连麦流程

  四、常见问题

  苹果支付内购测试

  在线人数实时统计

  提现

  APP崩溃闪退

  技术实践

  亲加官方非常有担当的提供了一个基于APICloud开发的Demo,所以,对于开发者来说,是一件很幸福的事情,可以少走了很多弯路。想当初直播模块刚推出的时候,没有官方的demo,所有代码的组织都是要自己摸索,Bug又是一大堆,简直是半步一个坑,举步维艰,说出来都是泪啊~!(ㄒoㄒ)~~

  体验Demo

  前期准备

  找亲加申请开通一个测试账号,用于登录亲加后台获取appKey与accessSecret

  登录后,创建好一个直播间

  在github 下载Demo源码

  项目架构

  因为亲加demo的核心javascript业务逻辑都写在了html里面,所以我们需要先厘清各个html文件的作用:

  亲加Demo|-html |-p2p.html - 连麦 |-player.html - 拉流播放器(观众端),负责渲染视频画面 |-player_mask.html - 观众端交互层,处于视频画面上层 |-publisher.html - 实现推流(主播),负责采集视频、音频 |-publisher_mask.html - 主播端交互层,同理,也是处于窗口的最上层 |-settings_frm.html - 设置页,填写appKey与accessSecret |-settings_win.html - 不解释,你懂的|-index.html - 程序入口

  对应七个页面的预览图

  index.html - 首页

  第一栏为房间号;第二栏为进入房间所需的密码;第三栏是昵称,可随意填写

  settings_win.html && settings_frm.html - 高级设置

  第一次使用该Demo时,必须先填写好appKey与accessSecret,亦可以在程序里赋值好。

  publisher.html && publisher_mask.html - 主播端

  player.html && player_mask.html - 观众端

  p2p.html - 连麦

  此Demo的连麦是由主播在观众列表选择观众发起的

  项目需要的模块

  亲加通讯云包括了基础模块(gotyeLiveCore)、聊天室模块(gotyeLiveChat)、播放器模块(gotyeLivePlayer)、直播模块(gotyeLivePublisher)、连麦模块(gotyeLiveP2P)共五大模块,用户的角色,需要用到的模块也不同;

  gotyeLiveCore 为基础模块,需首先调用。通过该模块的authRoomSession接口验证房间信息。其中session参数的内容为上文中提到的房间ID、密码、昵称。验证通过后,根据回调返回的角色,再调用对应的后续模块。

  gotyeLivePublisher 为直播模块,若用户角色为主播,使用该模块即可进行直播,以及直播时可使用到的摄像头前后切换、分享、横竖屏切换、闪光灯开启、美颜、静音等功能。

  gotyeLiveChat 为聊天模块,若需要看到其它用户的聊天信息或者自己发出聊天内容,则需要使用该模块

  gotyeLivePlayer 为播放器模块,若用户角色为助理或观众,使用该模块即可看到直播内容。

  gotyeLiveP2P 为连麦模块,需由主播发起,观众或助理可选择接受连麦或拒绝连麦,接受后即建立连麦连接,可相互看到对方的画面。

  另外,dialogBox 模块并非来自亲加官方,主要用于交互上的对话提示框。

  Demo体验完之后,可以开始分析代码了,看看APP怎么运作的。

  拿到源码后,需要在config.xml把widget标签的id改为自己项目的id值,要不然不能上传代码云编译。

  同时,还要把下方的appKey和accessSecret这两个配置项换成自己的。如果没有也没关系,因为我发现官方Demo内设的配置参数全部是有效的,包括:appKey、accessSecret、房间号、房间密码。(不排除以后这些参数会失效,学生党体验就趁早)

  一切顺利的话,就可以上传代码,编译个自定义AppLoader

  index.html 页面主要是处理gotyeLiveCore模块的业务逻辑

  在 check() 方法里的调用了 core.registerApp 其实可以不调用,因为如果在config.xml文件中配置了appKey以及accessSecret的信息,那么在模块初始化的时候底层会自动调用此接口,无需再手动调用。

  ...//这部分代码可以去掉var settings=$api.getStorage('settings'); if(settings){ core.registerApp({ appKey: settings.appKey, accessSecret: settings.accessSecret });}...

  这里有个细节要注意,authRoomSession 的 roomId 参数类型是字符串,并不是数字类型,虽然Android可以兼容两个类型,但是IOS就不行,所以要小心。

  publisher.html && publisher_mask.html

  主播界面由两个视图层重叠构成,交互层在图像层之上

  所以在打开 publisher_mask.html 页面是一定要把背景设置为透明:

  api.openFrame 的 bgColor 设置为 transparent

  把 hmlt 与 body 这两个标签的背景颜色设置为透明,代码如下:

  body, html { background: transparent;}

  publisher_mask.html 的初始化主体逻辑(apiready)

  推流流程(主播)

  推流事件(按照示例代码的事件注册顺序)

  推流的准备工作都完成后,就可以开始推流了,对应 publisher_mask.html页面的 startPublisher 函数。

  player.html && player_mask.html

  观众界面的视图结构跟主播界面一样,这里就不多说了。

  player_mask.html 的初始化主体逻辑(apiready)

  拉流流程(观众)

  拉流事件(按照示例代码的事件注册顺序)

  publisher_mask.html && player_mask.html

  聊天室的业务逻辑都放在交互层页面上,初始化流程:

  主播跟观众的聊天室初始化流程其实大同小异,区别在于主播多了一个 定时获取聊天室用户列表 的操作,因为连麦是由主播主动选择观众发起的,所以需要这个操作。

  聊天室事件(按照示例代码的事件注册顺序)

  主播与观众的聊天室监听事件都是 receiveMsg 与 forceLogout 这两个;其中,receiveMsg 不仅仅接收文字消息,还可以有 礼物消息、 弹幕消息、 连麦消息 等。

  聊天室消息机制

  目前Demo的聊天室只有两种消息类型:文字消息 和 连麦消息。

  发送文字消息的逻辑也很简单,调用 chat.sendText 接口发送,然后做好监听,输出消息,完了。在Demo上对应逻辑封装在 sendChart 函数里。

  连麦功能是基于聊天室消息机制触发的,Demo的连麦流程如下:

  因为 ios 与 android 的机制不一样,所以连麦的 joinRoom 要分开平台处理。

  p2p.html 只针对 ios 上使用,与主播连麦时,作为观众端本地预览的小窗口; android就不一样,它会把主播的推流和副主播的推流合成在一起进行渲染,简称,合流,就是说两个画面合成在一起。

  温馨提示:目前apicloud平台上的亲加模块的连麦功能只支持1对1,1对多的功能还没有开放出来。

  连麦事件

  joinedRoom - 成功连接视频房间

  connected - 成功建立视频通话连接

  disconnected - 视频通话断开连接

  error - 发生错误

  主播辅助功能

  切换前后摄像头 - switchCamera()

  闪光灯 - setTorch() 这里有个细节要注意,要打开闪光灯必须得切换到后置摄像头

  美颜滤镜 - setFilter()

  观众辅助功能

  切换横竖屏 - setScreen()

  清晰度设置 - onQualityClick() onQualityItemClick() 观众端切换观看的清晰度是基于原始流在服务端进行转码后的效果,这部分转码的功能是视频传输云端去完成的,不过一般不建议做过多的转码服务,因为转码后的流会有一个叠加延时,用户体验不好,更重要的是该服务是要另外收费的!

  常见问题

  APP崩溃闪退

  在开发直播类APP时候,闪退问题可以说是家常便饭,不管大家信不信,反正我过去的开发经验证明了这一点,所以,前期要考虑好闪退日志收集的问题,我介绍大家集成一个闪退日志收集模块 logCrash ,虽然这个模块需要收费,但关键是能发现问题并解决,这一点很重要。总体感觉不错,基本上一发生闪退,就可以马上上报到后台。

更多直播APP应用,请关注:www.apicloud.com


2018-01-03 来源:APICloud

高效的App定制平台,保上线、便宜、快!

提交APP定制开发需求
qq客服咨询