WebRTC指南

戒不掉你的傻笑づ692

1123人浏览 · 2026-04-23 13:15:00

戒不掉你的傻笑づ692 · 2026-04-23 13:15:00 发布

WebRTC 完全指南：原理、教程与应用场景

什么是 WebRTC

WebRTC (Web Real-Time Communication) 是一个开源项目，它为浏览器和移动应用程序提供实时通信（RTC）能力，通过简单的 API 即可实现音频、视频和数据在浏览器之间的点对点（P2P）传输。

WebRTC 由 Google 于 2011 年发起，现已成为 W3C 和 IETF 的标准，被所有主流浏览器支持，包括 Chrome、Firefox、Safari 和 Edge。

WebRTC 的主要特性

实时通信：低延迟的音视频传输
点对点连接：直接在浏览器之间建立连接，无需中间服务器中转媒体流
跨平台：支持 Web、iOS、Android 等多种平台
无需插件：原生浏览器支持，无需安装任何插件
安全性：强制使用加密传输
免费开源：完全免费的开源技术

为什么需要 WebRTC

传统通信方式的局限性

在 WebRTC 出现之前，实现浏览器间的实时通信面临诸多挑战：

依赖插件：需要安装 Flash、Silverlight 等插件
延迟高：传统 HTTP 请求-响应模型不适合实时通信
服务器负载大：所有媒体流都需要通过服务器中转
NAT 穿透困难：不同网络环境下的设备难以直接通信
安全风险：缺乏统一的安全标准

WebRTC 的优势

降低延迟：点对点直接传输，延迟可低至几十毫秒
节省带宽：媒体流不需要经过服务器，大幅降低带宽成本
更好的用户体验：无需安装插件，打开浏览器即可使用
安全性保障：强制使用 DTLS 和 SRTP 加密
跨平台兼容：统一的标准，各平台实现一致

典型场景对比

场景	传统方案	WebRTC 方案
视频会议	需要下载客户端	浏览器直接访问
在线教育	插件兼容性问题	跨平台统一体验
客服系统	高昂的服务器成本	P2P 降低成本
游戏直播	延迟较高	低延迟互动

WebRTC 的核心概念

1. 媒体流 (MediaStream)

MediaStream 表示媒体内容的流，包含音频轨道和视频轨道。

// 获取用户媒体流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // 使用媒体流
  })
  .catch(error => {
    console.error('获取媒体流失败:', error);
  });

2. RTCPeerConnection

RTCPeerConnection 是 WebRTC 的核心 API，用于处理点对点连接。

const peerConnection = new RTCPeerConnection(configuration);

3. 信令 (Signaling)

信令是建立 WebRTC 连接的过程，包括：

交换会话描述协议 (SDP)
交换网络候选者 (ICE candidates)

4. ICE (Interactive Connectivity Establishment)

ICE 是一种框架，用于找到最佳的连接路径，包括：

主机候选者：本地 IP 地址
反射候选者：通过 STUN 服务器获取的公网 IP
中继候选者：通过 TURN 服务器中转的地址

5. STUN 和 TURN 服务器

STUN (Session Traversal Utilities for NAT)：帮助设备发现其公网地址
TURN (Traversal Using Relays around NAT)：在直接连接失败时提供中继服务

WebRTC 应用场景

1. 视频会议

场景描述：多人实时视频会议，支持屏幕共享、白板协作等功能。

技术要点：

SFU (Selective Forwarding Unit) 架构处理多路媒体流
自适应码率调整网络状况
丢包恢复和错误隐藏技术

2. 在线教育

场景描述：远程教学、互动课堂、在线辅导。

技术要点：

低延迟音视频传输
屏幕共享和文档标注
实时聊天和互动工具

3. 客服系统

场景描述：网站集成视频客服，提供面对面服务。

技术要点：

快速建立连接
与 CRM 系统集成
录制和质检功能

4. 游戏直播

场景描述：实时游戏画面分享，观众互动。

技术要点：

低延迟传输
高质量视频编码
多路流混合

5. 物联网 (IoT)

场景描述：远程监控设备、实时数据传输。

技术要点：

数据通道传输传感器数据
低功耗实现
设备间直接通信

6. 文件共享

场景描述：点对点文件传输，无需服务器中转。

技术要点：

使用数据通道传输文件
断点续传
传输进度显示

WebRTC 教程与代码实现

基础示例：获取本地媒体流

<!DOCTYPE html>
<html>
<head>
  <title>WebRTC 基础示例</title>
</head>
<body>
  <h1>获取本地媒体流</h1>
  <video id="localVideo" autoplay playsinline></video>

  <script>
    const localVideo = document.getElementById('localVideo');

    async function startLocalStream() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        });
        localVideo.srcObject = stream;
      } catch (error) {
        console.error('获取媒体流失败:', error);
      }
    }

    startLocalStream();
  </script>
</body>
</html>

进阶示例：点对点视频通话

HTML 结构

<!DOCTYPE html>
<html>
<head>
  <title>WebRTC 视频通话</title>
  <style>
    .video-container {
      display: flex;
      gap: 20px;
    }
    video {
      width: 400px;
      height: 300px;
    }
  </style>
</head>
<body>
  <h1>WebRTC 视频通话</h1>

  <div class="video-container">
    <div>
      <h2>本地视频</h2>
      <video id="localVideo" autoplay playsinline></video>
    </div>
    <div>
      <h2>远程视频</h2>
      <video id="remoteVideo" autoplay playsinline></video>
    </div>
  </div>

  <div>
    <button id="callButton">发起通话</button>
    <button id="hangupButton">挂断</button>
  </div>

  <script src="webrtc.js"></script>
</body>
</html>

JavaScript 实现 (webrtc.js)

// WebRTC 配置
const configuration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun1.l.google.com:19302' }
  ]
};

// DOM 元素
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
const callButton = document.getElementById('callButton');
const hangupButton = document.getElementById('hangupButton');

// WebRTC 变量
let localStream;
let remoteStream;
let peerConnection;

// 创建 RTCPeerConnection
function createPeerConnection() {
  peerConnection = new RTCPeerConnection(configuration);

  // 添加本地流到连接
  localStream.getTracks().forEach(track => {
    peerConnection.addTrack(track, localStream);
  });

  // 监听远程流
  peerConnection.ontrack = (event) => {
    remoteVideo.srcObject = event.streams[0];
  };

  // 监听 ICE 候选者
  peerConnection.onicecandidate = (event) => {
    if (event.candidate) {
      // 在实际应用中，这里需要将 candidate 发送给对方
      console.log('ICE candidate:', event.candidate);
    }
  };

  // 监听连接状态变化
  peerConnection.onconnectionstatechange = () => {
    console.log('连接状态:', peerConnection.connectionState);
  };
}

// 发起通话
async function startCall() {
  try {
    // 获取本地媒体流
    localStream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    localVideo.srcObject = localStream;

    // 创建 PeerConnection
    createPeerConnection();

    // 创建 Offer
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);

    // 在实际应用中，这里需要将 offer 发送给对方
    console.log('Offer:', offer);

  } catch (error) {
    console.error('发起通话失败:', error);
  }
}

// 挂断通话
function hangup() {
  if (peerConnection) {
    peerConnection.close();
    peerConnection = null;
  }

  if (localStream) {
    localStream.getTracks().forEach(track => track.stop());
    localStream = null;
  }

  localVideo.srcObject = null;
  remoteVideo.srcObject = null;
}

// 事件监听
callButton.addEventListener('click', startCall);
hangupButton.addEventListener('click', hangup);

完整示例：带信令服务的视频通话

服务端代码 (Node.js + Socket.io)

// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('用户连接:', socket.id);

  // 加入房间
  socket.on('join', (roomId) => {
    socket.join(roomId);
    socket.to(roomId).emit('user-joined', socket.id);
  });

  // 信令消息转发
  socket.on('offer', (data) => {
    socket.to(data.roomId).emit('offer', {
      offer: data.offer,
      senderId: socket.id
    });
  });

  socket.on('answer', (data) => {
    socket.to(data.roomId).emit('answer', {
      answer: data.answer,
      senderId: socket.id
    });
  });

  socket.on('ice-candidate', (data) => {
    socket.to(data.roomId).emit('ice-candidate', {
      candidate: data.candidate,
      senderId: socket.id
    });
  });

  socket.on('disconnect', () => {
    console.log('用户断开连接:', socket.id);
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

客户端代码

// client.js
const socket = io();
const configuration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' }
  ]
};

let localStream;
let peerConnection;
const roomId = 'room-123'; // 可以动态生成

// 获取本地媒体流
async function getLocalStream() {
  try {
    localStream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    document.getElementById('localVideo').srcObject = localStream;
    return localStream;
  } catch (error) {
    console.error('获取媒体流失败:', error);
  }
}

// 创建 PeerConnection
function createPeerConnection() {
  peerConnection = new RTCPeerConnection(configuration);

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

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

  // 监听 ICE 候选者
  peerConnection.onicecandidate = (event) => {
    if (event.candidate) {
      socket.emit('ice-candidate', {
        candidate: event.candidate,
        roomId: roomId
      });
    }
  };

  return peerConnection;
}

// 发起通话
async function startCall() {
  await getLocalStream();
  createPeerConnection();

  const offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offer);

  socket.emit('offer', {
    offer: offer,
    roomId: roomId
  });
}

// 处理 Offer
socket.on('offer', async (data) => {
  if (!peerConnection) {
    await getLocalStream();
    createPeerConnection();
  }

  await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer));

  const answer = await peerConnection.createAnswer();
  await peerConnection.setLocalDescription(answer);

  socket.emit('answer', {
    answer: answer,
    roomId: roomId
  });
});

// 处理 Answer
socket.on('answer', async (data) => {
  await peerConnection.setRemoteDescription(new RTCSessionDescription(data.answer));
});

// 处理 ICE 候选者
socket.on('ice-candidate', async (data) => {
  if (peerConnection) {
    try {
      await peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
    } catch (error) {
      console.error('添加 ICE 候选者失败:', error);
    }
  }
});

// 加入房间
socket.emit('join', roomId);

// 绑定按钮事件
document.getElementById('callButton').addEventListener('click', startCall);

最佳实践与注意事项

1. 错误处理

try {
  const stream = await navigator.mediaDevices.getUserMedia(constraints);
} catch (error) {
  if (error.name === 'NotAllowedError') {
    console.error('用户拒绝了媒体权限');
  } else if (error.name === 'NotFoundError') {
    console.error('未找到媒体设备');
  } else {
    console.error('获取媒体流失败:', error);
  }
}

2. 网络适应

// 监听网络状态
peerConnection.onconnectionstatechange = () => {
  switch (peerConnection.connectionState) {
    case 'connected':
      console.log('连接已建立');
      break;
    case 'disconnected':
      console.log('连接已断开');
      break;
    case 'failed':
      console.log('连接失败');
      break;
    case 'closed':
      console.log('连接已关闭');
      break;
  }
};

// 监听 ICE 连接状态
peerConnection.oniceconnectionstatechange = () => {
  switch (peerConnection.iceConnectionState) {
    case 'connected':
    case 'completed':
      console.log('ICE 连接成功');
      break;
    case 'disconnected':
      console.log('ICE 连接断开');
      break;
    case 'failed':
      console.log('ICE 连接失败');
      break;
  }
};

3. 性能优化

使用合适的视频分辨率和帧率
实现自适应码率
优化编解码器选择
使用硬件加速

4. 安全考虑

使用 HTTPS
验证用户身份
实现访问控制
记录和审计日志

5. 兼容性处理

// 检查浏览器支持
function isWebRTCSupported() {
  return !!(
    navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia &&
    window.RTCPeerConnection
  );
}

if (!isWebRTCSupported()) {
  alert('您的浏览器不支持 WebRTC，请使用最新版本的 Chrome、Firefox 或 Safari');
}