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)

安装依赖

# 使用npm安装依赖
npm install

# 或使用yarn安装依赖
yarn install

启动应用

# 开发模式（自动重启）
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 中可以配置文本到视频的映射关系：

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

4. 默认视频配置

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

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来改进这个项目。