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

WebRTC 完整调用流程（前端纯 JS 实现，最简可运行）

news 2026/6/14 7:34:29

一、核心 API 简述

navigator.mediaDevices.getUserMedia：获取本地摄像头 / 麦克风媒体流
RTCPeerConnection：WebRTC 核心，建立 P2P 连接、传输音视频
SDP：会话描述协议（信令交换：Offer / Answer）
ICE：网络穿透，自动协商直连地址

WebRTC本身不含信令服务，需自行实现信令（WebSocket/Socket.IO 交换 SDP、ICE 候选）。

二、最简可运行 Demo（本地模拟双人通话，无后端）

该示例单页面模拟两端，不用后端，直接浏览器打开即可测试。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>WebRTC 本地调用演示</title> <style> video { width: 400px; border: 1px solid #ccc; } </style> </head> <body> <h3>本地视频</h3> <video id="localVideo" autoplay muted playsinline></video> <h3>远端视频</h3> <video id="remoteVideo" autoplay playsinline></video> <script> // 1. 获取 DOM const localVideo = document.getElementById('localVideo'); const remoteVideo = document.getElementById('remoteVideo'); // 配置：音视频轨道 + ICE 服务器（STUN 用于内网穿透） const pcConfig = { iceServers: [ { urls: 'stun:stun.l.google.com:19302' } ] }; let localStream; let pc1, pc2; // 模拟两个 Peer // 启动 start(); async function start() { try { // 步骤1：采集本地音视频流 localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); localVideo.srcObject = localStream; // 步骤2：创建两个 PeerConnection（模拟A、B两端） pc1 = new RTCPeerConnection(pcConfig); pc2 = new RTCPeerConnection(pcConfig); // 将本地流添加到 Peer localStream.getTracks().forEach(track => { pc1.addTrack(track, localStream); }); // 远端收到轨道，渲染视频 pc2.ontrack = e => { remoteVideo.srcObject = e.streams[0]; }; // ICE 候选互相交换（模拟信令转发） pc1.onicecandidate = e => e.candidate && pc2.addIceCandidate(e.candidate); pc2.onicecandidate = e => e.candidate && pc1.addIceCandidate(e.candidate); // 步骤3：创建 Offer const offer = await pc1.createOffer(); await pc1.setLocalDescription(offer); // 步骤4：B 端接收 Offer，创建 Answer await pc2.setRemoteDescription(offer); const answer = await pc2.createAnswer(); await pc2.setLocalDescription(answer); // 步骤5：A 端接收 Answer await pc1.setRemoteDescription(answer); } catch (err) { console.error('WebRTC 调用失败：', err); alert('请允许摄像头/麦克风权限，且使用 HTTPS / localhost'); } } </script> </body> </html>

运行要求

必须localhost/ HTTPS环境（浏览器安全策略，HTTP 公网无法调用摄像头）
浏览器授权摄像头、麦克风权限
现代浏览器（Chrome / Edge / Firefox）

三、标准 P2P 通话完整流程（真实线上架构）

整体链路

客户端A↔信令服务 (WebSocket/Socket.IO)↔客户端B↔ WebRTC P2P

3.1. 标准调用步骤（时序）

1，本地媒体采集

运行

const stream = await navigator.mediaDevices.getUserMedia({video:true,audio:true})

2，创建 RTCPeerConnection

3，本地轨道 addTrack 进 Peer

A 发起 Offer
- pc.createOffer()→setLocalDescription(offer)
- 通过信令把 Offer 发给 B
B 收到 Offer
- setRemoteDescription(offer)
- createAnswer()→setLocalDescription(answer)
- 通过信令把 Answer 发回 A
A 收到 Answer
- setRemoteDescription(answer)
ICE 候选交换（网络穿透）
- 两端onicecandidate拿到候选，通过信令互发
- 对方addIceCandidate
连接成功→ontrack收到远端流，播放

3.2. 纯客户端核心代码（分离两端）

发起方（A）

// 拿到本地流后 const pc = new RTCPeerConnection(pcConfig); localStream.getTracks().forEach(t => pc.addTrack(t, localStream)); // 收到远端流 pc.ontrack = e => remoteVideo.srcObject = e.streams[0]; // ICE 候选发送给对方 pc.onicecandidate = e => { if (e.candidate) socket.emit('ice', e.candidate); }; // 创建并发送 Offer const offer = await pc.createOffer(); await pc.setLocalDescription(offer); socket.emit('offer', offer); // 接收对方 Answer socket.on('answer', async answer => { await pc.setRemoteDescription(answer); }); // 接收对方 ICE 候选 socket.on('ice', candidate => { pc.addIceCandidate(candidate); });

接收方（B）

const pc = new RTCPeerConnection(pcConfig); localStream.getTracks().forEach(t => pc.addTrack(t, localStream)); pc.ontrack = e => remoteVideo.srcObject = e.streams[0]; pc.onicecandidate = e => e.candidate && socket.emit('ice', e.candidate); // 接收 Offer socket.on('offer', async offer => { await pc.setRemoteDescription(offer); const answer = await pc.createAnswer(); await pc.setLocalDescription(answer); socket.emit('answer', answer); }); // 接收 ICE socket.on('ice', candidate => pc.addIceCandidate(candidate));

四、常用配置 & 功能扩展

1. 只开音频 / 只开视频

运行

// 仅语音 navigator.mediaDevices.getUserMedia({ audio: true, video: false }) // 仅画面 navigator.mediaDevices.getUserMedia({ audio: false, video: true })

2. 关闭音视频轨道（静音 / 关摄像头）

运行

// 关闭摄像头 localStream.getVideoTracks()[0].enabled = false; // 静音 localStream.getAudioTracks()[0].enabled = false;

3. 挂断通话

运行

// 停止媒体流 localStream.getTracks().forEach(track => track.stop()); // 关闭连接 pc.close();

4. 多路流 / 屏幕共享

屏幕共享 API：

运行

const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });

五、常见报错 & 排查

NotAllowedError
- 原因：未授权权限 / 非localhost/HTTPS
- 解决：本地用 localhost，线上部署 HTTPS
RTCPeerConnection不存在
- 原因：浏览器过低 / 禁用 WebRTC
- 解决：升级 Chrome/Edge
能发信令但看不到画面
- 大概率ICE/STUN 穿透失败，更换可用 STUN/TURN 服务器