腾讯云多视频会议组件技术文档

1. 简介

本技术文档详细描述了基于腾讯云 TRTC SDK 开发的多视频会议系统的设计与实现。该系统支持多用户视频会议，屏幕共享、用户邀请、实时互动等功能。

2. 系统架构

该项目的核心架构基于以下关键技术组件：

• 前端框架：UniApp + Vue3
• 视频会议 SDK：腾讯云 TRTC SDK
• 实时通信 SDK：腾讯云 TIM SDK
• 屏幕共享与录制插件：LY-Screen
• 移动端权限管理：UniApp 内置权限管理

3. 技术选型

• Vue3：用于构建前端界面和逻辑。
• UniApp：实现跨平台开发，支持小程序、H5 和 App。
• TRTC SDK：用于提供稳定的视频会议功能。
• TIM SDK：用于提供实时通信服务，如消息推送、通知等。
• LY-Screen：用于屏幕录制与共享。

4. 功能模块

4.1 等候室功能

功能描述： 当用户加入会议前，显示等候室页面，等待其他用户加入。

核心功能：

• 显示用户头像和用户名。
• 根据不同设备类型显示相应默认头像（如医院、救护车等）。

4.2 会议房间功能

功能描述： 会议房间支持多用户视频显示，用户可以在不同页面中查看参与者的视频流。

核心功能：

• 使用 swiper 组件进行页面切换，展示用户视频。
• 支持本地与远程用户的视频流显示。
• 可动态调整视频窗口布局。

4.3 屏幕共享功能

功能描述： 当某用户开启屏幕共享时，其他用户可实时观看其屏幕。

核心功能：

• 通过 onUserSubStreamAvailable 事件监听屏幕共享的状态。
• 屏幕共享的视图与普通视频视图可切换。

4.4 用户邀请功能

功能描述： 会议主持人可在会议中途邀请其他成员加入会议。

核心功能：

• 通过后端 API 发送邀请。
• 邀请用户通过自定义消息通知被邀请者。

4.5 操作控制功能

功能描述： 用户可通过界面上的图标控制摄像头、麦克风的开启与关闭，并可切换扬声器和听筒。

核心功能：

• 摄像头切换：前置与后置摄像头。
• 麦克风开关。
• 扬声器和听筒切换。

---

5. 关键代码解析

5.1 等候室代码解析

在等候室界面，用户列表通过 v-for 循环渲染，每个用户根据其设备类型显示相应头像：

html
复制代码
<view v-if="showUI==='wait'" class="calling-container">
  <view class="personBox">
    <view v-for="(item,index) in waitUser" :key="index" class="person">
      <view class="headBox">
        <!-- 显示头像 -->
        <image v-if="!!item.avatarURL && item.avatarURL!=='null'" class="personHead" :src="item.avatarURL" />
        <!-- 显示默认头像 -->
        <view v-else-if="!item.avatarURL" class="personHead bb">
          <text class="white">{{item.userName.slice(0,1)}}</text>
        </view>
        <!-- 设备类型头像 -->
        <image v-else-if="item.terminalDevice===4" class="personHead" src="../../static/images/call_icon_hospital.png" />
      </view>
      <view class="personName">
        <text class="white">{{ item.userName }}</text>
      </view>
    </view>
  </view>
</view>

5.2 视频会议房间代码解析

使用 swiper 组件实现视频页面的切换，trtc-local-view 和 trtc-remote-view 组件分别用于本地和远程视频的显示。

html
复制代码
<swiper class="swiper" :current="currentIndex" ref="swiperRef" @change="updateCurrentIndex">
  <swiper-item key="sharedVideo" v-if="sharedVideoAvailable">
    <view class="local-share-item">
      <trtc-remote-view class="local-share-view" :viewId="'sub_' + sharedSubUserId"></trtc-remote-view>
    </view>
  </swiper-item>

  <swiper-item v-for="(page, index) in pages" :key="index">
    <view class="contact-video-page">
      <view v-for="(item, itemIndex) in page" :key="item.userId" class="video-item">
        <view v-if="item.userId===userId" class="local-item">
          <trtc-local-view class="local-view" v-if="item.videoAvailable" :viewId="userId"></trtc-local-view>
        </view>
      </view>
    </view>
  </swiper-item>
</swiper>

5.3 屏幕共享代码解析

通过监听 onUserSubStreamAvailable 事件，实时检查屏幕共享状态：

js
复制代码
trtc.on('onUserSubStreamAvailable', (res) => {
  sharedVideoAvailable.value = res.available || false;
  if (res.available) {
    sharedSubUserId.value = res.userId;
    trtc.startRemoteView(res.userId, TRTCVideoStreamType.TRTCVideoStreamTypeSub, `sub_${res.userId}`);
  }
});

5.4 用户邀请代码解析

用户邀请时调用后端 API 并发送自定义消息通知被邀请者。

js
复制代码
const inviteNewUsers = () => {
  const userIds = newUsers.map(user => user.userId);

  inviteUserAPI({ roomId, inviteSysIdList: userIds }).then(res => {
    if (res.code === '200') {
      newUsers.forEach(user => {
        allUser.push({
          userId: user.userId,
          userName: user.userName,
          avatarURL: user.avatarURL,
          videoAvailable: false,
          audioAvailable: false,
          isWaiting: true
        });
      });
      showInviteDialog.value = false;
    }
  });
};

5.5 操作控制代码解析

提供切换摄像头、麦克风和扬声器的操作功能。

js
复制代码
const handleSwitchCameras = () => {
  useFrontCamera.value = !useFrontCamera.value;
  trtc.switchCamera(useFrontCamera.value);
};

const handleMuteLocalVideo = async () => {
  localVideoMuteState.value = !localVideoMuteState.value;
  if (localVideoMuteState.value) {
    trtc.startLocalPreview(localVideoMuteState.value, userId);
  } else {
    trtc.stopLocalPreview();
  }
};

---

6. 样式与布局

会议页面采用动态布局，视频窗口的大小根据参与人数调整。通过函数 getVideoItemStyle 动态计算每个 video-item 的尺寸。

js
复制代码
const getVideoItemStyle = (itemIndex, pageIndex) => {
  let style = {};
  const screenWidth = uni.getSystemInfoSync().windowWidth;
  const screenHeight = uni.getSystemInfoSync().windowHeight;

  switch (allUser.length) {
    case 1:
      style.width = `${screenWidth}px`;
      style.height = `${screenHeight}px`;
      break;
    case 2:
      style.width = `${screenWidth / 2}px`;
      style.height = '334px';
      break;
    // 更多人数布局
  }
  return style;
};

7. 集成与使用

1. 项目初始化：在项目中安装 UniApp 和所需的 SDK（如 TRTC 和 TIM SDK）。
2. 配置 TRTC SDK：在 onLoad 方法中初始化 TRTC 实例并调用 enterRoom 方法加入会议房间。
3. UI 渲染：根据会议状态动态渲染 UI，如等候室和视频会议房间。
4. 功能扩展：支持屏幕共享、用户邀请、录制功能，确保实时交互的流畅性。

8. 常见问题与优化

1. 性能优化：

   • 大规模会议时，通过分页显示用户视频，避免页面过度渲染。
   • 使用合理的分辨率和比特率参数，确保视频流的质量与流畅度。

2. 延迟与卡顿：

   • 当网络质量差时，合理降低视频比特率或暂停视频传输，以保证音频的流畅。

3. 设备兼容性：

   • 针对移动端设备的摄像头、麦克风权限进行检测和提示。

---

结语

该文档提供了基于腾讯云多视频会议的完整技术实现方案，涵盖了等候室、屏幕共享、用户邀请等核心功能的设计与实现。