【一文读懂】WebRTC协议

WebRTC（Web Real-Time Communication）协议

WebRTC（Web Real-Time Communication）是一种支持浏览器和移动应用程序之间进行 实时音频、视频和数据通信 的协议。它使得开发者能够在浏览器中实现高质量的 P2P（点对点）实时通信，而无需安装插件或第三方软件。WebRTC 主要用于视频通话、语音聊天、在线协作和数据传输等应用场景。

核心功能

WebRTC 提供了以下几个关键功能：

1. 音视频通信：WebRTC 支持通过浏览器进行音频和视频的实时传输，用户之间可以进行高质量的语音和视频通话。
2. P2P 数据传输：WebRTC 不仅支持音视频流，还支持点对点的数据通道（Data Channel）传输，适合进行文件传输、屏幕共享和实时协作。
3. 低延迟：WebRTC 专门优化了数据传输过程，以减少通信中的延迟，使得实时通信更加顺畅。

工作原理

WebRTC 使用了一系列底层协议和技术来实现点对点通信。WebRTC 的工作流程通常包括以下几个关键步骤：

1. 建立连接（Signaling）
   • 在 WebRTC 中，信令（Signaling） 是客户端用于交换通信所需的元数据（如网络信息、音视频编解码信息、媒体能力等）的一种过程。信令不是 WebRTC 协议的一部分，但它是 WebRTC 通信的必要步骤。
   • 信令的内容包括：协商媒体（音视频）格式、网络路径、设备信息等。
   • 通常，信令使用 WebSockets、HTTP 或其他协议进行实现。
   • 信令过程包括：
     • Offer（提议）：发起方创建会话请求，发送给接收方。
     • Answer（应答）：接收方回应发起方的请求，确认会话设置。
     • ICE candidates（ICE 候选者）：每个端点通过收集网络候选地址来交换，以帮助建立最佳的 P2P 连接。
2. 网络连接（ICE、STUN 和 TURN）
   • ICE（Interactive Connectivity Establishment）：用于在 NAT 后的网络环境中建立端到端的连接。ICE 是 WebRTC 连接的关键组成部分，它帮助客户端发现并连接到彼此。
   • STUN（Session Traversal Utilities for NAT）：STUN 服务器帮助客户端了解自己在 NAT 后的公网 IP 地址。
   • TURN（Traversal Using Relays around NAT）：TURN 服务器在 P2P 连接无法直接建立时提供数据转发服务，确保通信的可靠性。TURN 作为最后的解决方案，通常会导致更高的延迟，因此只有在需要时才使用。
3. 媒体流传输（RTP/RTCP）
   • RTP（Real-Time Transport Protocol）：RTP 是 WebRTC 用于音频和视频流的传输协议。它允许在网络中实时地传输数据包，并为这些数据包添加时间戳，确保音视频数据的正确顺序。
   • RTCP（Real-Time Control Protocol）：RTCP 用于监控 RTP 会话的质量，并提供流控制和同步。
4. 数据传输（DataChannel）
   • RTCDataChannel：WebRTC 支持数据通道（DataChannel），使得浏览器间可以通过 P2P 传输任意数据（包括文本、文件、图像等）。数据通道提供了低延迟的点对点数据传输能力，常用于文件传输、屏幕共享等应用。

关键技术

WebRTC 由多种技术组成，其中最重要的包括：

1. getUserMedia：用于获取用户的音频和视频输入设备（如麦克风和摄像头）的权限。它会返回一个包含音视频流的对象。

   navigator.mediaDevices.getUserMedia({
         video: true, audio: true })
       .then(stream => {
        
           // 显示视频流
           const videoElement = document.getElementById('my-video');
           videoElement.srcObject = stream;
       })
       .catch(error => console.log('Error accessing media devices: ', error));
   

2. RTCPeerConnection：用于建立、维护和管理 P2P 连接。它负责处理网络连接、音视频编解码、带宽管理等任务。

   const peerConnection = new RTCPeerConnection(configuration);
   peerConnection.addStream(localStream); // 添加本地音视频流
   
   // 建立连接后，发送媒体流
   peerConnection.createOffer()
       .then(offer => peerConnection.setLocalDescription(offer))
       .then(() => {
        
           // 将 offer 发送给接收方
       });
   

3. RTCDataChannel：用于建立点对点的数据传输通道，可以传输任意类型的数据。

   javascript复制编辑const dataChannel = peerConnection.createDataChannel('chat');
   dataChannel.onopen = () => console.log('Data channel open');
   dataChannel.onmessage = (event) => console.log('Received message: ', event.data);
   
   // 发送数据
   dataChannel.send('Hello, WebRTC!');
   

应用场景

1. 视频通话：WebRTC 可以用于构建视频会议应用，如 Zoom、Google Meet 等。
2. 语音通话：WebRTC 支持语音通话，广泛应用于 IP 电话、语音助手等。
3. 文件传输：通过 RTCDataChannel，WebRTC 可以用于点对点的文件传输。
4. 实时协作：WebRTC 用于多人在线编辑、白板共享等实时协作工具。
5. 直播：WebRTC 可以支持低延迟的视频直播，适用于游戏直播、网络教学等领域。

实现过程

1. 获取音视频流（getUserMedia）

getUserMedia 是 WebRTC 中用于访问用户音频和视频设备的 API。通过它，你可以获取麦克风和摄像头的权限，从而获取用户的音视频流。

示例：获取视频和音频流

navigator.mediaDevices.getUserMedia({
    video: true, audio: true })
    .then(stream => {
   
        // 获取视频流后，可以将其显示在视频标签上
        const videoElement = document.getElementById('localVideo');
        videoElement.srcObject = stream;

        // 创建 RTCPeerConnection 实例（将在后面讨论）
        const peerConnection = new RTCPeerConnection();
        // 将本地流添加到连接
        stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
    })
    .catch(error => {
   
        console.error('Error accessing media devices.', error);
    });

• getUserMedia：请求用户设备的音视频流。
• 返回的 MediaStream 可以用于显示、录制或传输。

2. 创建点对点连接（RTCPeerConnection）

WebRTC 使用 RTCPeerConnection 来管理媒体流的传输。它代表了与另一个客户端的点对点连接。

示例：创建 RTCPeerConnection 并添加本地流

const peerConnection = new RTCPeerConnection({
   
    iceServers: [
        {
    urls: 'stun:stun.l.google.com:19302' } // 使用 STUN 服务器
    ]
});

// 添加本地流到连接
navigator.mediaDevices.getUserMedia({
    video: true, audio: true })
    .then(stream => {
   
        const localVideo = document.getElementById('localVideo');
        localVideo.srcObject = stream;
        stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
    });

• STUN 服务器：STUN（Session Traversal Utilities for NAT）帮助客户端发现自己的公共 IP 地址，用于 NAT 穿透。

3. 信令交换（Signal）

WebRTC 协议并不直接定义信令交换的方式，因此你需要自己实现信令交换。信令过程用于交换连接的元数据，如会话描述（SDP）和 ICE 候选者等。

1. 创建 Offer（发起方）

peerConnection.createOffer()
    .then(offer => {
   
        return peerConnection.setLocalDescription(offer);  // 设置本地 SDP
    })
    .then(() => {
   
        // 将 offer 发送给对方（通过信令服务器）
        signalingServer.send({
    type: 'offer', offer: peerConnection.localDescription });
    });

• SDP（Session Description Protocol）：描述了音视频流的编码、传输等信息。

2. 设置 Answer（接收方）

接收方收到 Offer 后，创建 Answer 并回复：

signalingServer.on('offer', offer => {
   
    peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
        .then(() => peerConnection.createAnswer())
        .then(answer => {
   
            return peerConnection.setLocalDescription(answer);  // 设置本地 SDP
        })
        .then(() => {
   
            // 将 answer 发送给发起方
            signalingServer.send({
    type: 'answer', answer: peerConnection.localDescription });
        });
});

3. 交换 ICE 候选者

在连接过程中，客户端会收集并交换 ICE 候选者（候选网络路径）。这些候选者用于寻找最佳的连接路径。

peerConnection.