全栈杂谈第20期：初识WebRTC

Huooya
242 阅读5分钟

WebRTC（Web Real-Time Communication）是一种开源技术，它使得网页和移动应用能够通过简单的JavaScript API进行实时的语音、视频和数据通信，而无需依赖插件或其他第三方应用。它通过在浏览器中直接实现媒体流（音视频流）的传输，彻底改变了Web应用的交互方式，尤其是在视频会议、文件共享、实时语音通话等场景中。

WebRTC的本质

WebRTC的核心目标是实现浏览器之间无需中介服务器即可进行实时通信。具体来说，它提供了以下几个关键组件：

  1. 媒体捕获与处理：
    • getUserMedia：用于获取本地设备（如麦克风、摄像头）的音视频流。
    • MediaStream：表示音视频流，可以用于播放媒体或传输。
    • MediaRecorder：用于录制音视频流。
  2. 数据通道（DataChannel）：
    • WebRTC提供了一个RTCPeerConnection的接口，可以让两个端点通过DataChannel直接传输任意类型的数据。这个功能非常适合传输实时文本、文件等数据。
  3. 点对点连接（Peer-to-Peer）：
    • 通过RTCPeerConnection接口，WebRTC使得浏览器能够直接建立P2P连接。数据在两个设备之间直接交换，不需要经过服务器中转（虽然在连接的建立过程中，服务器是必要的）。为了保证连接的成功，WebRTC利用了STUN（Session Traversal Utilities for NAT）和TURN（Traversal Using Relays around NAT）协议。
  4. 信令（Signaling）：
    • WebRTC并不直接处理信令，而是留给应用来实现。这意味着它没有固定的信令协议，通常可以使用WebSocket、HTTP等协议进行交换通信所需的信息，如SDP（Session Description Protocol）和ICE候选。
  5. 网络穿透：
    • WebRTC利用ICE（Interactive Connectivity Establishment）协议来克服NAT（Network Address Translation）和防火墙的障碍，允许设备在不同网络环境下互通。

WebRTC相关源码解析

WebRTC的实现通常是跨平台的，其源码的核心部分可以通过以下几个模块来理解：

  1. libjingle：Google为WebRTC开发的库，包含了对P2P连接、音视频流、信令等的实现。
  2. peerconnection：WebRTC的核心类之一，负责处理Peer-to-Peer的连接、媒体流的处理、ICE连接的建立等。
  3. media_engine：包含了音视频处理的模块，支持音视频编解码、音视频流的捕获与播放等。

peerconnection的实现

RTCPeerConnection类是WebRTC中最重要的类之一，它用于在两个客户端之间建立媒体通道。它的功能包括：

  • 建立连接：通过交换SDP信息、候选地址等来建立P2P连接。
  • 媒体流传输：支持传输音频、视频流，并在连接建立后处理流的编解码、发送和接收。
  • ICE连接管理：通过ICE协议在两个端点之间选择最优的网络路径进行连接。

主要的API接口

let peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('icecandidate', event => {
  // 处理ICE候选
});

peerConnection.addEventListener('track', event => {
  // 接收对方的音视频流
});

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

信令过程

WebRTC中信令过程并没有固定的实现方式，通常开发者需要实现自己的信令系统，最常见的是通过WebSocket来实现信令的交换。信令过程的步骤一般如下：

  1. 客户端1创建Offer：客户端1调用createOffer()生成一个SDP请求，并将其通过信令服务器发送给客户端2。
  2. 客户端2回应Answer：客户端2收到Offer后，创建一个Answer并返回。
  3. ICE候选交换：双方交换ICE候选（网络连接候选），每个端点都会监听icecandidate事件并发送自己的候选信息。

ICE、STUN和TURN

ICE（Interactive Connectivity Establishment）是WebRTC建立P2P连接的核心，它解决了NAT穿透的问题。STUN（Session Traversal Utilities for NAT）和TURN（Traversal Using Relays around NAT）是ICE的一部分，分别用于发现公网IP地址和使用中继服务器进行数据转发。

  • STUN：用于NAT穿透，帮助客户端发现其公网IP。
  • TURN：当P2P连接无法建立时，通过TURN服务器转发数据。

媒体流的编解码

WebRTC支持多种音视频编解码器，包括VP8、VP9、H.264、Opus等。它使用WebRTC媒体引擎来处理音视频流的捕获、编解码、渲染等操作。

WebRTC源码中的关键点

WebRTC的源码包含大量的低层实现，理解其核心流程可以从以下几个方面入手：

  1. 连接建立：
    • RTCPeerConnection中的createOffer和setLocalDescription等方法实际上涉及到了SDP的创建与解析，代码中的SDP信息通过会话描述协议来定义。
    • ICE候选的交换通过监听icecandidate事件，并通过信令服务器转发给对方。
  2. 媒体流传输：
    • WebRTC处理音视频流的核心在于MediaEngine，它负责通过不同的编解码器（如Opus和VP8）来处理音视频数据，并在网络条件变化时调整编码参数。
    • 通过getUserMedia获取的本地流会被传递给RTCPeerConnection，并通过网络传输给远程端点。
  3. 错误处理与重试机制：
    • 在复杂的网络环境中，连接的建立可能遇到很多问题，WebRTC通过ICE、STUN、TURN协议来提供多种网络路径，以确保连接能够尽可能地建立。

总结

WebRTC 是一种革命性的技术，旨在简化浏览器之间的实时通信。它的本质是提供一种无需中介服务器、基于点对点连接的音视频通话和数据交换方式。通过简单的JavaScript API，WebRTC让开发者可以轻松实现实时音视频通话、文件共享、实时数据传输等功能，极大地降低了开发复杂度。

WebRTC的核心组件包括媒体流处理、数据通道、P2P连接、以及用于网络穿透的ICE/STUN/TURN协议。它的关键优势在于能够直接通过浏览器进行通信，免去了传统通信方式中插件、服务器的依赖。

欢迎关注公众号：“全栈开发指南针” 这里是技术潮流的风向标，也是你代码旅程的导航仪！🚀 Let’s code and have fun! 🎉

avatar
文章
阅读
粉丝