WebRTC 介绍

11月 27, 2025
Frontend, WebRTC, ByAI, Multi-Media

1. 引言#

在当今数字化时代，实时通信已经成为互联网应用的核心需求之一。无论是视频会议、在线教育、远程医疗还是实时游戏，用户都期望获得低延迟、高质量的实时交互体验。WebRTC（Web Real-Time Communication）正是为满足这一需求而诞生的一项革命性技术。

WebRTC 是一种开放源代码的实时通信技术，允许浏览器之间直接进行音频、视频和数据的实时传输，无需任何插件或第三方软件。它的出现彻底改变了 Web 实时通信的方式，为开发者提供了构建强大实时应用的能力。

2. 什么是 WebRTC#

WebRTC 是由 Google 主导开发的一项开源项目，于 2011 年首次发布。它的核心目标是让实时通信在 Web 上变得简单、高效和安全。

2.1 核心特性#

  • 浏览器原生支持：无需安装插件或额外软件
  • 点对点通信：数据直接在浏览器之间传输，减少延迟
  • 实时性：低延迟、高质量的音视频传输
  • 安全性：端到端加密，保护通信内容
  • 跨平台：支持主流浏览器（Chrome、Firefox、Safari、Edge）和移动平台
  • 开放标准：基于 W3C 和 IETF 标准

2.2 WebRTC 架构#

WebRTC 由三个主要组件构成：

  1. 媒体捕获层：负责从设备获取音频和视频流
  2. 信令层：负责建立和维护通信连接
  3. 传输层：负责数据的实时传输和质量保证

3. WebRTC 的核心功能#

3.1 实时音频/视频通信#

WebRTC 允许浏览器直接捕获和传输音频/视频流，支持高清视频和高质量音频。它使用先进的编解码器（如 VP8、VP9、H.264 用于视频，OPUS、G.711 用于音频）来优化传输效率和质量。

3.2 数据通道#

除了音视频通信，WebRTC 还提供了双向数据通道（Data Channel），允许浏览器之间直接传输任意数据，如文本、文件、游戏状态等。数据通道支持可靠和不可靠两种传输模式，适用于不同场景。

3.3 屏幕共享#

WebRTC 支持捕获和共享屏幕内容，适用于远程协作、在线教育和技术支持等场景。

3.4 设备访问#

WebRTC 允许网页访问用户的摄像头、麦克风和扬声器等设备，通过简单的 API 即可实现设备的枚举和选择。

4. WebRTC 的工作原理#

4.1 信令（Signaling）#

虽然 WebRTC 支持点对点通信，但在建立连接之前，浏览器之间需要交换一些控制信息，这个过程称为信令。信令包括：

  • 会话描述（SDP）：包含媒体类型、编解码器、网络信息等
  • 网络候选者（ICE Candidates）：包含设备的 IP 地址和端口信息

信令需要通过一个可靠的服务器来传递，常用的信令协议包括 WebSocket、HTTP 或自定义协议。

4.2 NAT 穿透#

由于大多数设备位于 NAT（网络地址转换）后面，直接建立点对点连接比较困难。WebRTC 使用 ICE（Interactive Connectivity Establishment）框架来解决这个问题，包括：

  • STUN（Session Traversal Utilities for NAT）：获取设备的公网 IP 地址
  • TURN（Traversal Using Relays around NAT）：当点对点连接失败时，作为中继服务器转发数据
  • ICE Candidates：包含设备的各种网络信息，用于尝试建立连接

4.3 媒体协商#

在建立连接过程中，浏览器需要协商媒体参数，如编解码器、分辨率、比特率等。这个过程通过交换 SDP（Session Description Protocol）消息来完成。

4.4 安全机制#

WebRTC 内置了强大的安全机制：

  • 所有通信都使用 DTLS（Datagram Transport Layer Security）加密
  • 媒体流使用 SRTP（Secure Real-time Transport Protocol）加密
  • 要求使用 HTTPS 协议，确保信令安全
  • 支持指纹验证，防止中间人攻击

5. WebRTC 的基本 API#

WebRTC 提供了三个核心 API：

5.1 getUserMedia()#

用于访问用户的媒体设备，获取音频和视频流：

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})
.then(stream => {
  // 使用媒体流
  const videoElement = document.getElementById('local-video');
  videoElement.srcObject = stream;
})
.catch(error => {
  console.error('Error accessing media devices:', error);
});

5.2 RTCPeerConnection#

用于建立和维护点对点连接，处理媒体流的传输：

const peerConnection = new RTCPeerConnection({
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'turn:turn.example.com', username: 'user', credential: 'password' }
  ]
});

// 添加本地媒体流
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// 监听远程媒体流
peerConnection.ontrack = event => {
  const remoteVideo = document.getElementById('remote-video');
  remoteVideo.srcObject = event.streams[0];
};

5.3 RTCDataChannel#

用于建立双向数据通道，传输任意数据：

// 创建数据通道
const dataChannel = peerConnection.createDataChannel('chat');

// 监听数据通道事件
dataChannel.onopen = () => {
  console.log('Data channel is open');
};

dataChannel.onmessage = event => {
  console.log('Received message:', event.data);
};

dataChannel.onclose = () => {
  console.log('Data channel is closed');
};

// 发送数据
dataChannel.send('Hello, WebRTC!');

6. 简单示例：实现视频通话#

下面是一个简单的 WebRTC 视频通话应用示例，包括 HTML、CSS 和 JavaScript 代码：

6.1 HTML 结构#

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC Video Call</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>WebRTC Video Call</h1>
    
    <div class="video-container">
      <div class="video-wrapper">
        <h2>Local Video</h2>
        <video id="local-video" autoplay playsinline></video>
      </div>
      <div class="video-wrapper">
        <h2>Remote Video</h2>
        <video id="remote-video" autoplay playsinline></video>
      </div>
    </div>
    
    <div class="controls">
      <button id="start-btn">Start Call</button>
      <button id="stop-btn">Stop Call</button>
      <button id="toggle-audio-btn">Toggle Audio</button>
      <button id="toggle-video-btn">Toggle Video</button>
    </div>
    
    <div class="chat">
      <h2>Chat</h2>
      <div id="messages"></div>
      <div class="input-group">
        <input type="text" id="message-input" placeholder="Type a message...">
        <button id="send-btn">Send</button>
      </div>
    </div>
  </div>
  
  <script src="app.js"></script>
</body>
</html>

6.2 CSS 样式#

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.video-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.video-wrapper {
  text-align: center;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.video-wrapper h2 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #555;
}

video {
  width: 400px;
  height: 300px;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: #000;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.chat {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chat h2 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #555;
}

#messages {
  height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.message {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 4px;
  background-color: #e9ecef;
}

.input-group {
  display: flex;
  gap: 10px;
}

#message-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

6.3 JavaScript 实现#

// 媒体流和连接对象
let localStream;
let peerConnection;
let dataChannel;

// DOM 元素
const localVideo = document.getElementById('local-video');
const remoteVideo = document.getElementById('remote-video');
const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');
const toggleAudioBtn = document.getElementById('toggle-audio-btn');
const toggleVideoBtn = document.getElementById('toggle-video-btn');
const messageInput = document.getElementById('message-input');
const sendBtn = document.getElementById('send-btn');
const messages = document.getElementById('messages');

// ICE 服务器配置
const iceServers = [
  { urls: 'stun:stun.l.google.com:19302' }
];

// 初始化事件监听器
function initEventListeners() {
  startBtn.addEventListener('click', startCall);
  stopBtn.addEventListener('click', stopCall);
  toggleAudioBtn.addEventListener('click', toggleAudio);
  toggleVideoBtn.addEventListener('click', toggleVideo);
  sendBtn.addEventListener('click', sendMessage);
  messageInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });
}

// 启动通话
async function startCall() {
  try {
    // 获取本地媒体流
    localStream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    });
    
    // 显示本地视频
    localVideo.srcObject = localStream;
    
    // 创建 PeerConnection
    peerConnection = new RTCPeerConnection({ iceServers });
    
    // 添加本地媒体流到连接
    localStream.getTracks().forEach(track => {
      peerConnection.addTrack(track, localStream);
    });
    
    // 监听远程媒体流
    peerConnection.ontrack = (event) => {
      if (event.streams[0]) {
        remoteVideo.srcObject = event.streams[0];
      }
    };
    
    // 创建数据通道
    dataChannel = peerConnection.createDataChannel('chat');
    setupDataChannel();
    
    // 监听 ICE 候选者
    peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        // 发送 ICE 候选者到远程端（这里需要信令服务器）
        console.log('ICE Candidate:', event.candidate);
      }
    };
    
    // 创建并发送offer
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    
    // 发送 offer 到远程端（这里需要信令服务器）
    console.log('Offer:', offer);
    
    // 模拟接收远程 answer（实际应用中需要信令服务器）
    // 这里简化处理，实际应用中需要通过信令服务器交换 SDP
    
    // 更新按钮状态
    startBtn.disabled = true;
    stopBtn.disabled = false;
  } catch (error) {
    console.error('Error starting call:', error);
    alert('Failed to start call: ' + error.message);
  }
}

// 停止通话
function stopCall() {
  // 停止所有媒体轨道
  if (localStream) {
    localStream.getTracks().forEach(track => track.stop());
  }
  
  // 关闭 PeerConnection
  if (peerConnection) {
    peerConnection.close();
    peerConnection = null;
  }
  
  // 清空视频元素
  localVideo.srcObject = null;
  remoteVideo.srcObject = null;
  
  // 更新按钮状态
  startBtn.disabled = false;
  stopBtn.disabled = true;
}

// 切换音频
function toggleAudio() {
  if (localStream) {
    const audioTracks = localStream.getAudioTracks();
    audioTracks.forEach(track => {
      track.enabled = !track.enabled;
      toggleAudioBtn.textContent = track.enabled ? 'Toggle Audio' : 'Enable Audio';
    });
  }
}

// 切换视频
function toggleVideo() {
  if (localStream) {
    const videoTracks = localStream.getVideoTracks();
    videoTracks.forEach(track => {
      track.enabled = !track.enabled;
      toggleVideoBtn.textContent = track.enabled ? 'Toggle Video' : 'Enable Video';
    });
  }
}

// 设置数据通道
function setupDataChannel() {
  dataChannel.onopen = () => {
    console.log('Data channel opened');
  };
  
  dataChannel.onmessage = (event) => {
    addMessage('Remote', event.data);
  };
  
  dataChannel.onclose = () => {
    console.log('Data channel closed');
  };
  
  dataChannel.onerror = (error) => {
    console.error('Data channel error:', error);
  };
}

// 发送消息
function sendMessage() {
  const message = messageInput.value.trim();
  if (message && dataChannel && dataChannel.readyState === 'open') {
    dataChannel.send(message);
    addMessage('Local', message);
    messageInput.value = '';
  }
}

// 添加消息到聊天窗口
function addMessage(sender, text) {
  const messageDiv = document.createElement('div');
  messageDiv.className = 'message';
  messageDiv.innerHTML = `<strong>${sender}:</strong> ${text}`;
  messages.appendChild(messageDiv);
  messages.scrollTop = messages.scrollHeight;
}

// 初始化应用
initEventListeners();

7. WebRTC 的应用场景#

7.1 视频会议#

WebRTC 是视频会议应用的核心技术，支持多人视频通话、屏幕共享、实时聊天等功能。常见的应用包括 Zoom、Microsoft Teams、Google Meet 等。

7.2 在线教育#

WebRTC 为在线教育提供了实时互动能力，支持老师和学生之间的视频通话、屏幕共享、白板协作等功能。

7.3 游戏#

WebRTC 可以用于实时游戏，支持玩家之间的语音聊天、数据同步和实时对战。

7.4 远程医疗#

WebRTC 可以用于远程医疗咨询，支持医生和患者之间的视频通话、病历共享和实时诊断。

7.5 实时直播#

WebRTC 支持低延迟直播，适用于体育赛事、演唱会、新闻直播等场景。

7.6 客户支持#

WebRTC 可以用于实时客户支持，支持客服人员和用户之间的视频通话、屏幕共享和远程协助。

8. WebRTC 的挑战和解决方案#

8.1 网络问题#

  • 解决方案：使用自适应码率调整、丢包重传、FEC（前向纠错）等技术，优化网络不稳定情况下的传输质量。

8.2 安全性#

  • 解决方案：WebRTC 内置了加密机制，所有通信都经过加密。此外，还可以使用额外的安全措施，如身份验证、权限控制等。

8.3 跨浏览器兼容性#

  • 解决方案：使用 WebRTC 适配器（adapter.js）库，处理不同浏览器之间的兼容性问题。

8.4 扩展性#

  • 解决方案：对于多人通话，可以使用 SFU（Selective Forwarding Unit）或 MCU（Multipoint Control Unit）服务器来转发和处理媒体流。

9. WebRTC 的未来发展#

9.1 WebRTC 的新特性#

  • WebRTC Insertable Streams：允许开发者在媒体流传输过程中插入自定义处理逻辑，如滤镜、增强现实等。
  • WebRTC Screen Capture API：提供更强大的屏幕共享功能，支持选择特定窗口或应用程序。
  • WebRTC Encoded Transform：允许开发者直接操作编码后的媒体数据，实现更高效的处理。

9.2 发展趋势#

  • 与 AI 结合：使用 AI 技术优化音视频质量、实现实时翻译、智能降噪等功能。
  • 5G 支持：随着 5G 网络的普及，WebRTC 将能够提供更高质量、更低延迟的通信体验。
  • 边缘计算：将媒体处理逻辑部署到边缘服务器，减少延迟，提高传输效率。
  • 标准化推进：持续完善 WebRTC 标准，支持更多功能和场景。

10. 总结#

WebRTC 是一项革命性的实时通信技术，它为 Web 应用带来了强大的实时交互能力。通过简单的 API，开发者可以构建各种实时应用，如视频会议、在线教育、游戏、远程医疗等。

尽管 WebRTC 面临着网络、安全、兼容性等挑战，但随着技术的不断发展和标准化的推进，这些问题正在逐步解决。未来，WebRTC 将与 AI、5G、边缘计算等技术深度融合，为用户提供更加优质、高效的实时通信体验。

作为开发者，学习和掌握 WebRTC 技术将为你打开实时应用开发的大门，创造出更多创新的应用和服务。

11. 参考资料#

本文共 3595 字，上次修改于 Jan 24, 2026，以 CC 署名-非商业性使用-禁止演绎 4.0 国际 协议进行许可。

相关文章

» pm2 使用

» Prisma 和 Drizzle 对比

» Cookie 机制

» JWT 介绍和场景示例

» 零宽度空格与 CSS 换行行为