【新知实验室】-多人视频会议体验

新知实验室_多人视频会议体验

关于腾讯发布的 实时音视频（Tencent RTC） 产品：是一个包含 UI 的开源音视频组件，通过集成 TUIRoom，您可以在业务中快速上线音视频房间，屏幕分享，聊天等功能。Web 端 TUIRoom 基础功能。

组件集成

TUIRoom 组件使用 Vue3 + TS + Pinia + SCSS 开发，要求接入项目使用 Vue3 或 Vue2.7，支持 typescript。

开通产品

1.创建应用，TRTC 是基于腾讯云提供服务的，需要先创建 TRTC 应用，才能使用服务，应用的 SDKAppID 和 SecretKey 是服务认证凭据，需要认证后才能成功跑起来demo。

创建应用送 10000 分钟免费体验；具体的信息，也可以通过控制台进行查看

TRTC 提供无 UI 集成 和 有 UI 集成 两大类

 无UI集成：

仓库里有5个demo：

base-js
base-react-next
quick-demo-js
quick-demo-vue2-js
quick-demo-vue3-ts

我操作的是最简单基础的base-js，用 script 方式引入了 TRTC sdk，根据上一步获取到的SDKAppID 和 SecretKey对/base-js/js/debug/GenerateTestUserSig.js中的信息进行修改，修改完成即可进入房间；

步骤1：创建 Client 对象 主要参数如下

在使用 TRTC Web SDK 中，经常会接触到以下对象：

Client 对象，代表一个本地客户端。Client 类的方法提供了进入通话房间、发布本地流、订阅远端流等功能。

Stream 对象，代表一个音视频流对象，包括本地音视频流对象 LocalStream 和远端音视频流对象 RemoteStream。Stream 类的方法主要提供音视频流对象的行为，包括音频和视频的播放控制。

步骤2：进入音视频通话房间 主要参数如下：

调用 Client.join() 进入音视频通话房间。

可以通过相同的房间号进入房间

也可以进行实时屏幕分享

步骤1：创建屏幕分享流

屏幕分享流包含视频流和音频流。其中音频流分为麦克风音频或者系统音频。

// 通常情况下，建议给 userId 加上前缀 `share_`，用来标识这是用于屏幕分享的客户端对象。
const userId = 'share_userId';
const roomId = 'roomId';


// good 正确用法
// 仅采集屏幕视频流
const shareStream = TRTC.createStream({ audio: false, screen: true, userId });
// or 采集麦克风音频及屏幕视频流
const shareStream = TRTC.createStream({ audio: true, screen: true, userId });
// or 采集系统音频及屏幕视频流
const shareStream = TRTC.createStream({ screenAudio: true, screen: true, userId });


// bad 错误用法
const shareStream = TRTC.createStream({ camera: true, screen: true });
// or
const shareStream = TRTC.createStream({ camera: true, screenAudio: true });

步骤2：初始化屏幕分享流

初始化时浏览器会向用户请求屏幕共享的内容和权限，如果用户拒绝授权或者系统未授予浏览器屏幕分享的权限，代码会捕获到 NotReadableError 或者 NotAllowedError 错误，这时需要引导用户进行浏览器设置或者系统设置开启屏幕共享权限，并且重新初始化屏幕分享流。

try {
  await shareStream.initialize();
} catch (error) {
  // 当屏幕分享流初始化失败时, 提醒用户并停止后续进房发布流程
  switch (error.name) {
    case 'NotReadableError':
      // 提醒用户确保系统允许当前浏览器获取屏幕内容
      return;
    case 'NotAllowedError':
      if (error.message.includes('Permission denied by system')) {
        // 提醒用户确保系统允许当前浏览器获取屏幕内容
      } else {
        // 用户拒绝/取消屏幕分享
      }
      return;
    default:
      // 初始化屏幕分享流时遇到了未知错误，提醒用户重试
      return;
  }
}

步骤3：创建负责进行屏幕分享的客户端对象

通常情况下，建议给 userId 加上前缀 share_，用来标识这是用于屏幕分享的客户端对象。

const shareClient = TRTC.createClient({
  mode: 'rtc',
  sdkAppId,
  userId, // 例如：‘share_teacher’
  userSig
});
// 客户端对象进入房间
try {
  await shareClient.join({ roomId });
  // ShareClient join room success
} catch (error) {
  // ShareClient join room failed
}

步骤4：发布屏幕分享流

通过第一步创建的客户端对象进行发布。发布成功后，远端就能收到屏幕分享流。

try {
  await shareClient.publish(shareStream);
} catch (error) {
  // ShareClient failed to publish local stream
}

总结：

        音视频以及屏幕分享都很流畅，界面简洁 流程简化 实用性拉满，感兴趣的同学可以体验一下；

详情请参考：实时音视频 集成 TUIRoom (Web)-含 UI 集成方案-文档中心-腾讯云 (tencent.com)