# 音视频通话

**Repository Path**: xcharazz/audio-and-video-call

## Basic Information

- **Project Name**: 音视频通话
- **Description**: 点对点音视频通话组件，前端html，后端node.js---------                           
呼叫方：https://42.121.120.86/?uid=123&callTo=456----
接听方：https://42.121.120.86/?uid=456&callUid=123
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://42.121.120.86
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-11-10
- **Last Updated**: 2026-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, Nodejs, webrtc

## README

# WebRTC智能适配视频通话系统

## 项目概述

这是一个基于WebRTC技术的智能适配视频通话系统，支持本地和线上部署，提供高清视频通话、摄像头切换、视频窗口交换等功能。系统采用前后端分离架构，前端负责WebRTC连接管理和用户界面，后端提供WebSocket信令服务支持。

### 核心功能

- **智能适配部署**：自动检测运行环境，无需修改代码即可在开发环境和生产环境无缝切换
- **高清视频通话**：支持1280x720分辨率的视频通话，带有回声消除和噪声抑制
- **摄像头切换**：支持前置/后置摄像头切换，并智能处理本地视频显示位置
- **视频窗口交换**：支持主/小视频窗口点击交换，提升用户体验
- **音视频控制**：独立的麦克风和摄像头开关控制
- **安全验证**：支持API密钥验证和来源域名验证
- **连接状态监控**：实时显示连接状态和通话状态

## 系统架构

### 前端架构

前端采用纯HTML5 + JavaScript实现，无需任何框架依赖，确保最大兼容性：

1. **RTC.js**：WebRTC核心管理器，处理信令连接、媒体流获取、P2P连接建立等核心逻辑
2. **Compatibility.js**：用户交互封装，提供媒体设备初始化、按钮事件处理等API
3. **index.html**：用户界面，包含视频显示区域和控制按钮
4. **CSS样式**：提供响应式设计，支持各种设备尺寸

### 后端架构

后端基于Node.js + WebSocket实现，提供轻量级高效的信令服务：

1. **UniversalSignalingServer**：通用信令服务器类，支持自动环境检测和配置
2. **WebSocket服务**：处理实时信令消息传递和连接管理
3. **HTTP服务**：提供状态查询、统计信息和健康检查等REST API
4. **安全机制**：包含API密钥验证和来源验证功能

## 技术栈

- **前端**：HTML5, CSS3, JavaScript (原生)
- **后端**：Node.js, WebSocket (ws库)
- **WebRTC**：基于浏览器原生WebRTC API
- **通信**：WebSocket用于信令，P2P直接连接用于音视频传输

## 快速开始

### 安装依赖

```bash
cd webrtc
npm install
```

### 开发环境启动

```bash
# Windows环境
npm run dev-windows

# Linux/Mac环境
npm run dev
```

### 生产环境启动

```bash
npm run production
```

## 环境配置详解

### 配置文件结构

### 关键配置项详解

| 配置项 | 描述 | 默认值 | 适用环境 | 安全要求 |
|-------|------|-------|---------|--------|
| NODE_ENV | 运行环境标识 | development | 所有环境 | 低 |
| PORT | 服务器监听端口 | 3001 | 所有环境 | 低 |
| ALLOWED_ORIGINS | 允许的来源域名列表（逗号分隔） | http://localhost:3001,http://127.0.0.1:3001 | 生产环境 | 高 |
| API_KEY | API访问认证密钥 | dev_key_2024 | 所有环境 | 高（生产环境必须修改） |
| DOCKER_ENV | Docker环境运行标志 | false | 可选 | 低 |

### 环境变量加载机制

#### 自动加载配置（推荐）

为了确保.env文件中的配置能够正确加载，需要：

1. 安装dotenv依赖：
   ```bash
   npm install dotenv --save
   ```

2. 在server.js文件顶部添加：
   ```javascript
   // 加载对应环境的.env文件
   require('dotenv').config({ path: `.env.${process.env.NODE_ENV || 'development'}` });
   ```

#### 手动设置环境变量
```bash
# 开发环境
NODE_ENV=development PORT=3001 ALLOWED_ORIGINS=http://localhost:3001,http://127.0.0.1:3001 API_KEY=dev_key_2024 node server.js

# 生产环境
NODE_ENV=production PORT=3001 ALLOWED_ORIGINS=https://example.com,https://www.example.com API_KEY=your_secure_api_key_2024 node server.js
```

### 生产环境安全配置建议

1. **API密钥保护**：
   - 生成高强度随机API密钥（至少32个字符）
   - 定期轮换API密钥
   - 不要将API密钥硬编码在代码中

2. **来源域名限制**：
   - 生产环境必须严格设置ALLOWED_ORIGINS
   - 仅添加实际使用的域名
   - 不要使用通配符（*），除非特殊需求

3. **端口配置**：
   - 建议使用标准端口（如80/443配合反向代理）
   - 如果直接暴露，确保使用防火墙限制访问

4. **HTTPS部署**：
   - WebRTC需要安全上下文，生产环境必须使用HTTPS
   - 配置SSL证书并启用HTTPS连接
   - 通过反向代理（如Nginx）处理SSL终止

## 使用操作指南

### 1. 初始化通话

访问系统页面后，系统会自动初始化本地摄像头和麦克风：

- 首次使用时，浏览器会弹出权限请求对话框，请务必选择「允许」访问摄像头和麦克风
- 系统加载完成后会显示一个加载界面，然后自动显示本地视频画面
- 如果权限被拒绝，系统会显示错误提示，请刷新页面并重新授权

### 2. 开始通话流程

#### 主动发起通话

1. 系统通过URL参数或API获取目标用户ID
2. 自动连接到信令服务器（连接状态显示在顶部状态栏）
3. 向目标用户发送通话邀请
4. 等待对方接受通话
5. 连接建立后，显示对方视频（主窗口）和本地视频（小窗口）

#### 接听来电

1. 收到通话邀请后，系统会显示来电提示和接听按钮
2. 点击「接听」按钮接受通话
3. 系统建立WebRTC连接并开始传输音视频

### 3. 控制功能详解

系统界面提供以下控制按钮，所有按钮均支持点击和触摸操作：

- **摄像头切换按钮**：
  - 点击后自动切换前置/后置摄像头
  - 切换过程中会有短暂黑屏，属于正常现象
  - 切换成功后会自动更新视频显示，无论本地视频在主窗口还是小窗口

- **视频窗口交换**：
  - 点击小窗口区域即可交换主窗口和小窗口显示内容
  - 适用于需要更清楚查看本地或远程画面的场景
  - 交换后各自的静音状态保持不变

- **摄像头开关**：
  - 控制本地摄像头的开启和关闭
  - 关闭时，对方将看不到您的视频画面
  - 开关状态会实时显示在按钮图标上

- **麦克风开关**：
  - 控制本地麦克风的开启和关闭
  - 关闭时，对方将听不到您的声音
  - 开关状态会实时显示在按钮图标上

- **接听按钮**：
  - 仅在收到来电时显示
  - 点击后建立WebRTC连接并开始通话

- **挂断按钮**：
  - 点击后结束当前通话
  - 会断开WebRTC连接并清理相关资源
  - 通话结束后可以重新发起或接听新的通话

### 4. 状态指示系统

系统提供多重状态指示，帮助用户了解当前运行情况：

- **连接状态指示器**：
  - 顶部状态栏左侧显示信令服务器连接状态
  - 绿色圆点表示已连接，红色圆点表示未连接
  - 连接断开时会自动尝试重连

- **通话状态文本**：
  - 显示当前通话阶段：连接中、通话中、等待接听等
  - 提供明确的操作指引和状态反馈

- **环境标识徽章**：
  - 左上角显示当前运行环境
  - 开发环境（蓝色）：适用于本地测试和开发
  - 生产环境（绿色）：正式线上环境
  - 本地环境（橙色）：开发调试模式

## 常见问题

### 权限问题

如果无法访问摄像头/麦克风，请检查：
- 浏览器权限设置是否允许访问
- 系统防火墙是否阻止了访问
- 设备驱动是否正常工作

### 连接问题

如果无法建立连接，请检查：
- 网络连接是否正常
- 信令服务器是否运行正常
- 环境变量配置是否正确
- 防火墙是否阻止了WebSocket连接

## 部署注意事项

### Linux服务器部署

1. 确保安装Node.js 14.0.0或更高版本
2. 安装dotenv依赖以支持环境变量加载：`npm install dotenv --save`
3. 更新server.js添加dotenv配置：
   ```javascript
   require('dotenv').config({ path: `.env.${process.env.NODE_ENV || 'development'}` });
   ```
4. 使用PM2进行进程管理：`npm run pm2-start`

### 生产环境安全

1. 更新API_KEY为强密钥
2. 配置正确的ALLOWED_ORIGINS列表
3. 确保HTTPS部署（WebRTC需要安全上下文）
4. 定期更新依赖包以修复安全漏洞

## License

MIT License

## 联系方式

如有问题或建议，请通过项目仓库提出issue。