实时音视频开发学习11 - 小程序端二

前提摘要

小程序实现过程就不按照web端一步步拆分代码，而是直接讲解业务内容。核心内容可以参考trtc—room相关的API，本章内容会讲述大部分内容。地址：

https://cloud.tencent.com/document/product/647/17018

在写音视频业务内容前，需要对几种手机的状态栏高度进行一个适配。在整个APP的入口Js文件的onLaunch函数中通过wx.getSystemInfoSync()获取设备的设备型号、状态栏高度和操作系统，然后使用if分别对苹果、安卓等情况来设置头部高度，并最终将headerHeight和statusBarHeight作为全局变量。

整个项目文件入口为pages中的index文件，提供了三中情景下的路由跳转。这里主要内容是对三种情景在渲染时有一个数据结构供大家参考

当然直接静态书写也行，但是这样会使得页面看起来更加美观，因为只需要使用一个wx:for即可。

建议看的时候在微信开发工具中打开该项目。

语音聊天功能

登录页内容：

登录页内容包含两个输入框，分别输入房间号和用户ID。角色选择role，音量类型audioVolumeType和调试模式debugMode。

主要业务逻辑有两个，一个是分别对各个输入内容进行绑定相关事件，然后将输入内容保存至data，较为简单。另一个为登录功能，

对触屏点击的优化，表现在连续的两次快速点击时，只出发一次。可以使用两个时间戳，对比时间差值，在合适的时间差内直接返回，不进行后续操作。

表单验证，主要是判断表单是否输入内容，其次对房间ID设置为仅数字，用户ID设置为一个或多个的字母/数字集合。如确定用户ID内容为字母、数字中的一个或多个内容。

对登录所跳转的url地址和传入参数进行拼接，然后判断微信客户端是打开录音权限，如果打开了就直接俄跳转，否则进行权限的打开。

开启录音权限流程：

写一个回调函数checkDeviceAuthorize，返回一个Promise对象，之所以用Promise是因为获取小程序当前设置是一个异步过程。然后调用wx.getSetting获取当前用户设置对象authSetting，该对象属性均为Boolean，包括以下几点：

属性	介绍
scope.userInfo	是否授权用户信息
scope.userLocation	是否授权地理位置
scope.address	是否授权通讯地址
scope.invoiceTitle	是否授权发票抬
scope.invoice	是否授权获取发票
scope.werun	是否授权微信运动步数
scope.record	是否授权录音功能
scope.writePhotosAlbum	是否授权保存到相册
scope.camera	是否授权摄像头

这里就只需要判断authSetting[‘scope.record’]是否有值即可。如果没有值，就需要通过wx.authorize来异步设置他的scope属性为’scope.record’

如果设置失败，就让客户自己打开录音权限，通过wx.showModal来获取用户的操作结果res.confirm，如果为true，则使用wx.openSetting将其成功设置回调。

他这里设置了两个属性hasOpenDeviceAuthorizeModal和authorizeMic，其实用处也不大，只是用来做了一个追踪。

房间内容：

首先在房间内的json文件中导入trtc-room组件，并导入debug文件中生成签名的js文件，这里的签名方法和web端一样，都是libGenerateTestUserSig，请参考web端。

房间内容主要包括三个，进入房间，打开/关闭录音，打开/关闭麦克风。进入房间的业务内容中，主要业务逻辑是跟随者页面的onLoad事件进行的。因此，首先通过selectComponent拿到对应的trtc-room组件内容，然后对页面加载时传递的options选项做一个转布尔的操作，对每一项属性为true/false的字符串转为Boolean，虽然不这么做JS也会自己进行转换，但却增强的可信度。

然后是初始化相对应的trtc room监听事件，这个稍后再说。

接着将传递过来的options选项进行保存，并在回掉函数中做进入房间操作。

进房操作首先获取用户签名和获取sdkAppID，然后对rtcConfig属性进行赋值，该属性是组件trtc-room唯一的标志符，它至少需要传入sdkAppID、userID、usereSig和template四个属性。

真正进房操作实际上只需要调用trtc-room组件的enterRoom方法即可，该方法也只需要传入一个房间roomID。但是在进入房间前，如果是以主播的身份最好在进房之前就先推送本地音频流。

房间初始化内容

首先获取事件列表，这里封装到了trtc-room组件的EVENT对象中。

初始化事件中主要为监听事件订阅操作on(TRTC_EVENT.LOCAL_JOIN)、监听离开操作on(TRTC_EVENT.LOCAL_LEAVE)、监听推流错误(TRTC_EVENT.ERROR)、监听远端用户进房操作on(TRTC_EVENT.REMOTE_USER_JOIN)、监听远端用户离开on(TRTC_EVENT.REMOTE_USER_LEAVE)、监听视频流推送和取消和监听远端用户音量改变。官方demo中这些事件监听在实际操作中暂时没用。

麦克风操作

主要是判断this.data.presenterConfig.enableMic值的情况，如果为true则执行关闭操作，为false则执行打开操作。如果是前者则取调用unpublishLocalAudio消发布本地音频，关闭本地音频推流。如果为后者则调用publishLocalAudio发布本地音视频。

开关远端流推送

远端流推送的开关主要表现在是否获取直播音频，可以通过subscribeRemoteAudio和unsubscribeRemoteAudio两个属性来打开或者关闭。但在这两过程中我们打开或者关闭是针对所有成员的开启和关闭，因此需要对添加进房间的userList进行数组的forEach循环遍历，一次打开或订阅对应用户。以下为订阅推送情形：