实时音视频开发学习4 - 实现web端运行

TRTC实践功能

trtc的实践功能主要谈及两个模块，一个是web端，另一个为小程序端。这二者分别阐述了trtc的通话模式、直播模式、实时屏幕分享、云端流录制与回放CDN直播回放。

跑通通话模式 - web端

通话模式简单来说就是将本地的音视频通过云服务进行推流的过程，其涉及主要流程如下：

它一共可以分为三个模块，web前端交互行为、调用TRTC Web SDK过程以及向腾讯云发起请求。在web端可以通过监听登录事件，创建客户对象，并加入房间。在加入房间的过程中需要创建本地音视频流，并进行初始化，然后发布本地流音视频。但是在发布之前需要监听stream-added和stream-subscribed来订阅和接收远端音视频流。最后进行播放，播放可以传递一个id参数，SDK内部会在该div元素下自动创建音视频标签并在其上播放音视频。

当用户离开房间时，首先是停止远端流的发布，然后离开房间，并关闭停止和关闭本地流音视频。此外，在退出的时候需要还原一切登录之前的状态，并对一些全局变量做复原处理。

在编写代码的过程中，由于进入房间、发布流、初始化等为异步状态，因此可以使用ES6语法中的async/await来减轻代码的厚实感。为保证不会错过远端用户进房通知，我们可以创建类的形式，首先初始化监听事件，再在进入房间时进行调用相关的方法。具体流程如下：

创建RtcClient对象

初始化监听事件

这里增加了对系统错误的监听和用户取消发布，也就是用户在退出时的操作。

进房间和创建本地流

首先做一个能力监测，判断客户端对象的类是否监听到Join方法。然后再进入房间并创建本地流，这里的mirror为视频是否显示镜像，默认为true，在使用前置摄像头时需打开，但不适用于屏幕分享。

本地流初始化、发布和播放

发布订阅之后之所以能够直接播放，是因为我们初始化的时候已经做好了对应的事件监听。这里也可以增加一条用于监听音视频播放器状态变化事件，根据其状态变化来更新UI，如通过监听video player状态变化来打开/关闭遮板。

退出登录

用户退出操作只需完成退出逻辑和复原UI界面以及重置全局变量。退出逻辑主要包括取消发布、客户端离开以及将本地音视频流暂停和停止。复原UI界面主要是关闭聊天界面返回登录界面。重置全局对象包括是否进入房间isJoined、localStream_等，当然您如果不想这么麻烦其实也并不是一定要全部设置的。

跑通直播模式

直播模式下分为两种状态，一个是主播，另一个则为粉丝。通过实时音视频通话的模式可以相当主播进入房间，主播有一个房间roomID供粉丝进入的接口，这里只需要创建一个粉丝对象就能向主播进行拉流。粉丝主要拥有两个过程：进入直播间和同主播进行连麦互动。

前期准备

我们可以接着上一节demo进行参考，UI界面中新增一个“粉丝”模式，并给全局新增一个isAudience的判断，默认为false。

在预处理presettting中通过判断是否为粉丝登录来设置对应的粉丝ID

在进行登录的时候同样判断是否为粉丝登录来创建不同的客户端对象。在“粉丝”状态登录下，还需要对一些UI界面进行隐藏，如“退出/分享”按钮、将音视频图片按钮隐藏。这里需要注意的是，音视频（其实是图片）按钮不能给著视频网格”main-video-btns”添加隐藏hide或display:none，而需要分别给video-btn/mic-btn添加隐藏属性。

进入直播间

创建粉丝模式下的类AudienceClient，并创建客户端对象，并将模式mode设置为：live：

以观众身份进入主播直播间，这里需要提供主播房间ID和设置用户角色role。其中anchor为主播，能够发布本地流和接收远端流的权限。audience为观众，观众角色只有接收远端流的权限，没有发布本地流的权限。若观众想要和主播连麦互动，则需要先通过switchRole()切换为anchor角色后再发布本地流。

这里设置了一个登录标志isJoined_用于客户端检测，另外将异步过程使用try进行兜住。

收看直播

直播间的收看通过监听远端流事件stream-added进行获取，再通过subscribe来订阅远端流音视频流。

然后通过监听远端流事件stream-subscribed来判断订阅成功，同时在订阅成功之后播放远端流，这里的播放和实时音视频的播放一样，支持接收一个div元素ID作为参数。但是还添加来一个options选项，并设置objectFit为contain类型。

但是在实际写业务逻辑的时候还增加了两个过程

监听Audio/Video Player状态变化，可以监听player-state-changed事件来动态的打开或者关闭遮罩。这里之所以要加遮罩是因为远端流播放时接收一个div且其是一直存在的，为了将其隐藏便只能动态添加一个遮罩来显隐。

添加成员，将获取到到直播音视频添加到video-grid主视频网格中，同时给它添加点击事件，实现内容为和主视频控制按钮进行交换位置，交换方法在音视频内容中已讲述。

给播放器的member成员列表添加一个音视频的图标按钮，并通过判断远端是流否含有包含视频轨道来修改音视频按钮图片。

主播互动

和主播连麦互动到过程实际上是分为两步，第一步为切换直播间角色为“主播模式”，第二部为创建本地流让主播能够看到你。

我们将其封装到来AudienceClience类中，其方法为：先调用客户端对象到switchRole方法切换身份。然后创建本地音视频流，并设置好用户ID、打开音视频通道。

接着初始化本地流initialize()，并使用publish发布本地流，设置发布标志isPublished_位true，最后将音视频播放play在main-video容器中。

同样需要注意到时，异步请求到过程我们使用try/catch到方法进行兜住，方便检查错误。

退出直播间

退出直播间首先要取消本地到发布，然后调用客户端到leave方法离开房间，接着停止并关闭本地流，并将localStream_和isJoined_复原，最后对一些UI界面也进行复原。

具体代码请参考demo03。

注：更多内容请关注腾讯云的实时音视频