上个小节我们可以把参会人说话的音量用麦克风图标显示出来，这个功能挺实用的。在一个视频会议中，每个人都可以畅所欲言，在列表中标记现在是哪些参会人在说话，显得更加清晰明了。当然了，如果你想做腾讯会议那种管理员可以关闭远端参会人的语音或者视频讯号，你可以课下仔细研读TRTC的API，这种功能是能实现的，毕竟腾讯会议也是基于TRTC服务的。
这节课应该轮到我们去实现挂断TRTC，退出视频会议功能。参会人想要退出会议只需要点击右下角的电话图标按钮，然后由JS代码执行退出视频会议室，关闭视频墙上的视频讯号，然后销毁持久层保存的本地流和远端流，清空参会人列表等等。
一、本地视频流和共享流
在meeting_video.vue页面，我们既可以把本地摄像头拍摄的视频讯号推送给远端参会人，也可以发送本地电脑的屏幕广播。但是需要注意，摄像头视频讯号和屏幕广播，只能推流其中一个，不能同时推流。
在模型层中localStream变量保存的是本地视频流，shareStream变量保存的是本地屏幕广播流。当我们要退出视频会议室的时候，要关闭本地流，那么本地流到点用的是视频流还是广播流呢？这个就需要额外的判断，不如我们把判断的JS代码给封装成函数，以后调用也方便。
//用于判断当前本地使用的是本地流还是共享流，并返回相应的流对象
getStream: function() {
let that = this;
let stream = null;
if (that.localStream != null) {
stream = that.localStream;
} else if (that.shareStream != null) {
stream = that.shareStream;
}
return stream;
},
二、退出视频会议室
因为电话图标按钮既可以进入视频会议室，也可以退出视频会议室，所以我们要用程序判断。当初我们写代码的时候留了else语句，下面的代码就写到else语句里面。
//获取当前本地使用的流，有可能是本地流或者共享流
let stream = that.getStream();
that.client.unpublish(stream).then(() => {
// 取消发布本地流成功
that.client
.leave()
.then(() => {
console.log('成功退出会议室');
//关闭本地流或者共享流
stream.stop();
stream.close();
//清空模型层的本地流
that.localStream = null;
that.shareStream = null;
//清空模型层的远端流
that.stream = {};
//销毁TrtcClient对象
that.client = null;
that.userList = []; //清空用户列表
that.videoStatus = true;
that.micStatus = true;
that.shareStatus = false;
//视频墙上本地流DIV区域置底
$('#localStream').css({ 'z-index': '-1' });
$('#localStream').html('');
//TODO 如果是播放大屏视频的时候退出会议，退出会议后需要隐藏大屏
})
.catch(error => {
console.error('成功退出会议室失败' + error);
});
});
三、监听远程参会人退出会议
刚才我们写的代码是在本地退出视频会议，如果是开会的时候，其他人退出会议该怎么办呢？那就取消订阅该参会人的视频流，然后销毁流对象，并且视频墙上关闭该参会人的视频讯号。
//订阅远端删除流事件（远端用户退出会议室）
client.on('stream-removed', event => {
let remoteStream = event.stream;
client.unsubscribe(remoteStream); //取消订阅该远端流的所有事件
let userId = remoteStream.getUserId();
//上线用户列表中删除该用户
let i = that.userList.findIndex(function(one) {
return one.userId == userId;
});
that.userList.splice(i, 1);
//停止播放远端流视频，并且关闭远端流
remoteStream.stop();
remoteStream.close();
//把远端流从stream中删除
delete that.stream[userId];
//把远端视频播放界面设置为-1层
$('#' + userId).css({ 'z-index': '-1' });
$('#' + userId).html('');
});