# 前端

**Repository Path**: wawahao/front-end

## Basic Information

- **Project Name**: 前端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-06
- **Last Updated**: 2025-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebRTC 直播系统使用指南

## 🎥 电脑直播 + 手机观看

### 1. 启动服务器

确保两个服务器都在运行：

```bash
# 启动前端开发服务器
npm run dev:http

# 启动WebRTC信令服务器
node server.js
```

### 2. 电脑端（主播）

1. **打开浏览器**：Chrome、Firefox或Edge
2. **访问地址**：`http://192.168.8.41:5173/zhibo-streamer`
3. **配置浏览器**（如果出现媒体API错误）：
   - Chrome: `chrome://flags/` → 搜索"Insecure origins" → 添加 `http://192.168.8.41:5173`
   - Firefox: `about:config` → 搜索"media.devices.insecure.enabled" → 设置为 `true`
4. **开始直播**：
   - 点击"开始捕获" → 选择要共享的屏幕或窗口
   - 可选：点击"开启摄像头" → 添加摄像头画面
   - 点击"开始直播" → 开始推流

### 3. 手机端（观众）

1. **打开手机浏览器**：Chrome、Safari或Firefox
2. **访问地址**：`http://192.168.8.41:5173/zhibo-viewer`
3. **开始观看**：
   - 点击"开始观看" → 连接直播
   - 可以发送弹幕与主播互动
   - 支持全屏观看

### 4. 功能特性

#### 主播端功能：
- ✅ **屏幕共享**：共享整个屏幕或特定窗口
- ✅ **摄像头直播**：添加摄像头画面（画中画）
- ✅ **弹幕管理**：查看观众发送的弹幕
- ✅ **弹幕窗口**：独立的弹幕显示窗口
- ✅ **观众统计**：实时显示观众数量

#### 观众端功能：
- ✅ **实时观看**：流畅的直播画面
- ✅ **弹幕发送**：发送弹幕与主播互动
- ✅ **弹幕显示**：观看其他观众的弹幕
- ✅ **全屏模式**：支持全屏观看
- ✅ **音频控制**：可以开关音频

### 5. 网络要求

- **局域网**：确保电脑和手机在同一个WiFi网络
- **IP地址**：使用电脑的局域网IP地址（如192.168.8.41）
- **端口开放**：确保5173端口（前端）和9000端口（信令服务器）可访问

### 6. 故障排除

#### 如果电脑端无法捕获屏幕：
1. 检查浏览器权限设置
2. 确保允许屏幕共享权限
3. 尝试使用localhost访问：`http://localhost:5173`

#### 如果手机端无法观看：
1. 确保手机和电脑在同一网络
2. 检查防火墙设置
3. 尝试使用电脑的IP地址访问

#### 如果弹幕不显示：
1. 检查WebRTC信令服务器是否运行
2. 查看浏览器控制台错误信息
3. 刷新页面重试

### 7. 高级功能

- **多观众支持**：支持多个手机同时观看
- **实时弹幕**：弹幕实时同步显示
- **自适应画质**：根据网络状况自动调整
- **低延迟**：WebRTC技术确保低延迟直播

## 🚀 开始使用

1. 确保两个服务器都在运行
2. 电脑端访问：`http://192.168.8.41:5173/zhibo-streamer`
3. 手机端访问：`http://192.168.8.41:5173/zhibo-viewer`
4. 开始您的直播之旅！

---

**注意**：首次使用可能需要配置浏览器权限，请按照上述步骤设置。