上个小节我们看到了前端页面生成了视频墙，那么视频墙上如果想要显示出视频应该怎么做呢？这个就要用上腾讯云的TRTC服务了，我在前端项目的package.json文件中引用了TRTC库，版本号是4.10.2，所以我们在VUE页面可以直接使用TRTC库里面的各种函数。另外，大家不要更改TRTC库的版本号，否则API升级容易产生不兼容现象。

关于腾讯云TRTC服务的API文档，大家可以到官网查阅它的API文档（https://cloud.tencent.com/document/product/647/17249），里面有详细的说明和具体的案例。这节课咱们就先专门学习一下TRTC服务，下节课我们把TRTC应用在前端项目上面。

一、进入视频会议室

首先我们要创建TrtcClient对象，传入相关的参数，这样才能连接到视频会议室。

const client = TRTC.createClient({
  mode: 'rtc',
  appId,
  userId,
  userSig
});

client.join({ roomId })
.catch(error => {
    console.error('进房失败 ' + error);
})
.then(() => {
    console.log('进房成功');
});

二、发布本地流

想要让远程其他人看到我们本地的视频，就需要发布本地的音视频流。

const localStream = TRTC.createStream({ userId, audio: true, video: true });

//初始化本地音视频流，就是开启摄像头和麦克风
localStream.initialize()
.catch(error => {
    console.error('初始化本地流失败 ' + error);
})
.then(() => {
    console.log('初始化本地流成功');
    //在某个DOM控件上播放本地音视频流
    localStream.play(DOM控件);
});

//发布本地推流
client.publish(localStream)
.catch(error => {
    console.error('本地流发布失败 ' + error);
})
.then(() => {
    console.log('本地流发布成功');
});

三、订阅远端流

如果想要收看到远程其他人的音视频，我们要订阅这些音视频流。

//发现远端有新的音视频流
client.on('stream-added', event => {
    const remoteStream = event.stream;
    //订阅远端流
    client.subscribe(remoteStream);
});

//检测订阅事件
client.on('stream-subscribed', event => {
    const remoteStream = event.stream;
    console.log('远端流订阅成功');
    //在某个DOM控件上播放远端流
    remoteStream.play(DOM控件);
});

四、退出会议室

我们退出会议是的时候，需要调用特定的方法。

client.leave()
.then(() => {
   // 退房成功，需要关闭本地流和远程流
})
.catch(error => {
    console.error('退房失败 ' + error);
});