# WebRTC 音视频通话应用

一个基于WebRTC的实时音视频通话web应用，使用WebRTC技术传输视频流。用户开始通话后会自动播放默认视频流，当用户进行音频或文本对话时会切换到相应的视频流，交互结束后自动回到默认视频流。

## 功能特性

- 🎤 **实时音频通话**: 基于WebRTC技术实现点对点音频通话
- 📹 **WebRTC视频流传输**: 使用WebRTC技术传输视频流，而非播放本地文件
- 📐 **固定视频比例**: 视频播放框固定9:16比例，适合移动端显示
- 🎬 **无播放条界面**: 隐藏视频播放条，提供纯净的观看体验
- 💬 **文本输入识别**: 根据输入的文本内容切换相应视频流
- 🎤 **语音输入识别**: 支持语音输入并切换对应视频流
- 🔄 **自动回退**: 交互结束后自动回到默认视频流
- 🎨 **现代化UI**: 响应式设计，支持移动端和桌面端
- 🔄 **实时同步**: 所有用户实时同步视频流状态

## WebRTC视频流传输机制

1. **视频流创建**: 将本地视频文件转换为MediaStream
2. **Canvas渲染**: 使用Canvas将视频渲染为实时流
3. **流切换**: 根据用户交互动态切换不同的视频流
4. **实时同步**: 所有用户实时同步视频流状态
5. **缓存机制**: 缓存已创建的视频流，提高切换效率
6. **多用户传输**: 通过WebRTC技术向所有连接用户传输视频流

## 技术栈

- **前端**: HTML5, CSS3, JavaScript (ES6+)
- **后端**: Node.js, Express.js
- **实时通信**: Socket.IO
- **音视频**: WebRTC API, Canvas API
- **视频处理**: MediaStream API

## 安装和运行

### 前提条件

- Node.js (版本 14 或更高)
- 现代浏览器 (支持WebRTC和Canvas)

### 安装依赖

```bash
# 使用npm安装依赖
npm install

# 或使用yarn安装依赖
yarn install
```

### 启动应用

```bash
# 开发模式（自动重启）
npm run dev

# 或生产模式
npm start
```

访问 `http://localhost:3000` 开始使用应用。

## 项目结构

```
new_rtc/
├── src/                    # 前端源代码
│   ├── index.html         # 主HTML文件
│   ├── index.js           # 主JavaScript文件
│   └── styles.css         # 样式文件
├── videos/                # 视频文件目录
│   ├── asd.mp4           # 默认视频文件
│   ├── zxc.mp4           # 示例视频文件
│   └── jkl.mp4           # 示例视频文件
├── server.js              # Express服务器
├── package.json           # 项目配置
└── README.md             # 项目说明
```

## 使用说明

### 1. 开始音频通话

1. 点击"开始音频通话"按钮
2. 允许浏览器访问麦克风
3. 音频状态将显示"已连接"
4. 系统自动开始播放默认视频流（9:16比例，无播放条）

### 2. 智能视频流切换

1. **WebRTC视频流**: 使用WebRTC技术传输视频流，而非播放本地文件
2. **固定比例显示**: 视频播放框固定9:16比例，适合移动端观看
3. **纯净界面**: 隐藏播放条，提供沉浸式观看体验
4. **文本输入**: 在文本框中输入内容，系统会根据关键词自动切换视频流
5. **语音输入**: 点击语音按钮进行语音输入，系统会识别并切换视频流
6. **自动回退**: 交互结束后10秒自动回到默认视频流
7. **手动控制**: 点击"回到默认视频"按钮立即回到默认视频流

### 3. 视频映射配置

在 `server.js` 中可以配置文本到视频的映射关系：

```javascript
const videoMapping = {
  '你好': 'asd.mp4',
  'hello': 'asd.mp4',
  '再见': 'zxc.mp4',
  'goodbye': 'zxc.mp4',
  '谢谢': 'jkl.mp4',
  'thank you': 'jkl.mp4',
  '默认': 'asd.mp4'
};
```

### 4. 默认视频配置

在 `server.js` 中可以修改默认视频：

```javascript
const DEFAULT_VIDEO = 'asd.mp4'; // 修改为您的默认视频文件名
```

## 添加新视频

1. 将视频文件放入 `videos/` 目录
2. 支持的格式: MP4, WebM, AVI
3. 在 `server.js` 中更新视频映射配置
4. 重启服务器

## 语音识别

当前版本使用模拟语音识别。要集成真实的语音识别，可以：

1. 使用Web Speech API
2. 集成第三方语音识别服务（如百度、阿里云等）
3. 修改 `processVoiceInput` 方法中的语音识别逻辑

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+

## 注意事项

1. 需要HTTPS环境才能使用麦克风（本地开发除外）
2. 确保浏览器允许访问麦克风权限
3. 视频文件应放在 `videos/` 目录中
4. 建议使用现代浏览器以获得最佳体验
5. 交互超时时间可在服务器端配置（默认10秒）
6. 视频流使用Canvas渲染，确保浏览器支持Canvas API

## 故障排除

### 无法访问麦克风
- 检查浏览器权限设置
- 确保使用HTTPS或localhost
- 检查设备是否被其他应用占用

### 视频流无法创建或黑屏
- 检查视频文件格式是否支持
- 确认视频文件路径正确
- 检查浏览器是否支持Canvas API
- 查看浏览器控制台是否有错误信息
- 使用"测试视频文件"按钮检查视频文件是否可访问
- 确保视频文件在 `videos/` 目录中存在

### 连接问题
- 检查网络连接
- 确认服务器正在运行
- 检查防火墙设置

### CSS样式问题
- 确保 `src/styles.css` 文件存在
- 检查浏览器控制台是否有404错误
- 确认服务器正确配置了静态文件服务

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request来改进这个项目。