实时音视频开发学习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，包括以下几点：

这里就只需要判断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循环遍历，一次打开或订阅对应用户。以下为订阅推送情形：

双人通话功能

双人通话顾名思义是在两个人之间进行正常的电话通讯，两个用户只需要输入相同的房间号便能开始进行会话。为实时观察推拉流状态，可以选择是否开启调试模式。

准备内容

准备内容情形和音视频通话相似，通过输入框输入进房ID、通过切换按钮是否打开调试模式，然后再进房间时，对输入框做表单验证

进房操作：

进房操作也和音视频通话相似，也是通过wx.getSetting来获取麦克风和摄像头权限，如果未打开则自行开启。由于内容相似，可以直接看代码。

房间操作

首先为获取trtc-room组件，然后是初始化一些监听事件bindTRTCRoomEvent，接着是对url传递的参数options进行一个类型转换，将属性值为true/false的字符串转为boolean类型。最后调用进房函数enterRoom()。

但是这里进房操作同时实现了两个功能双人通话和多人会议，只需要通过判断params.template的类型来设置rtcConfig的属性内容，而rtcConfig最终会绑定到trtc-room组件中渲染。其实trtc-room相当于一个占位容器，提供了三种模式1V1、grid和custom

最后调用trtc-room组件的enterRoom方法完成进房，这里在用户进入房间时对视频呈现画面的坐标和尺寸进行定位。

多人会议和双人通话的唯一区别在于多人会议拥有一个推流属性的设置和他们的template属性不一样，在多人会议中需要给加入房间的性质给予身份rtc/live通话/直播

而在双人会议中则只需要设置一些正常的属性，如sksAppID、userID、userSig等。

事件监听

本地流初始化：

当监听到本地流的加入时，首先推送本地的音视频，然后根据所选房间的模板类型custom进行设定画面坐标和尺寸。

在1V1模式下只需要订阅第一个远端流

自定义模式下，主要设置用户显示的区域位置。在推送的时候会将所有的用户列表保存至userList，而在订阅的时候只需要判断该成员在列表的那个位置，并根序列号来安排其在直播/通过时的显示位置。

多人会议

多人会议和双人会议共用一套trtc-room组件，只是选择对应的模板template类型不一样，这里主要介绍准备工作。

UI界面

在这里主要分为输入框，各种模式选择和进房操作，我们在打开“调试模式”时，trtc-room会自动打开调试面板，清楚看清房间内的各种信息，如房间ID、模板类性、用户个数等，不需要开发者自行设置。

初始化事件

表单填写

根据表单传递过来的data-key修改对应的内容，这里修改方式是直接使用data对象进行属性赋值法，然后直接将对象setData。而不是通过this.data+属性进行修改。

选项切换

对于耳返、增益、对焦等只需要判断其是否被选中checked，因此可以通过给每个switch组件添加对应的data-key属性，然后使用if/switch进行修改内容，修改方式同表单

选项事件

针对场景选择、音量类型、视频分辨率等设置可以封装成一个函数，并分别设定好data-key属性。然后通过if判断所选择的key类型和data-key是否相同，如果相同则进行后续设置操作，这里以设置视频分辨率为例。

超高清属性选择

高清属性设置

标清属性设置

进房事件流程

1.校验连续两次点击

2.拼接跳转路径并传参

3.对输入框验证，包括用户名的输入和校验

4.通过getSetting判断是否开启摄像头和麦克风

5.navigateTo路由跳转

这里的进房流程和双人会议和语音聊天室几乎一样，可以进行对比理解。

注：更多请关注腾讯云一分钟跑通小程序https://cloud.tencent.com/document/product/647/32399