|
|
@@ -0,0 +1,131 @@
|
|
|
+---
|
|
|
+description: "直播相关文件检查指令"
|
|
|
+---
|
|
|
+
|
|
|
+本指令用于检查项目中直播相关的文件实现情况，为后续直播功能开发和维护提供上下文信息。
|
|
|
+
|
|
|
+## 检查范围
|
|
|
+
|
|
|
+### 1. 前端直播组件 (`src/client/mobile/components/Classroom/`)
|
|
|
+- **useClassroom.ts**: 直播核心逻辑Hook，包含阿里云RTC和IM SDK集成
|
|
|
+- **ClassroomLayout.tsx**: 直播界面布局组件
|
|
|
+- **ClassroomProvider.tsx**: 直播上下文提供者
|
|
|
+- **AuthLayout.tsx**: 认证布局组件
|
|
|
+- **alivc-im.iife.d.ts**: 阿里云IM SDK类型定义
|
|
|
+
|
|
|
+### 2. 直播页面 (`src/client/mobile/pages/ClassroomPage.tsx`)
|
|
|
+- 直播页面入口，包含角色选择、课堂创建/加入功能
|
|
|
+
|
|
|
+### 3. 后端API (`src/server/api/aliyun/index.ts`)
|
|
|
+- IM Token生成接口
|
|
|
+- RTC Token生成接口
|
|
|
+
|
|
|
+### 4. 客户端API (`src/client/api.ts`)
|
|
|
+- 阿里云服务客户端定义
|
|
|
+
|
|
|
+## 详细检查结果
|
|
|
+
|
|
|
+### 前端直播组件实现情况
|
|
|
+
|
|
|
+#### useClassroom.ts (直播核心逻辑)
|
|
|
+- ✅ **阿里云RTC SDK集成**: 使用 `aliyun-rtc-sdk` 进行实时音视频通信
|
|
|
+- ✅ **阿里云IM SDK集成**: 使用 `alivc-im` 进行即时消息通信
|
|
|
+- ✅ **角色管理**: 支持老师(Teacher)和学生(Student)两种角色
|
|
|
+- ✅ **课堂状态管理**: 支持未开始(IN_PROGRESS)、进行中(IN_PROGRESS)、已结束(ENDED)三种状态
|
|
|
+- ✅ **音视频控制**: 摄像头开关、麦克风开关、屏幕分享
|
|
|
+- ✅ **消息功能**: 文本消息、举手功能、问题提问
|
|
|
+- ✅ **课堂管理**: 创建课堂、加入课堂、离开课堂、开始/结束课堂
|
|
|
+- ✅ **用户管理**: 静音学生、移出学生、应答举手
|
|
|
+
|
|
|
+#### ClassroomLayout.tsx (界面布局)
|
|
|
+- ✅ **视频区域**: 主屏幕共享容器 + 摄像头小窗容器
|
|
|
+- ✅ **控制面板**: 摄像头、麦克风、屏幕分享控制按钮
|
|
|
+- ✅ **消息区域**: 实时消息显示和发送
|
|
|
+- ✅ **响应式设计**: 支持移动端和桌面端布局
|
|
|
+
|
|
|
+### 后端API实现情况
|
|
|
+
|
|
|
+#### 阿里云服务API (`/api/v1/aliyun`)
|
|
|
+- ✅ **IM Token生成**: POST `/im_token` - 生成即时消息认证令牌
|
|
|
+- ✅ **RTC Token生成**: POST `/rtc_token` - 生成实时通信认证令牌
|
|
|
+- ✅ **安全认证**: 使用SHA-256加密生成Token
|
|
|
+- ✅ **错误处理**: 完整的错误响应机制
|
|
|
+
|
|
|
+### 技术栈和依赖
|
|
|
+
|
|
|
+#### 前端SDK
|
|
|
+- **阿里云RTC SDK**: 实时音视频通信
|
|
|
+- **阿里云IM SDK**: 即时消息通信
|
|
|
+- **React Hooks**: 状态管理和副作用处理
|
|
|
+
|
|
|
+#### 后端依赖
|
|
|
+- **环境变量配置**: IM_APP_ID, IM_APP_KEY, IM_APP_SIGN, RTC_APP_ID, RTC_APP_KEY
|
|
|
+- **加密算法**: SHA-256哈希算法生成认证Token
|
|
|
+
|
|
|
+## 功能特性
|
|
|
+
|
|
|
+### 已实现功能
|
|
|
+1. **基础直播功能**
|
|
|
+ - 音视频通话
|
|
|
+ - 屏幕共享
|
|
|
+ - 实时消息
|
|
|
+ - 举手互动
|
|
|
+ - 问题提问
|
|
|
+
|
|
|
+2. **课堂管理**
|
|
|
+ - 创建课堂
|
|
|
+ - 加入课堂
|
|
|
+ - 开始/结束课堂
|
|
|
+ - 用户管理
|
|
|
+
|
|
|
+3. **权限控制**
|
|
|
+ - 老师权限: 管理课堂、静音学生、应答举手
|
|
|
+ - 学生权限: 观看直播、举手提问、发送消息
|
|
|
+
|
|
|
+
|
|
|
+## 使用示例
|
|
|
+
|
|
|
+### 创建课堂 (老师)
|
|
|
+```typescript
|
|
|
+const { createClass } = useClassroomContext();
|
|
|
+const classId = await createClass('数学课堂');
|
|
|
+```
|
|
|
+
|
|
|
+### 加入课堂 (学生)
|
|
|
+```typescript
|
|
|
+const { joinClass } = useClassroomContext();
|
|
|
+await joinClass('classroom_123');
|
|
|
+```
|
|
|
+
|
|
|
+### 发送消息
|
|
|
+```typescript
|
|
|
+const { sendMessage, msgText, setMsgText } = useClassroomContext();
|
|
|
+setMsgText('大家好！');
|
|
|
+await sendMessage();
|
|
|
+```
|
|
|
+
|
|
|
+### 举手提问
|
|
|
+```typescript
|
|
|
+const { handUp } = useClassroomContext();
|
|
|
+await handUp('我有一个问题');
|
|
|
+```
|
|
|
+
|
|
|
+## 环境配置要求
|
|
|
+
|
|
|
+### 必需环境变量
|
|
|
+```bash
|
|
|
+# 阿里云IM配置
|
|
|
+IM_APP_ID=your_im_app_id
|
|
|
+IM_APP_KEY=your_im_app_key
|
|
|
+IM_APP_SIGN=your_im_app_sign
|
|
|
+
|
|
|
+# 阿里云RTC配置
|
|
|
+RTC_APP_ID=your_rtc_app_id
|
|
|
+RTC_APP_KEY=your_rtc_app_key
|
|
|
+```
|
|
|
+
|
|
|
+### SDK引入
|
|
|
+前端需要引入阿里云SDK：
|
|
|
+```html
|
|
|
+<script src="https://g.alicdn.com/apsara-media-box/imp-interaction/1.6.1/alivc-im.iife.js"></script>
|
|
|
+```
|
yourname