UI组件

本文档介绍小鱼易连Web MeetingKit 包含的UI组件，帮助用户快速实现音视频会议。

添加 CSS 文件

在项目根目录，将 MeetingKit 的 CSS 文件引入项目。提供两种引入方式：

1. 使用 Tailwind 技术项目

如果项目使用 TailwindCSS，可通过以下方式引入。同时，可在文件中修改 CSS 变量以致实现自定义风格：

import '@xylink/meetingkit/css/xy_var.css';
import '@xylink/meetingkit/css/xy_base.css';

2. 未使用 Tailwind 技术项目

如果项目中未使用 TailwindCSS，可通过以下方式引入完整格式文件：

import '@xylink/meetingkit/css/style.css';

XYMeetingKitComp

MeetingKit UI 主体组件，用于展示和管理音视频会议界面的核心组件。

<XYMeetingKitComp visible={true} ... />

属性

详情

XYMeetingKitComp 组件是用于展示和管理会议界面的核心组件，主要用于渲染会议过程中涉及的不同界面，如呼叫界面、等候室界面、会议界面等。该组件可以与 uiMeetingKit 实例协同工作，提供实时音视频通话功能。

• 使用场景：用于渲染呼叫界面、会议界面、会控、聊天等功能，包括会议头部、内容区、底部工具栏等，支持会议中的实时音视频显示、互动操作等，适合用于多方视频通话和会议场景。
• 使用时机：默认初始显示呼叫界面，所以呼叫调用makeCall前，再渲染此组件，或者通过visible属性控制显示/隐藏
• 使用限制：仅支持单个会议界面渲染
• 设备适配：通过 uiMeetingKit.createClient 设置参数 isMobile，支持移动端和PC端

XYMeetingSettingComp

会前用于展示和调整会议相关的设置配置。

<XYMeetingSettingComp visible={true} ... />

属性

详情

XYMeetingSettingComp组件用于提供会前的设置调整功能，允许用户进行常规设置、设备设置和服务器设置等配置，帮助用户在会议开始前配置相关参数。

• 使用场景：在会议中或会议外，用于调整设置的弹框组件，包含常规设置、设备设置、服务器设置等
• 使用时机：如果会前需要设置，可以引用此组件； 会中XYMeetingKitComp组件已包含此组件
• 使用限制：仅支持使用XYMeetingKitComp组件时，会前使用，可配置部分功能项
• 设备适配：通过 uiMeetingKit.createClient 设置参数 isMobile，支持移动端和PC端，移动端和PC端展示的设置内容有所不同