当前位置：首页 > news >正文

WebRTC学习中各项概念笔记

news 2025/10/31 10:55:27

本文摘要：本文对比了WebSocket与WebRTC的技术特点及应用场景。WebSocket是基于HTTP升级的应用层协议，提供全双工实时通信，负责WebRTC中的信令传输（如呼叫控制、SDP交换）；而WebRTC则在传输层直接处理音视频数据流。SDP协议作为会话描述，通过文本格式协商媒体参数（编码、端口等）。ICE候选机制通过收集本地、STUN反射和TURN中继地址，按优先级自动选择最优网络路径。二者协作实现Web实时通信：WebSocket简化信令传输，WebRTC专注媒体处理，共同克服NAT穿透等网络挑战。

webSocket

webSocket与WebRTC区别

Socket（套接字）
层级：传输层（TCP/UDP）
作用：操作系统级别的网络通信接口
特点：
需要处理字节流、数据包重组
需要手动处理连接、断开、重连
跨平台兼容性差
WebSocket
层级：应用层（基于HTTP升级）
作用：全双工实时通信协议
特点：
基于HTTP 101协议升级
自动处理连接状态
浏览器原生支持

为什么选择webSocket

在WebRTC中的角色：

WebSocket负责信令传输（呼叫控制、SDP交换）
WebRTC负责媒体传输（音视频数据流）
两者分工合作，各司其职

简单来说：WebSocket是"高级版"的Socket，专门为Web环境优化，让开发者专注于业务逻辑而不是网络细节。

技术层级关系

WebSocket（简称WS）是一种全双工通信协议，它是现代Web实时通信的基础技术。以下是通俗易懂的解释：

本质：建立在TCP连接之上的高级协议
就像在普通电话线上开通了视频通话功能
底层还是走TCP，但增加了更智能的通信能力
在项目中的作用：
传输信令消息（如："用户A想呼叫用户B"）
交换网络信息（ICE候选地址）
同步通话状态（接通/挂断）

与传统Socket的区别：

特性	原生Socket	WebSocket
协议层级	传输层(TCP/UDP)	应用层(基于HTTP升级)
数据格式	原始字节流	结构化消息
浏览器支持	不支持	原生支持
连接建立	手动三次握手	HTTP 101协议切换

SDP的作用和内容

SDP（Session Description Protocol）是会话描述协议，它就像是WebRTC通话的"合同"或"菜单"，详细说明了通话的技术规格。

1. SDP的本质

作用：描述媒体会话的"技术规格说明书"
格式：文本协议，类似配置文件
内容：说明音视频编码、网络地址、带宽要求等

2. 在您项目中的具体体现

Offer SDP示例（主叫方生成）：

v=0
o=- 123456 2 IN IP4 192.168.1.100
s=WebRTC通话
t=0 0
m=audio 50000 RTP/AVP 111
a=rtpmap:111 opus/48000/2
m=video 50002 RTP/AVP 107
a=rtpmap:107 VP8/90000

Answer SDP示例（被叫方回复）：

v=0
o=- 654321 2 IN IP4 192.168.1.101  
s=WebRTC通话
t=0 0
m=audio 60000 RTP/AVP 111
a=rtpmap:111 opus/48000/2
m=video 60002 RTP/AVP 107
a=rtpmap:107 VP8/90000

m=media：媒体类型（audio/video）和端口
a=attribute：编码器、带宽等参数
c=connection：网络连接信息
o=origin：会话创建者标识

SDP就是双方在通话前先确认"我们都能支持哪些音视频格式，用什么参数来通信"，确保技术兼容性。

各变量解释：

server/server.js

express：通过require('express')引入的Express框架实例
http：Node.js内置HTTP模块
path：Node.js路径处理模块
SignalingServer：从./signaling导入的自定义信令服务器类
app：Express应用实例，由express()创建
server：HTTP服务器实例，由http.createServer()创建
PORT：服务器监听端口，从环境变量或默认值3000获取
__dirname：Node.js提供的当前文件所在目录路径

server/signaling.js

WebSocket：通过require('ws')引入的WebSocket库
uuidv4：UUID生成函数
UserManager：用户管理类
this.wss：WebSocket服务器实例
this.userManager：UserManager实例
ws：WebSocket连接对象（参数传递）
message：收到的WebSocket消息（参数传递）
data：消息数据对象（从message解构）
userName/userId：用户信息（从data解构）
offer/answer：WebRTC会话描述（参数传递）
candidate：ICE候选信息（参数传递）

server/user-manager.js

this.users：Map结构，存储用户ID到用户对象的映射
this.userSockets：Map结构，存储WebSocket到用户的映射
user：临时用户对象（局部变量）

client/js/webrtc-client.js

this.ws：WebSocket连接实例
this.peerConnection：RTCPeerConnection实例
this.localStream/remoteStream：媒体流对象
this.rtcConfig：WebRTC配置对象
event：事件对象（参数传递）
track：媒体轨道（局部变量）
offer/answer：WebRTC会话描述（局部变量）

client/js/auth.js

userName：从输入框获取的用户名
errorMessage：错误提示DOM元素
savedUserName：从localStorage读取的用户名

client/js/ui.js

webrtcClient：全局WebRTC客户端实例
e：键盘事件对象（参数传递）

变量未定义但可用的原因：

全局对象：如document, window, console等浏览器环境全局对象
模块导出：通过require()引入的模块（如WebSocket）
闭包捕获：箭头函数捕获的外部作用域变量
参数传递：函数调用时传入的参数
类成员变量：通过this.定义的变量在整个类中可用