【金秋打卡】第6天 TRTC

课程名称：SpringBoot+Vue3 项目实战，打造企业级在线办公系统

课程章节： 用户管理模块

课程讲师： 神思者

课程内容 接昨天

    腾讯云TRTC服务的API文档（https://cloud.tencent.com/document/product/647/17249）

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

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

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

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

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