极简 WebRTC 入门（非文档版，简洁易懂）

对于前端开发者来说，想要实现网页端实时音视频通信，WebRTC 绝对是绕不开的技术。它不用插件、原生支持，能快速实现点对点通信，今天就用最简单的方式，带你入门，附带实用代码实例，上手更轻松。

一、什么是 WebRTC

WebRTC（Web Real-Time Communication），简单说就是浏览器原生支持的实时通信技术，由谷歌开源、W3C 标准化，主流浏览器（Chrome、Edge、Safari 等）都能直接用，不用装任何插件，核心是实现网页端点对点（P2P）的音视频、数据传输。

二、WebRTC 能做什么

全是需要 "实时互动" 的场景，比如：网页端视频 / 语音通话、直播连麦、屏幕共享、在线教育、P2P 文件传输，不用服务器中转，效率更高。

三、核心 API 简单介绍（附代码实例）

WebRTC 核心就 3 个 JS API，不用死记，会用简单代码就行：

getUserMedia（访问设备）：调用摄像头、麦克风，获取音视频流

javascript 复制代码

// 调用摄像头、麦克风，获取音视频流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // 将流渲染到页面视频标签
    const localVideo = document.getElementById('localVideo');
    localVideo.srcObject = stream;
  })
  .catch(err => console.error('无法访问设备：', err));

RTCPeerConnection（核心连接）：建立 P2P 连接，处理音视频传输

javascript 复制代码

// 初始化连接，使用谷歌公共 STUN 服务器（无需自己部署）
const peerConnection = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
// 添加本地流到连接
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

RTCDataChannel（传输数据）：通过 P2P 传文字、文件等普通数据

javascript 复制代码

// 创建数据通道，发送/接收消息
const dataChannel = peerConnection.createDataChannel('chat');
dataChannel.onopen = () => dataChannel.send('连接成功！');
dataChannel.onmessage = (event) => console.log('收到消息：', event.data);

四、WebRTC 工作流程（极简版 + 代码）

核心 4 步，结合代码更易理解：

采集：用 getUserMedia 获取本地音视频流（代码如上）；
信令：用 WebSocket 交换双方信息（简易客户端）

javascript 复制代码

// 连接信令服务器，发送/接收信息
const ws = new WebSocket('ws://localhost:8080');
ws.send(JSON.stringify({ type: 'offer', sdp: offerSdp }));
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 处理对方的 SDP 和 ICE 信息
  if (data.type === 'answer') peerConnection.setRemoteDescription(new RTCSessionDescription(data));
  if (data.candidate) peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
};

连接：用 RTCPeerConnection 建立 P2P 连接（代码如上）；
通信：接收远端流，渲染到页面

javascript 复制代码

// 监听远端流，渲染到页面
peerConnection.ontrack = (event) => {
  const remoteVideo = document.getElementById('remoteVideo');
  remoteVideo.srcObject = event.streams[0];
};

五、必备组件：WebSocket、STUN/TURN

WebRTC 不能单打独斗，必须配合这两个组件：

WebSocket：实现信令交换（简易 Node.js 服务器，用 ws 库）

javascript 复制代码

// 安装依赖：npm install ws
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 转发双方信息（简易版）
wss.on('connection', (ws) => {
  ws.on('message', (data) => {
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) client.send(data);
    });
  });
});

STUN/TURN 服务器：解决内网穿透，上文代码已用谷歌公共 STUN 服务器，无需自己部署；TURN 用于直连失败时中转。

六、优缺点 & 适用场景

优点：浏览器原生支持、无需插件 < 100ms）、开源免费、跨平台；
缺点：信令系统需自行开发、依赖 STUN/TURN 服务器、音视频质量受网络影响；
适用场景：中小型实时互动（在线客服、一对一聊天、小型会议、直播连麦），大型场景需配合 SFU 服务器。