上个小节我们实现了大屏显示远端参会人，而且也能手动开闭摄像头和麦克风，这么看来meeting_video.vue页面已经具备很多功能了，这节课咱们把屏幕共享给实现了，这是该页面最后的功能。

一、熟悉前端页面

在meeting_vue.vue页面中有共享按钮，用户点击这个按钮可以在共享屏幕和取消共享之间切换。

<div class="meeting-operate">
    <button :class="meetingStatus ? 'phone-btn-off' : 'phone-btn-on'" @click="phoneHandle"/>
    <button :class="videoStatus ? 'video-btn-on' : 'video-btn-off'" @click="videoHandle"/>
    <button :class="micStatus ? 'mic-btn-on' : 'mic-btn-off'" @click="micHandle"/>
    <button :class="shareStatus ? 'share-btn-on' : 'share-btn-off'" @click="shareHandle"/>
</div>

二、编写JS代码

共享流和视频流不能同时推流，所以我们在写JS代码的时候必须要判断。如果开启了视频流，需要先关闭视频流，然后创建共享流，并且推流。

shareHandle: function() {
    let that = this;
    //判断用户是否进入视频会议室
    if (!that.meetingStatus) {
        that.$alert('请先进入视频会议才能共享屏幕', '提示信息', {
            confirmButtonText: '确定'
        });
        return;
    }
    //检查浏览器是否支持屏幕共享
    if (!TRTC.isScreenShareSupported()) {
        //提示当前浏览器不支持在线视频会议
        this.$alert('当前浏览器不支持屏幕共享', '提示信息', {
            confirmButtonText: '确定'
        });
        return;
    }
    that.shareStatus = !that.shareStatus;
    //开启屏幕共享
    if (that.shareStatus) {
        //创建共享流
        let shareStream = TRTC.createStream({
            audio: that.micStatus,
            screen: true,
            userId: that.userId
        });
        shareStream.setScreenProfile('1080p');
        that.shareStream = shareStream;
        shareStream
            .initialize()
            .catch(error => {
                console.error('初始共享流失败 ' + error);
            })
            .then(() => {
                //取消推送本地视频流
                that.client.unpublish(that.localStream).then(() => {
                    that.localStream.close(); //关闭本地流
                    that.localStream = null; //本地流设置为空
                    //隐藏本地视频窗口
                    $('#localStream').css({ 'z-index': -1 });
                    that.client.publish(shareStream); //向远端推送共享流
                });
            });
    }
    //关闭屏幕共享
    else {
        //重建本地视频流
        let localStream = TRTC.createStream({
            userId: that.userId + '',
            audio: that.micStatus,
            video: that.videoStatus
        });
        that.localStream = localStream;
        localStream.setVideoProfile('480p');
        localStream
            .initialize()
            .catch(error => {
                console.error('初始化本地流失败 ' + error);
            })
            .then(() => {
                console.log('初始化本地流成功');
                //取消共享流的推流
                that.client.unpublish(that.shareStream).then(() => {
                    that.shareStream.close(); //关闭共享流
                    that.shareStream = null; //共享流设置为空
                    //显示本地视频窗口
                    $('#localStream').css({ 'z-index': 1 });
                    localStream.play('localStream'); //播放本地流
                    //向远端推送本地视频流
                    that.client
                        .publish(localStream)
                        .catch(error => {
                            console.error('本地流发布失败 ' + error);
                        })
                        .then(() => {
                            console.log('本地流发布成功');
                        });
                });
            });
    }
},