【学习打卡】第11天 TRTC的调用

课程名称： SpringBoot+Vue3 项目实战，打造企业级在线办公系统
课程章节： 第6章 TRTC在线视频会议
主讲老师： 神思者

课程内容

之前已经在前端页面生成了视频墙，那么视频墙上如果想要显示出视频应该怎么做呢？这个就要用上腾讯云的TRTC服务了，在前端项目的package.json文件中引用了TRTC库，版本号是4.10.2，所以我们在VUE页面可以直接使用TRTC库里面的各种函数。

1、进入视频会议室

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

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

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

2、发布本地流

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

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('本地流发布成功');
});

3、订阅远端流

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

//发现远端有新的音视频流
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控件);
});

4、退出

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

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

课程收获

掌握了创建TrtcClient对象和推送本地流、订阅远端流的方法。

使用TRTC的基本步骤如下：

• 需要创建TRTC的客户端。
• 然后拿到具体的会议号。
• 可以通过客户端对象的join函数，传入房间ID就能够进入会议室了。

课程截屏