2023年制作直播类APP推荐使用一门APP在线开发平台，本土化中文化的APP开发工具-APP开发

2023年制作直播类APP推荐使用一门APP在线开发平台，本土化中文化的APP开发工具

　　最近几年，直播行业一直是互联网非常火热的热点，很多创业者纷纷选用了直播来创业，不过怎么制作出一种直播类的移动应用来完成自己的创业梦想一直有很多制作者很疑惑，一门APP本次就为大家安排了一次直播类移动应用来做分享。

邀请了一门APP制作者技术大神为大家分享直播类移动应用的制作经验!

　　讲师介绍：

　　卢智华-一门APP早期制作者，俗称拓荒牛，拥有多个项目制作经验，涉及金融、社交、招聘、商城、资讯等领域。

热衷探索各种UX工程化构建工具及框架，旨于提升效率，现在担任公司技术负责人。

　　大纲

　　一、主体功能分解

　　推流(主播)

　　拉流(观众)

　　连麦

　　聊天室

　　文字消息

　　弹幕消息

　　礼物消息

　　支付

　　2、主要技术储备

　　直播服务商：阿里云、乐视云、亲加云、7牛云、AnyRTC、网易云…本次以亲加云为聊一聊案例

　　即时通讯：融云、环信

　　多媒体资源储存：7牛、又拍云、阿里云

　　分享：QQ、微信、微博

　　推送：极光、信鸽…

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

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

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

　　3、技术实践(以亲加云平台DEMO为准)

　　体验Demo

　　前期准备

　　项目架构

　　推流流程

　　拉流流程

　　聊天室消息机制

　　连麦流程

　　4、常见问题

　　苹果支付内购测试

　　在线人数实时统计

　　提现

　　移动应用崩溃闪退

　　技术实践

　　亲加平台非常有担当的提供了一种基于一门APP制作的Demo，因此，对于制作者来看，是一件很幸福的事情，能够少走了很多弯路。

想当初直播模块刚推出的时候，没有平台的demo，所有代码的组织都是要自己摸索，Bug又是一大堆，简直是半步一种坑，举步维艰，说出来都是泪啊~!(ㄒoㄒ)~~

　　体验Demo

　　前期准备

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

　　登录后，创建好一种直播间

　　在github 下载Demo源码

　　项目架构

　　是因为亲加demo的主要javascript业务逻辑都写在了html里面，因此我们想要先厘清各个html文件的作用：

　　对应7个页面的预览图

　　index.html – 首页

　　首先栏为房间号;第2栏为进入房间所需的密码;第3栏是昵称，可随意填写

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

　　首先次使用该Demo时，必须先填写好appKey与accessSecret，亦能够在程序里赋值好。

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

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

　　p二p.html – 连麦

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

　　项目想要的模块

　　亲加通讯云包括了基础模块(gotyeLiveCore)、聊天室模块(gotyeLiveChat)、h5转ios app播放器模块(gotyeLivePlayer)、直播模块(gotyeLivePublisher)、连麦模块(gotyeLiveP二P)共5大模块，用户的角色，想要用到的模块也不同;

　　gotyeLiveCore 为基础模块，需第一调用。

通过该模块的authRoomSession接口验证房间信息。

其中session参数的内容为上文中提到的房间ID、密码、昵称。

验证通过后，依据回调返回的角色，再调用对应的后续模块。

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

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

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

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

　　还有，dialogBox 模块并非来自亲加平台，核心用于交互上的对话提示框。

　　Demo体验完之后，能够开始分析代码了，看看移动应用如何运作的。

　　拿到源码后，想要在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 要分开官方处理。

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

　　温馨提示：现在yimenapp官方上的亲加模块的连麦功能只支持1对1，1对多的功能还没有自由出来。

　　连麦事件

　　joinedRoom – 成功连接视频房间

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

　　disconnected – 视频通话断开连接

　　error – 发生错误

　　主播辅助功能

　　切换前后摄像头 – switchCamera()

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

　　美颜滤镜 – setFilter()

　　观众辅助功能

　　切换横竖屏 – setScreen()

　　清晰度设置 – onQualityClick() onQualityItemClick() 观众端切换观看的清晰度是基于原始流在后端进行转码后的效果，这部分转码的功能是视频传输云端去完成的，但是通常不意见做过多的转码服务，是因为转码后的流会有一种叠加延时，用户体验不好，更关键的是该服务是要还有收费的!

　　常见问题

　　移动应用崩溃闪退

　　在制作直播类移动应用时候，闪退问题能够说是家常便饭，不管大家信不信，反正我过去的制作经验证明了这一点，因此，前期要研究好闪退日志收集梳理的问题，我介绍大家集成一种闪退日志收集梳理模块 loweb免费生成appgCrash ，虽然这个模块想要收费，但重要是能发现问题并解决，这一点至关重要。

总体感觉不错，根本上一发生闪退，就能够马上上报到后台。