185 lines
5.5 KiB
Markdown
185 lines
5.5 KiB
Markdown
# 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来改进这个项目。 |