上个小节我们通过TRTC官方文档，掌握了创建TrtcClient对象和推送本地流、订阅远端流的方法，这节课咱们把学到的这些内容应用在meeting_video.vue页面吧。

一、熟悉前端页面

我们动手写JS程序之前，还是要先熟悉前端页面和视频会议的流程。例如当用户进入到meeting_video.vue页面，并不意味着连接上了在线视频会议室。而是需要我们手动点击右下角的电话图标，才会创建TrtcClient对象连接视频会议室，订阅远端流、推送本地流。当我再次点击电话图标，则会退出在线视频会议室，然后销毁本地流和远端流。

为什么不设计成进入到meeting_video.vue页面就自动连接视频会议室，推送本地流和订阅远端流？在技术上是可以实现的，但是不太符合情理。比如说用户希望先整理一下仪容仪表然后再进入视频会议室，如果你写的程序一上来就执行本地推流了，这就不太合适吧。

视频墙中每个格子里面都有用于播放流数据的DIV控件，这些控件的id就是某个参会人的userId。一会儿我们接收到远端流或者本地流的时候，可以从流中取出userId，然后找到对应的DIV控件播放流数据。

<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>

二、连接视频会议室，订阅远程流，推送本地流

在meeting_video.vue页面右下角有电话图标，这个图标设置了点击事件，我们写代码去实现phoneHandle()回调函数。当我们第一次点击的时候是进入视频会议室并签到，再点击一次是退出视频会议室。当然了，你可以反复点击，那就是返回进入和退出视频会议室。

<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>

phoneHandle: function() {
    let that = this;
    //检查浏览器是否支持在线视频会议
    TRTC.checkSystemRequirements().then(checkResult => {
        if (!checkResult.result) {
            that.$alert('当前浏览器不支持在线视频会议', '提示信息', {
                confirmButtonText: '确定'
            });
        } else {
            that.meetingStatus = !that.meetingStatus;
            if (that.meetingStatus) {
                //记录摄像头和话筒的状态
                that.videoStatus = true;
                that.micStatus = true;
                //TRTC日志输出级别为Error
                TRTC.Logger.setLogLevel(TRTC.Logger.LogLevel.ERROR);

                //生成用户签名（进入视频会才需要用户签名，不需要提前生成）
                that.$http('meeting/searchMyUserSig', 'GET', {}, false, function(resp) {
                    that.appId = resp.appId;
                    that.userSig = resp.userSig;
                    that.userId = resp.userId;
                });

                //创建TrtcClient对象
                let client = TRTC.createClient({
                    mode: 'rtc',
                    sdkAppId: that.appId,
                    userId: that.userId + '',
                    userSig: that.userSig
                });
                that.client = client;

                //监听新增远端流事件（用户进入会议室时候触发）
                client.on('stream-added', event => {
                    let remoteStream = event.stream;
                    //订阅远端流
                    client.subscribe(remoteStream);
                    //从远端流获得远程用户userId(创建TrtcClient对象时候的参数)
                    let userId = remoteStream.getUserId(); 
                    //TODO 把新上线的用户添加到页面右侧的在线人员列表中
                    
                    //把远端流保存到模型层JSON中，将来大屏显示的时候要找到某个远端流停止小窗口播放，切换到大窗口播放
                    that.stream[userId] = remoteStream;
                });

                //远端流订阅成功事件
                client.on('stream-subscribed', event => {
                    let remoteStream = event.stream;
                    let userId = remoteStream.getUserId();
                    //找到视频墙中某个远端用户的格子，把其中用于显示视频的DIV，置顶覆盖用户信息
                    $('#' + userId).css({ 'z-index': 1 }); 
                    //在这个置顶的DIV中播放远端音视频讯号
                    remoteStream.play(userId + ''); 
                });

                //订阅远端删除流事件（远端用户退出会议室）
                client.on('stream-removed', event => {
                    let remoteStream = event.stream;
                    //取消订阅该远端流
                    client.unsubscribe(remoteStream); 
                    let userId = remoteStream.getUserId();
                    //TODO 在页面右侧的用户列表中删除该用户

                    //停止播放远端流视频，并且关闭远端流
                    remoteStream.stop();
                    remoteStream.close();
                    //删除模型层JSON中保存的远端流对象
                    delete that.stream[userId];
                    //把视频墙中该用户格子的视频DIV控件置底，显示用户基本信息
                    $('#' + userId).css({ 'z-index': '-1' });
                    $('#' + userId).html('');
                });
                
                client
                    .join({ roomId: that.roomId })
                    .then(() => {
                        //TODO 执行签到

                        //成功进入会议室，然后创建本地流
                        let localStream = TRTC.createStream({
                            userId: that.userId + '',
                            audio: true,
                            video: true
                        });
                        that.localStream = localStream;
                        localStream.setVideoProfile('480p'); //设置分辨率

                        //TODO 把自己添加到上线用户列表中

                        //初始化本地音视频流
                        localStream
                            .initialize()
                            .catch(error => {
                                console.error('初始化本地流失败 ' + error);
                            })
                            .then(() => {
                                console.log('初始化本地流成功');
                                //视频墙中第一个格子中的视频DIV置顶
                                $('#localStream').css({ 'z-index': 1 });
                                //播放本地音视频流
                                localStream.play('localStream'); 
                                //向远端用户推送本地流
                                client
                                    .publish(localStream)
                                    .catch(error => {
                                        console.error('本地流发布失败 ' + error);
                                    })
                                    .then(() => {
                                        console.log('本地流发布成功');
                                    });
                            });
                    })
                    .catch(error => {
                        console.error('进入房间失败: ' + error);
                    });
            } else {
                //TODO 关闭视频会议
            }
        }
    });
},

写完这些代码，咱们可以找两个都带有摄像头和麦克风的电脑，以不同的员工帐户进入到同一个在线会议，这时候，你看看视频墙上有没有本地流和远端流。

假设我们本地电脑被称作A，另一台电脑称作B，我们在B电脑上模拟其他参会人访问A电脑上的前端项目，必然要写A电脑的IP地址和端口号。但是现在有个问题，浏览器的WebRTC只支持HTTPS访问远端网站，我们在B电脑上用HTTP协议连接A电脑的网站是无法使用TRTC的。所以我们要想个办法，给B电脑上的浏览器添加参数，允许在HTTP协议下远程使用TRTC服务。

如果你用的是MacOS系统，需要用命令行启动Chrome浏览器，并且把其中的IP和端口都改成A电脑的。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --unsafely-treat-insecure-origin-as-secure="http://ip:port" --user-data-dir=/Users/test/code

如果你用的是Windows系统，需要在Chrome浏览器图标上点击右键，在目标的结尾添加上下面这句话，然后把IP和端口改成A主机的。

--unsafely-treat-insecure-origin-as-secure="http://ip:port" --user-data-dir="C:/temp"

还有一个非常重要的注意事项，那就是前端项目main.js文件中封装baseUrl地址，如果你写的是localhost，一定要改成Windows主机的IP地址。否则B主机的浏览器加载了前端页面之后，所有的Ajax请求都发送给B主机。B主机上面又没运行emos-api项目，所以就会报错。记住，baseUrl变量一定要写A主机的IP地址，切记！