在线会议页面的视频墙分成和很多格子，每个格子的尺寸都不大，我们能不能将某个远端视频放大显示呢？这个功能可以有，所以这节课咱们把切换大屏给实现了，顺便还可以实现开启关闭摄像头和麦克风的功能。

一、熟悉前端页面

视频墙中的其他参会人格子都设置了双击事件，对应的回调函数，我们写代码把视频大屏显示。

<div class="video-list">
    <!--当前用户排在视频墙第一位-->
    <div class="video">
        <div class="user">
            <img class="photo" :src="mine.photo" />
            <span class="name">{{ mine.name }}{{ shareStatus ? '（共享中）' : '' }}</span>
        </div>
        <div id="localStream"></div>
    </div>
    <!--其他参会人-->
    <div class="video" v-for="one in memberList">
        <div class="user">
            <img class="photo" :src="one.photo" />
            <span class="name">{{ one.name }}</span>
        </div>
        <div :id="one.id" class="remote-stream" @dblclick="bigVideoHandle(one.id)"></div>
    </div>
</div>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在页面中隐藏了一个DIV控件，它的尺寸设置成了100%，我们大屏显示视频的时候，就停掉视频墙某个格子中的视频，然后在这个大屏DIV中播放视频。

<div id="videoBig" @dblclick="smallVideoHandle()"></div>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1

#videoBig{
	display: none;
	width: 100%;
	height: 100%;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5

二、大屏显示远端视频

我们编写JS代码，实现bigVideoHandle()这个双击事件回调函数。

//双击某个远端小视频，切换到大屏显示
bigVideoHandle: function(userId) {
    let that = this;
    //在模型层记录全屏显示的远端用户userId，切回小屏会用到
    that.bigVideoUserId = userId; 
    $('#videoListContainer').hide(); //隐藏视频墙
    $('#videoBig').show(); //显示大屏控件
    //停止该用户的远端视频在屏幕墙格子的播放
    that.stream[userId].stop(); 
    //远端视频在大屏播放
    that.stream[userId].play('videoBig'); 
},
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12

三、关闭大屏显示

大屏DIV控件也有双击事件，我们把该事件的回调函数给实现了。

//双击大屏视频，切换到小屏播放
smallVideoHandle: function() {
    let that = this;
    //停止大屏播放远端视频
    that.stream[that.bigVideoUserId].stop(); 
    //在相应的小屏播放远端视频
    that.stream[that.bigVideoUserId].play(that.bigVideoUserId); 
    that.bigVideoUserId = null;
    //隐藏大屏控件
    $('#videoBig').hide();
    //显示视频墙
    $('#videoListContainer').show();
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13

四、退出视频会议自动关闭大屏

当本地用户退出视频会议的时候，页面自动关闭大屏，切换回视频墙界面

//如果是播放大屏视频的时候退出会议，退出会议后需要隐藏大屏，然后显示视频墙界面
if (that.bigVideoUserId != null) {
    $('#videoBig').hide();
    $('#videoListContainer').show();
    that.bigVideoUserId = null;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6

五、开关摄像头和麦克风

在视频会议进行中，本地用户可以开关自己的摄像头和麦克风。

<button :class="videoStatus ? 'video-btn-on' : 'video-btn-off'" @click="videoHandle"/>
<button :class="micStatus ? 'mic-btn-on' : 'mic-btn-off'" @click="micHandle"/>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2

点击摄像头按钮可以切换开启和关闭摄像头，所以我们要实现videoHandle()函数。

videoHandle: function() {
    let that = this;
    if (that.shareStatus) {
        that.$alert('屏幕共享中无法开关摄像头', '提示信息', {
            confirmButtonText: '确定'
        });
        return;
    }
    if (that.videoStatus) {
        //关闭摄像头
        that.localStream.muteVideo();
    } else {
        //开启摄像头
        that.localStream.unmuteVideo();
    }
    that.videoStatus = !that.videoStatus;
},
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

开关麦克风的回调函数是micHandle()，这个函数咱们要实现。

micHandle: function() {
    let that = this;
    let stream = that.getStream();
    if (that.micStatus) {
        //关闭话筒
        stream.muteAudio();
    } else {
        //开启话筒
        stream.unmuteAudio();
    }
    that.micStatus = !that.micStatus;
},
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12