WebRTC 入门：带有示例代码的实用指南

67 2个月前

WebRTC 入门：带有示例代码的实用指南 WebRTC（Web 实时通信）是一项强大的技术，可直接在 Web 浏览器和移动应用程序之间实现实时音频、视频和数据共享。无论您是在构建视频会议应用程序、直播平台还是交互式 Web 应用程序，WebRTC 都已成为通信领域的变革者。

在本博客中，我们将从头开始学习 WebRTC，探索其核心概念，了解其架构，并深入研究一些实际的编码示例。最后，您将掌握构建自己的 WebRTC 应用程序的基础知识。

1. 了解 WebRTC 的基础知识

1.1 什么是 WebRTC？

WebRTC（Web 实时通信）是一组开源技术，可实现 Web 浏览器和移动应用程序之间通过互联网直接进行实时通信。它允许点对点音频、视频和数据共享，而无需任何插件或其他软件。WebRTC 广泛用于构建视频会议、语音通话、直播、在线游戏等应用程序。
WebRTC 入门：带有示例代码的实用指南 WebRTC 点对点连接

1.2 WebRTC 的工作原理

媒体捕获：WebRTC 允许网络浏览器和移动应用程序访问用户的媒体设备（例如摄像头和麦克风），以捕获音频和视频流。
信令：在两个对等体可以通信之前，它们需要建立连接。信令过程涉及在对等体之间交换元数据和控制消息，以协商会话设置并处理网络细节。
对等连接：信令过程完成后，两个设备之间就会建立直接的对等连接。WebRTC 使用安全高效的对等连接协议在它们之间传输音频、视频和数据流。
编解码器和加密：WebRTC 支持多种音频和视频编解码器，可高效编码和传输媒体流。此外，它还采用加密技术来保护对等端之间的通信，确保隐私和数据完整性。
NAT 和防火墙穿越：WebRTC 旨在跨不同网络工作并处理网络地址转换器 (NAT) 和防火墙。它使用交互式连接建立 (ICE) 等技术来发现和建立直接通信路径。
数据通道：除了音频和视频流之外，WebRTC 还包括数据通道，允许对等方直接交换非媒体数据，实现实时数据共享。

WebRTC 受到主流网络浏览器的支持，包括 Google Chrome、Mozilla Firefox、Safari 和 Microsoft Edge。WebRTC 之所以受到广泛采用，是因为其开源特性、易于实现，并且无需第三方插件即可构建无缝实时通信应用程序。

2. 了解必要的 WebRTC API

要使用 WebRTC（Web 实时通信），您需要熟悉促进 Web 浏览器之间实时通信所需的 API 和库。WebRTC 可直接在 Web 应用程序内实现点对点音频、视频和数据流传输，使其成为构建视频会议、语音通话和其他实时通信功能的理想选择。以下是您应该了解的基本组件：

2.1 getUserMedia API（获取用户媒体）

该API可以访问用户的媒体设备（摄像头和麦克风），并提供可与RTCPeerConnection一起使用的MediaStream对象。

2.2 RTCPeerConnection API

该 API 是 WebRTC 的核心，负责建立和管理浏览器之间的点对点连接。它处理 ICE（交互式连接建立）协商、NAT 遍历和媒体流传输。

2.3 RTCDataChannel API

此 API 提供无需服务器的点对点数据通信功能。它可用于在对等点之间发送任意数据。

2.4 Signaling（信令）

WebRTC 需要在建立直接连接之前通过信令在对等端之间交换连接详细信息。此过程不是由 WebRTC 标准定义的，需要单独的信令机制，例如 WebSocket 或服务器端应用程序。

2.5 其他 WebRTC API

MediaStream：允许访问来自用户媒体设备（如摄像头和麦克风）的音频和视频流。
RTCIceCandidate：表示 ICE 候选，在对等连接建立期间使用。
RTCSessionDescription：表示建立连接的会话描述。

3. 什么是 STUN、TURN 和 ICE？

WebRTC 入门：带有示例代码的实用指南 ICE, STUN and TURN

ICE（交互式连接建立）、STUN（NAT 会话遍历实用程序）和 TURN（使用中继绕过 NAT 进行遍历）是 WebRTC 框架的重要组成部分，可实现互联网上的实时通信。它们用于在客户端之间建立点对点连接，即使它们位于防火墙或网络地址转换 (NAT) 设备后面。

ICE（交互式连接建立） ICE 是一种结合 STUN 和 TURN 服务器的技术，用于发现并建立 WebRTC 客户端之间的最佳连接路径，即使在具有挑战性的网络环境中也能实现实时通信。

STUN（NAT 的会话遍历实用程序） STUN 是一种用于发现客户端所处公共 IP 地址和端口的协议。ICE 是一种结合 STUN 和 TURN 服务器的技术，用于发现并建立 WebRTC 客户端之间的最佳连接路径，即使在具有挑战性的网络环境中也能实现实时通信。

TURN（使用中继绕过 NAT）当由于网络配置受限而无法建立直接对等连接时，TURN 服务器可充当中介。它们在客户端之间中继媒体流，确保可靠的通信。

4. 设置开发环境

4.1 让我们用 React 创建一个简单的网页

首先，确保你的机器上安装了 Node.js。然后，打开终端或命令提示符并运行以下命令来创建一个新的 React 应用程序：

npx create-react-app simple-webrtc

接下来，导航到项目目录并启动 Web 服务器

cd simple-webrtc npm start

然后，在代码编辑器中打开该项目。您会在文件夹中找到主要代码文件src。您可以编辑App.js以修改网页内容。

import React from 'react'; import './App.css'; function App() { return ( <div className="App"> <h1>Welcome to My Simple Web Page</h1> <p>This is a basic web page built with React.</p> </div> ); } export default App;

在我的网页示例中，我将使用 Ant Design 作为 UI 库，以使我的生活更轻松。编辑后，我的 React 页面将如下所示：

import React from 'react'; import {Button, Typography, Input} from 'antd'; import '../App.css'; const {Title, Paragraph} = Typography; const {TextArea} = Input; function App() { const renderHelper = () => { return ( <div className="wrapper"> <Input placeholder="User ID" style={{width: 240, marginTop: 16}} /> <Input placeholder="Channel Name" style={{width: 240, marginTop: 16}} /> <Button style={{width: 240, marginTop: 16}} type="primary" > Call </Button> <Button danger style={{width: 240, marginTop: 16}} type="primary" > Hangup </Button> </div> ); }; const renderTextarea = () => { return ( <div className="wrapper"> <TextArea style={{width: 240, marginTop: 16}} placeholder='Send message' /> <TextArea style={{width: 240, marginTop: 16}} placeholder='Receive message' disabled /> <Button style={{width: 240, marginTop: 16}} type="primary" disabled={sendButtonDisabled} > Send Message </Button> </div> ); }; return ( <div className="App"> <div className="App-header"> <Title>WebRTC</Title> <Paragraph>This is a simple demo app that demonstrates how to build a WebRTC application from scratch, including a signaling server. It serves as a step-by-step guide to help you understand the process of implementing WebRTC in your own projects.</Paragraph> <div className='wrapper-row' style={{justifyContent: 'space-evenly', width: '50%'}}> {renderHelper()} {renderTextarea()} </div> <div className='playerContainer' id="playerContainer" > <video id="peerPlayer" autoPlay style={{width: 640, height: 480}} /> <video id="localPlayer" autoPlay style={{width: 640, height: 480}} /> </div> </div> </div> ); } export default App;

现在，我们已经成功为WebRTC创建了一个基本的网页。
WebRTC 入门：带有示例代码的实用指南

4.2. 构建基本的 WebRTC 视频通话

4.2.1 步骤 1：设置本地媒体流（摄像头和麦克风）。

let localStream; const setupDevice = () => { console.log('setupDevice invoked'); navigator.getUserMedia({ audio: true, video: true }, (stream) => { // render local stream on DOM const localPlayer = document.getElementById('localPlayer'); localPlayer.srcObject = stream; localStream = stream; }, (error) => { console.error('getUserMedia error:', error); }); };

在 WebRTC 中处理媒体流和约束对于控制实时通信期间的音频和视频行为至关重要。您可以在向用户请求媒体时指定约束，例如分辨率、帧速率或特定设备。约束有助于定制媒体捕获以满足特定要求。

const constraints = { video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 }, }, audio: true, }; navigator.mediaDevices.getUserMedia(constraints) .then((stream) => { // Handle the media stream as needed. }) .catch((error) => { // Handle the error if constraints cannot be satisfied. });

4.2.2 第 2 步：建立 RTCPeerConnection。

const servers; const pcConstraints = { 'optional': [ {'DtlsSrtpKeyAgreement': true}, ], }; // When user clicks call button, we will create the p2p connection with RTCPeerConnection const callOnClick = () => { console.log('callOnClick invoked'); if (localStream.getVideoTracks().length > 0) { console.log(`Using video device: ${localStream.getVideoTracks()[0].label}`); } if (localStream.getAudioTracks().length > 0) { console.log(`Using audio device: ${localStream.getAudioTracks()[0].label}`); } localPeerConnection = new RTCPeerConnection(servers, pcConstraints); localPeerConnection.onicecandidate = gotLocalIceCandidateOffer; localPeerConnection.onaddstream = gotRemoteStream; localPeerConnection.addStream(localStream); localPeerConnection.createOffer().then(gotLocalDescription); }; // async function to handle offer sdp const gotLocalDescription = (offer) => { console.log('gotLocalDescription invoked:', offer); localPeerConnection.setLocalDescription(offer); }; // async function to handle received remote stream const gotRemoteStream = (event) => { console.log('gotRemoteStream invoked'); const remotePlayer = document.getElementById('peerPlayer'); remotePlayer.srcObject = event.stream; }; // async function to handle ice candidates const gotLocalIceCandidateOffer = (event) => { console.log('gotLocalIceCandidateOffer invoked', event.candidate, localPeerConnection.localDescription); // when gathering candidate finished, send complete sdp if (!event.candidate) { const offer = localPeerConnection.localDescription; // send offer sdp to signaling server via websocket sendWsMessage('send_offer', { channelName, userId, sdp: offer, }); } };

处理 WebRTC 中的媒体流和约束对于控制实时通信期间的音频和视频行为至关重要。以下是如何管理媒体流和约束的简要概述：

我们使用gotLocalIceCandidateOffer函数处理 ICE 候选。候选收集完成后，我们通过信令发送完整的 SDP。如果为event.candidate空，则表示 ICE 候选收集已准备就绪。处理 ICE 候选的方法有两种：一种是将 ICE 候选插入 SDP 并将它们一起发送，另一种是通过信令将每个 ICE 候选发送给远程用户。然后远程用户在其本地对等连接中设置它。

在此阶段，我们已经完成了 RTCPeerConnection 的设置并生成了 offer SDP。但是，为了与远程浏览器建立连接，我们需要一个信令服务器来交换 SDP。

4.3 实现信令服务器

信令服务器在 WebRTC 通信中起着至关重要的作用。它促进对等端之间交换会话信息 (SDP)，从而允许它们建立直接的对等连接。信令过程包括将本地浏览器生成的 SDP 请求发送到远程浏览器，反之亦然。

WebRTC 入门：带有示例代码的实用指南 信令服务器
一旦信令服务器收到本地浏览器的 SDP 请求，它就会将其转发到远程浏览器。然后远程浏览器生成其 SDP 应答并通过信令服务器将其发送回本地浏览器。

这种 SDP 提供和答复的交换使得两个浏览器能够协商媒体流的参数，例如编解码器、支持的分辨率以及成功进行点对点通信所需的其他设置。

信令服务器不传输实际的媒体流；它仅充当在对等端之间交换 SDP 的信使。一旦 SDP 交换完成，媒体流就会直接在对等端之间传输，从而为实时通信创建直接且安全的连接。

请记住，您可以使用各种技术来实现信令服务器，例如 WebSockets、HTTP 或任何其他合适的通信协议。信令服务器技术的选择取决于您的 WebRTC 应用程序的具体要求。

4.4 使用 Express.js 建立 NodeJs 服务器

NodeJs实现WebSocket

React实现WebSocket

import React, {useRef} from 'react'; import {useEffect} from 'react'; const URL_WEB_SOCKET = 'ws://localhost:8090/ws'; function App() { const ws = useRef(null); useEffect(() => { const wsClient = new WebSocket(URL_WEB_SOCKET); wsClient.onopen = () => { console.log('ws opened'); ws.current = wsClient; // setup camera and join channel after ws opened join(); setupDevice(); }; wsClient.onclose = () => console.log('ws closed'); wsClient.onmessage = (message) => { console.log('ws message received', message.data); const parsedMessage = JSON.parse(message.data); switch (parsedMessage.type) { case 'joined': { const body = parsedMessage.body; console.log('users in this channel', body); break; } case 'offer_sdp_received': { const offer = parsedMessage.body; onAnswer(offer); break; } case 'answer_sdp_received': { gotRemoteDescription(parsedMessage.body); break; } case 'quit': { break; } default: break; } }; return () => { wsClient.close(); }; }, []); const sendWsMessage = (type, body) => { console.log('sendWsMessage invoked', type, body); ws.current.send(JSON.stringify({ type, body, })); }; }

使用时要谨慎const ws = useRef(null)，并考虑为什么不直接使用wsClient = new WebSocket(URL_WEB_SOCKET)。React Hooks 的行为不同，ws每次页面重新渲染时变量都会被重置。为了确保 WebSocket 连接在渲染过程中保持不变，我们可以使用钩子useRef。这类似于在类上使用实例变量，并且与钩子不同，它不受重新渲染的影响useState。

通过使用useRef，我们可以在组件的整个生命周期内保持对 WebSocket 实例的稳定引用。这使我们能够有效地管理 WebSocket 连接，而不会受到渲染更新的影响。请记住主要useRef用于处理在渲染过程中持续存在的可变值，使其成为管理 React 组件中 WebSocket 连接的理想选择。

有了信令服务器，您的 WebRTC 应用程序将能够建立连接并实现远程对等点之间的无缝音频和视频通信。

4.5 完成呼叫应答部分

现在，我们几乎已经到达了完整 WebRTC 应用程序的最后一部分，当远程用户接到对方的呼叫时，我们需要处理应答逻辑。该过程与之前类似，但这次我们将生成应答 SDP 并通过信令服务器将其返回给呼叫者。

5. 开始直播

最后，我们成功完成了设置 WebRTC 的复杂过程。现在，让我们通过运行npm start并打开两个网页来启动 Web 应用程序——一个用于呼叫者，另一个用于被呼叫者。单击Call呼叫者页面上的按钮，即可开始通过 WebRTC 进行直播。
WebRTC 入门：带有示例代码的实用指南 使用 WebRTC 进行直播