【高频考点精讲】WebRTC入门指南：如何实现浏览器端的实时音视频通信？

WebRTC入门指南：如何实现浏览器端的实时音视频通信？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 6 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

最近有个粉丝在后台问我：”老李啊，现在直播这么火，我想做个网页版的视频聊天功能，该从哪入手？” 这不巧了嘛，今天咱们就来聊聊WebRTC这个神器，让你轻松实现浏览器端的实时音视频通信。（全栈老李出品，转载请注明出处）

WebRTC是个啥？

简单来说，WebRTC就是浏览器自带的”视频通话SDK”。想象一下，你和你朋友各自打开浏览器，不用装任何插件，就能像微信视频那样直接通话——这就是WebRTC的魔力。它由Google开源，现在已经成为W3C标准，所有现代浏览器都支持。

WebRTC最厉害的地方在于：

真正实时：延迟可以做到几百毫秒
点对点传输：数据直接在两个浏览器间传输，不经过服务器中转
免插件：纯浏览器原生API实现

核心概念三件套

在动手写代码前，咱们得先搞明白WebRTC的三个核心概念：

MediaStream（媒体流）：代表音视频数据流，可以来自摄像头、麦克风或者屏幕共享
RTCPeerConnection（对等连接）：负责建立点对点连接，处理音视频传输
RTCDataChannel（数据通道）：除了音视频，还能传输任意二进制数据

实战：实现最简单的视频通话

下面咱们用不到50行代码实现一个基础版视频通话功能。注意看注释，都是干货！（全栈老李友情提示：生产环境请考虑错误处理和兼容性）

<!DOCTYPE html>
<html>
<head>
    <title>WebRTC简易视频通话 - 全栈老李</title>
</head>
<body>
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
    
    <button id="startBtn">开始通话</button>
    <button id="callBtn">呼叫对方</button>
    
    <script>
        // 获取本地媒体流 - 全栈老李提醒：记得处理用户拒绝权限的情况
        async function start() {
              
            const stream = await navigator.mediaDevices.getUserMedia({
              
                audio: true,
                video: true
            });
            document.getElementById('localVideo').srcObject = stream;
            return stream;
        }
        
        // 建立对等连接
        async function call() {
              
            const localStream = await start();
            const peerConnection = new RTCPeerConnection();
            
            // 添加本地流到连接中
            localStream.getTracks().forEach(track => {
              
                peerConnection.addTrack(track, localStream);
            });
            
            // 接收远程流
            peerConnection.ontrack = event => {
              
                document.getElementById('remoteVideo').srcObject = event.streams[0];
            };
            
            // 实际项目中这里需要信令服务器交换SDP和ICE候选
            // 全栈老李小技巧：可以用Socket.io或WebSocket实现信令交换
        }
        
        document.getElementById('startBtn').addEventListener('click', start);
        document.getElementById('callBtn').addEventListener('click', call);
    </script>
</body>
</html>

这段代码虽然简单，但已经包含了WebRTC的核心流程。在实际项目中，你还需要处理信令交换、NAT穿透、错误处理等问题。（全栈老李说：罗马不是一天建成的，咱们一步步来）

信令服务器：WebRTC的”红娘”

细心的同学可能发现了，上面的代码缺少关键一步——两个浏览器怎么知道对方的存在？这就是信令服务器的作用。

想象一下相亲场景：

男方（浏览器A）说：”我叫张三，身高180″
红娘（信令服务器）把信息传给女方（浏览器B）
女方回应：”我叫李四，喜欢旅游”
红娘再把信息传回男方

在WebRTC中，这个”自我介绍”就是SDP（会话描述协议），而”怎么找到对方”的信息就是ICE候选。下面是一个简化的信令流程：

sequenceDiagram
    participant A as 浏览器A
    participant S as 信令服务器
    participant B as 浏览器B
    
    A->>S: 发送offer SDP
    S->>B: 转发offer
    B->>S: 发送answer SDP
    S->>A: 转发answer
    A->>S: 发送ICE候选
    S->>B: 转发ICE
    B->>S: 发送ICE候选
    S->>A: 转发ICE

进阶技巧：STUN/TURN服务器

在理想情况下，两个浏览器可以直接连接。但现实是骨感的——NAT和防火墙会让设备”隐身”。这时就需要STUN/TURN服务器帮忙：

STUN服务器：就像问路人”我现在在哪？”，帮你发现自己的公网地址
TURN服务器：当直接连接失败时，充当数据中转站（会产生流量费用）

配置方法很简单：

const peerConnection = new RTCPeerConnection({
            
    iceServers: [
        {
             urls: "stun:stun.l.google.com:19302" },  // 免费STUN服务器
        {
             
            urls: "turn:your.turn.server",
            username: "user",
            credential: "pass"
        }
    ]
});