file-starter/.claude/commands/check-live-直播相关文件检查.md

---

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)

• 直播页面入口，包含角色选择、课堂创建/加入功能
• 阿里云RTC SDK类型定义 nodemodules/.pnpm/aliyun-rtc-sdk@7.1.2@tensorflow+tfjs-core@4.22.0_debug@4.4.1_seedrandom@3.0.5/node_modules/aliyun-rtc-sdk/dist/types/index.d.ts

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. 权限控制

   • 老师权限: 管理课堂、静音学生、应答举手
   • 学生权限: 观看直播、举手提问、发送消息

使用示例

创建课堂 (老师)

const { createClass } = useClassroomContext();
const classId = await createClass('数学课堂');

加入课堂 (学生)

const { joinClass } = useClassroomContext();
await joinClass('classroom_123');

发送消息

const { sendMessage, msgText, setMsgText } = useClassroomContext();
setMsgText('大家好！');
await sendMessage();

举手提问

const { handUp } = useClassroomContext();
await handUp('我有一个问题');

环境配置要求

必需环境变量

# 阿里云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：

<script src="https://g.alicdn.com/apsara-media-box/imp-interaction/1.6.1/alivc-im.iife.js"></script>