实时音视频开发学习5 - 实现分享、音频和音量

TRTC实践功能

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

跑通分享模式

屏幕分享目前只支持ChromeM72+，您需要下载最新到谷歌浏览器。由于一个客户端对象client至多只能同时推送一路音频和一路视频，若想同时推送摄像头视频和屏幕分享，则需要另外建立一个独立到Client专门负责屏幕分享。在实际使用过程中则在登录到时候进行一个分享类到初始化。

预处理

在用户登录到时候，根据分享标志share生成不一样到用户ID，然后获取分享用户ID和创建分享类。

在主视频房间内设置分享按钮，并设置点击按钮点击事件，这里设置类节流函数throttle是的用户在多次点击分享时也只会触发一次事件，具体内容在本章第一节有讲。

分享过程

创建屏幕分享的客户端对象ShareClient。

分享客户端client进入音视频房间，然后创建本地分享音视频流，如果不存

在进入房间到情况下，也可以直接创建。

创建好的屏幕分享流后可以使用localStream.setScreenProfile设置屏幕分享的属性profile，包括分辨率、帧率和码率，此外还能通过setScreenProfile自行设置自定义到profile。屏幕分享默认使用到时1080p，常用到屏幕分享属性推荐表如下：

初始化分享的本地音视频流，并通过监听远端流stream-added来判断是否主动取消或者需要订阅其它分享远端流。

也可以通过监听本地流中的屏幕分享screen-sharing-stopped来执行相应的离开操作，最后是通过分享流客户端进行发布。这里需要注意的是，当用户点击分享后又需要分享时，则本地流初始化失败，并执行相应的离开操作。

分享退出过程

离开过程一共分为三步，首先是取消远端流的发布，然后调用客户端对象的leave事件，最后关闭本地流close，并将一些标志性变量如isJoined_、isPublished_等恢复原样。

注意点

屏幕分享采集系统声音只支持Chrome M74+ ，在Windows和Chrome OS上，可以捕获整个系统的音频，在Linux和Mac上，只能捕获选项卡的音频。其它Chrome版本、其它系统、其它浏览器均不支持。此外在创建本地流的时候不需要同时设置audio和screenAudio为true。

动态关闭音视频

音频关闭和打开分别对应muteAudio()和unmuteAudio()，视屏的关闭和打开分别对应muteVideo()和unmuteVideo()。音频的打开和关闭分别会触发对应的unmute-audio和mute-audio事件，视频的打开和关闭分别会触发对应的unmute-video和mute-video事件。事件的触发一般放置客户端对象类的初始化当中，这样每当检测到对应音视频到改变时变化触发对应到事件。

操作流程

由于这两种情况类似，这里仅以音频的打开关闭为例。当UI界面的麦克风按钮点击时，修改isMicOn标志，默认为true，并切换音频按钮图片。

调用对应的关闭或打开音频的方法，同时出发对应的关闭或打开时间

出发初始化阶段监听的音频打开和禁用的事件

媒体轨道方法

当我们使用muteVideo时并不会关闭摄像头，而我们的做法也只是给摄像头添加了一层遮罩，就相当于时盖上了一块黑布，本质上摄像灯还是亮着的，如果想要完全关闭视频通话就得使用媒体轨道方法。如removeTrack()，以下为案例演示。

前期准备

增加了一个全局变量isVideoTrack默认为false，用于判断是否退出视频轨道。UI界面中增加一个“退出轨道的按钮”。

在common.js中对该按钮进行事件监听，每次点击该按钮时，判断标志isVideoTrack会在false和true之间进行替换，从而达到实现进入和退出的效果。

初次登陆我们假设只打开音频而关闭视频通道

媒体轨道打开流程

创建本地视频流，这里需要注意的是，初始化需要写在最前面，防止初始化失败。

初始化本地视频流initialize，然后获取本地视频流轨道信息，最后再将本地视频轨道添加到本地音频流当中。但是这里需要注意到是，不能通过封装方法到形式封装到某一个方法，然后需要用到时候就调用，如果是以封装方法的形式来添加视频轨道，则添加失败。添加完成之后，每次登陆，系统会依次询问用户是否打开麦克风和摄像头。

关闭视频轨道

关闭视频轨道只需要两步，首先获得本地音频流的视频轨道信息，此时的音频流已经包含流视频轨道信息。然后调用removeTrack即可关闭视频轨道，最后调用stop方法便能关闭摄像头。

打开视频轨道

每次打开视频轨道相当于再次向本地音频流添加视频轨道信息，因此需要重新常见本地视频流，然后再初始化，接着获取本地视频流轨道信息，最后将视频轨道添加至音频流中即可。此时系统会询问你是否打开摄像头。代码见demo4。

音视频属性设置

设置本地视频属性

在视频童话或者视频直播中，可以根据具体业务要求或者客户自行调改所需要的视频画面清晰度和流畅度，获得更好的用户体验。设置视频属性包括分辨率、帧率和码率。设置方法可通过setVideoProfile()，设置方式既可以使用官方定义好的，也可以客户自定义。

视频属性包括从120p到最高的14k，码率从200~9000kbps，给用户提供了多种设置场景。但由于设备和浏览器的限制 ，视频的分辨率不一定完全匹配，在这种情况下浏览器会自动调整分辨率，使其接近Profile对应的分辨率。

设置本地音频属性

音频属性设置和视频属性一样，都需要在本地初始化initialize之前。音频属性只有两种情况：standard和high。两种情况的采样率和声道都是48000和单声道，只是前者码率为40kbps后者为128kbps，默认情况下为标准版。

实操展示

准备工作

在房间内添加UI组件，分别设置好对应流畅、高清和超高清对应的点击位置。当点击对应模式时，会以红色的高亮形式进行显示

UI界面：

内部代码：

操作流程

首先在RtcClient客户对象中封装好对应的方法，该方法对传入过来的videoType值进行判断，根据不同的模式调用setVideoProfile来设置视频的属性。

然后，当主播进入房间后，可以手动的修改所需要的视频模式。其实现机制：

1.首先获取videoGroup下的所有div，对div进行点击事件监听；

2.然后拿到该div下文本属性的type值；

3.接着使用一个for循环移除div内部的class属性video-active；

4.最后对type值进行switch判断所处的模式，并设置好响应时的样式video-active，再调用rtc.setVideoProfileFunc方法。

最后通过控制台查看效果，修改成功，具体代码见demo5：

至于音频的设置方法和这个一摸一样，您可以直接将其复制，只是内容切换选项只有两个：standard和high。

其它

音量大小检测

音量大小检测主要用在检查麦克风的通话质量和判断音视频通话过程中谁在说话。音量大小可以通过getAudioLevel来获取当前音量的大小，同时需要注意的是只有当本地流或远端流中有音频数据才有效，否则一直处于0。audio的返回值是一个Number类型，且返回值在0~1之间，通常认为值大于0.1便称之为用户在说话。

房间内上行用户个数限制

行用户只当前正在发布音视频流的用户，用户只需要调用publish()方法成功发布本地流即为上行用户，而通过unpublish()方法取消发布后则不再为上行用户。

需要注意的是，用户通过muteAudio()和muteVideo()禁用音频后，虽然远端用户不再能接收到该用户的真实音视频数据，但该用户仍被视为上行用户，应为实际上该用户仍然在向后台服务器推送音视频静音包和黑屏数据包。

实时音视频后台服务器对单个房间内的上行用户个数限制为20，如果一个房间内上行用户超过20个，则第21个需要上行的用户尝试发布本地音视频流的时候就会出现发布失败问题。

我们在检测房间上行个数的时候，可以使用一个数组remoteStreams_，在每次远端流的订阅事件监听stream-subcribed中，将该远端流remoteStream添加到该数组中即可。

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