# ldesign-video-conference

**Repository Path**: ldesign-v1/ldesign-video-conference

## Basic Information

- **Project Name**: ldesign-video-conference
- **Description**: ????UI - ?????????????
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-12
- **Last Updated**: 2026-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/video-conference

视频会议 UI 组件库，提供多人视频布局、屏幕共享、会议控制等界面组件。

## ✨ 特性

- 📹 **多人视频布局** - 宫格/演讲者/侧边栏/画中画等布局模式自动切换
- 🖥️ **屏幕共享** - 屏幕共享控制栏与共享状态展示
- 🎤 **音视频控制** - 麦克风/摄像头开关、音量指示器
- 🙋 **举手功能** - 参会者举手排队、主持人管理
- 💬 **会议聊天** - 侧边栏文字聊天面板
- 👥 **参会者列表** - 参会人员列表、角色标识（主持人/联席/参会者）
- 🔇 **静音管理** - 全体静音/取消静音、个人静音控制
- ⏺️ **会议录制** - 录制状态指示与控制
- 📊 **网络质量** - 网络质量指示器（延迟/丢包/带宽）
- ⏱️ **会议计时** - 会议持续时间计时器
- 🔗 **邀请入会** - 会议链接/会议号分享面板
- 📱 **移动端适配** - 移动端视频会议界面
- 🌓 **主题切换** - 亮色/暗色主题

---

## 📦 安装

```bash
pnpm add @ldesign/video-conference @ldesign/video-conference-vue
```

## 🚀 快速开始

### Vue 组件使用

```vue
<template>
  <VideoConference
    user-id="user-1"
    user-name="张三"
    layout="grid"
    @joined="onJoined"
    @left="onLeft"
  />
</template>

<script setup>
import { VideoConference } from '@ldesign/video-conference-vue'

const onJoined = () => console.log('加入会议')
const onLeft = () => console.log('离开会议')
</script>
```

### 核心库使用

```typescript
import { VideoConferenceEngine } from '@ldesign/video-conference'

const engine = new VideoConferenceEngine({
  container: document.getElementById('conference'),
  layout: 'grid'
})

// 加入会议
engine.join('user-1', '张三')

// 监听事件
engine.events.on('participant-joined', ({ participant }) => {
  console.log(`${participant.name} 加入了会议`)
})

// 控制功能
await engine.controls.media.toggleAudio()
await engine.controls.screenShare.startScreenShare()
engine.controls.chat.sendMessage('你好', 'user-1', '张三')
```

### Composables 使用

```vue
<script setup>
import { useVideoConference } from '@ldesign/video-conference-vue'

const {
  participants,
  layout,
  join,
  leave,
  toggleAudio,
  toggleVideo
} = useVideoConference({
  container: containerRef.value,
  userId: 'user-1',
  userName: '张三',
  layout: 'grid'
})
</script>
```

> **注意：** 本库仅提供 UI 层组件，音视频传输需对接 WebRTC 或第三方 SDK（如声网/腾讯云/ZEGO）。

---

## 📁 项目结构

```
video-conference/
├── packages/
│   ├── core/          # 核心库 @ldesign/video-conference
│   │   └── src/
│   │       ├── core/       # 核心引擎
│   │       │   ├── EventEmitter.ts     # 类型安全的事件发射器
│   │       │   ├── StateManager.ts     # 状态管理器
│   │       │   ├── ParticipantManager.ts # 参会者管理器
│   │       │   └── VideoConferenceEngine.ts # 会议引擎主类
│   │       ├── layouts/    # 视频布局算法
│   │       │   ├── GridLayout.ts       # 宫格布局
│   │       │   ├── SpeakerLayout.ts    # 演讲者布局
│   │       │   ├── SidebarLayout.ts    # 侧边栏布局
│   │       │   ├── PiPLayout.ts        # 画中画布局
│   │       │   └── LayoutManager.ts    # 布局管理器
│   │       ├── controls/   # 控制面板组件
│   │       │   ├── MediaController.ts  # 媒体控制器
│   │       │   ├── ScreenShareController.ts # 屏幕共享控制器
│   │       │   ├── RecordingController.ts # 录制控制器
│   │       │   ├── ChatController.ts   # 聊天控制器
│   │       │   └── ControlManager.ts   # 控制管理器
│   │       ├── utils/      # 工具函数
│   │       │   ├── network.ts          # 网络质量检测
│   │       │   └── device.ts           # 设备管理
│   │       └── types/      # TypeScript 类型
│   │           ├── participant.ts      # 参会者类型
│   │           ├── layout.ts           # 布局类型
│   │           ├── control.ts          # 控制类型
│   │           ├── chat.ts             # 聊天类型
│   │           └── events.ts           # 事件类型
│   └── vue/           # Vue 组件 @ldesign/video-conference-vue
│       └── src/
│           ├── components/ # Vue 组件
│           │   ├── VideoConference.vue # 会议主组件
│           │   ├── VideoGrid.vue       # 视频网格
│           │   ├── VideoTile.vue       # 视频单格
│           │   └── ControlBar.vue      # 控制栏
│           └── composables/ # Vue Composables
│               ├── useVideoConference.ts # 会议 composable
│               └── useMediaControls.ts # 媒体控制 composable
├── playground/        # 演示应用
└── README.md
```

## 🎨 布局模式

### 宫格布局 (Grid)
自动计算最优网格，支持 1-50+ 参会者。

### 演讲者布局 (Speaker)
主讲人大窗口 + 其他参会者小窗口。

### 侧边栏布局 (Sidebar)
主内容区 + 侧边参会者列表。

### 画中画布局 (Picture-in-Picture)
主内容 + 画中画小窗口。

## 🔧 API 参考

### VideoConferenceEngine

| 方法 | 说明 |
|------|------|
| `join(userId, userName, options?)` | 加入会议 |
| `leave()` | 离开会议 |
| `addRemoteParticipant(participant)` | 添加远程参会者 |
| `removeRemoteParticipant(participantId)` | 移除远程参会者 |
| `updateParticipantStream(participantId, stream)` | 更新远程参会者流 |
| `destroy()` | 销毁引擎 |

### ControlManager

| 方法 | 说明 |
|------|------|
| `media.toggleAudio()` | 切换音频 |
| `media.toggleVideo()` | 切换视频 |
| `screenShare.startScreenShare()` | 开始屏幕共享 |
| `screenShare.stopScreenShare()` | 停止屏幕共享 |
| `recording.startRecording(stream)` | 开始录制 |
| `recording.stopRecording()` | 停止录制 |
| `chat.sendMessage(content, senderId, senderName)` | 发送消息 |
| `raiseHand()` | 举手 |
| `lowerHand()` | 放下手 |
| `muteAll()` | 全体静音 |
| `unmuteAll()` | 取消全体静音 |

### Vue 组件

| 组件 | 说明 |
|------|------|
| `VideoConference` | 会议主组件 |
| `VideoGrid` | 视频网格组件 |
| `VideoTile` | 视频单格组件 |
| `ControlBar` | 控制栏组件 |

### Composables

| Composable | 说明 |
|------------|------|
| `useVideoConference` | 视频会议 composable |
| `useMediaControls` | 媒体控制 composable |

## 📄 License

MIT