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

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

1. 了解 WebRTC 的基础知识

1.1 什么是 WebRTC？

WebRTC（Web 实时通信）是一组开源技术，可实现 Web 浏览器和移动应用程序之间通过互联网直接进行实时通信。它允许点对点音频、视频和数据共享，而无需任何插件或其他软件。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？

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 应用程序：

<code>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">code>

<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">code>

<Input

placeholder="User ID"code>

style={ -- -->{ width: 240, marginTop: 16}}

/>

<Input

placeholder="Channel Name"code>

style={ -- -->{ width: 240, marginTop: 16}}

/>

<Button

style={ { width: 240, marginTop: 16}}

type="primary"code>

>

Call

</Button>

<Button

danger

style={ -- -->{ width: 240, marginTop: 16}}

type="primary"code>

>

Hangup

</Button>

</div>

);

};

const renderTextarea = () => { -- -->

return (

<div className="wrapper">code>

<TextArea

style={ -- -->{ width: 240, marginTop: 16}}

placeholder='Send message'code>

/>

<TextArea

style={ -- -->{ width: 240, marginTop: 16}}

placeholder='Receive message'code>

disabled

/>

<Button

style={ -- -->{ width: 240, marginTop: 16}}

type="primary"code>

disabled={ -- -->sendButtonDisabled}

>

Send Message

</Button>

</div>

);

};

return (

<div className="App">code>

<div className="App-header">code>

<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%'}}>code>

{ -- -->renderHelper()}

{ renderTextarea()}

</div>

<div

className='playerContainer'code>

id="playerContainer"code>

>

<video

id="peerPlayer"code>

autoPlay

style={ -- -->{ width: 640, height: 480}}

/>

<video

id="localPlayer"code>

autoPlay

style={ -- -->{ width: 640, height: 480}}

/>

</div>

</div>

</div>

);

}

export default App;

现在，我们已经成功为WebRTC创建了一个基本的网页。

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

<code>const debug = require('debug')(`${ -- -->process.env.APPNAME}:index`);

const app = require('express')();

const server = require('http').Server(app);

const wss = require ('./wss');

const HTTPPORT = 4000;

const WSSPORT = 8090;

// init the websocket server on 8090

wss.init(WSSPORT)

// init the http server on 4000

server.listen(HTTPPORT, () => {

debug(`${ process.env.APPNAME} is running on port: ${ HTTPPORT}`);

});

NodeJs实现WebSocket

const debug = require('debug')(`${ process.env.APPNAME}:wss`);

const WebSocket = require('ws');

let channels = { }

function init (port) {

debug('ws init invoked, port:', port)

const wss = new WebSocket.Server({ port });

wss.on('connection', (socket) => {

debug('A client has connected!');

socket.on('error', debug);

socket.on('message', message => onMessage(wss, socket, message));

socket.on('close', message => onClose(wss, socket, message));

})

}

function send(wsClient, type, body) {

debug('ws send', body);

wsClient.send(JSON.stringify({

type,

body,

}))

}

function clearClient(wss, socket) {

// clear client by channel name and user id

Object.keys(channels).forEach((cname) => {

Object.keys(channels[cname]).forEach((uid) => {

if (channels[cname][uid] === socket) {

delete channels[cname][uid]

}

})

})

}

function onMessage(wss, socket, message) {

debug(`onMessage ${ message}`);

const parsedMessage = JSON.parse(message)

const type = parsedMessage.type

const body = parsedMessage.body

const channelName = body.channelName

const userId = body.userId

switch (type) {

case 'join': {

// join channel

if (channels[channelName]) {

channels[channelName][userId] = socket

} else {

channels[channelName] = { }

channels[channelName][userId] = socket

}

const userIds = Object.keys(channels[channelName])

send(socket, 'joined', userIds)

break;

}

case 'quit': {

// quit channel

if (channels[channelName]) {

channels[channelName][userId] = null

const userIds = Object.keys(channels[channelName])

if (userIds.length === 0) {

delete channels[channelName]

}

}

break;

}

case 'send_offer': {

// exchange sdp to peer

const sdp = body.sdp

let userIds = Object.keys(channels[channelName])

userIds.forEach(id => {

if (userId.toString() !== id.toString()) {

const wsClient = channels[channelName][id]

send(wsClient, 'offer_sdp_received', sdp)

}

})

break;

}

case 'send_answer': {

// exchange sdp to peer

const sdp = body.sdp

let userIds = Object.keys(channels[channelName])

userIds.forEach(id => {

if (userId.toString() !== id.toString()) {

const wsClient = channels[channelName][id]

send(wsClient, 'answer_sdp_received', sdp)

}

})

break;

}

case 'send_ice_candidate': {

const candidate = body.candidate

let userIds = Object.keys(channels[channelName])

userIds.forEach(id => {

if (userId.toString() !== id.toString()) {

const wsClient = channels[channelName][id]

send(wsClient, 'ice_candidate_received', candidate)

}

})

}

default:

break;

}

}

function onClose(wss, socket, message) {

debug('onClose', message);

clearClient(wss, socket)

}

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 并通过信令服务器将其返回给呼叫者。

const onAnswer = (offer) => {

console.log('onAnswer invoked');

setCallButtonDisabled(true);

setHangupButtonDisabled(false);

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 = gotLocalIceCandidateAnswer;

localPeerConnection.onaddstream = gotRemoteStream;

localPeerConnection.addStream(localStream);

localPeerConnection.setRemoteDescription(offer);

localPeerConnection.createAnswer().then(gotAnswerDescription);

};

const gotRemoteStream = (event) => {

console.log('gotRemoteStream invoked');

const remotePlayer = document.getElementById('peerPlayer');

remotePlayer.srcObject = event.stream;

};

const gotAnswerDescription = (answer) => {

console.log('gotAnswerDescription invoked:', answer);

localPeerConnection.setLocalDescription(answer);

};

const gotLocalIceCandidateAnswer = (event) => {

console.log('gotLocalIceCandidateAnswer invoked', event.candidate, localPeerConnection.localDescription);

// gathering candidate finished, send complete sdp

if (!event.candidate) {

const answer = localPeerConnection.localDescription;

sendWsMessage('send_answer', {

channelName,

userId,

sdp: answer,

});

}

};

}

5. 开始直播

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

使用 WebRTC 进行直播

6. 了解演示应用程序

以下是使用 WebRTC API 的典型 10 个步骤：

从本地设备（例如麦克风、网络摄像头）捕获媒体流。从 MediaStream 获取 URL blob。使用 URL blob 预览本地媒体。创建一个 RTCPeerConnection 对象。将本地流添加到新创建的连接。将您自己的会话描述发送给远程端。从对等方接收远程会话描述。处理收到的会话描述并将远程流添加到您的 RTCPeerConnection。从远程流中获取 URL blob。使用 URL blob 播放远程对等点的音频和/或视频。

通过全面的端到端图表，您可以完整了解此 WebRTC 应用程序的整个流程。

7. 实现数据通道

WebRTC 中的数据通道是一种功能，允许在点对点连接中两个对等端之间以低延迟方式双向通信任意数据。与媒体流（用于音频和视频）不同，数据通道提供了一种在浏览器之间直接交换非媒体数据的方法，使其适用于各种实时应用程序。

实现数据通道涉及在 RTCPeerConnection 中创建数据通道并处理其状态和消息事件以在对等端之间交换数据。数据通道 API 提供 send() 等方法来发送数据，以及 onmessage、onopen、onclose 和 onerror 等事件来处理通信事件。

7.1 实现对等体之间的数据交换

<code>const createDataChannel = () => { -- -->

try {

console.log('localPeerConnection.createDataChannel invoked');

sendChannel = localPeerConnection.createDataChannel('sendDataChannel', { reliable: true});

} catch (error) {

console.error('localPeerConnection.createDataChannel failed', error);

}

sendChannel.onopen = handleSendChannelStateChange;

sendChannel.onClose = handleSendChannelStateChange;

localPeerConnection.ondatachannel = gotReceiveChannel;

};

const sendOnClick = () => {

console.log('sendOnClick invoked', sendMessage);

sendChannel.send(sendMessage);

setSendMessage('');

};

const gotReceiveChannel = (event) => {

console.log('gotReceiveChannel invoked');

receiveChannel = event.channel;

receiveChannel.onmessage = handleMessage;

receiveChannel.onopen = handleReceiveChannelStateChange;

receiveChannel.onclose = handleReceiveChannelStateChange;

};

const handleMessage = (event) => {

console.log('handleMessage invoked', event.data);

setReceiveMessage(event.data);

setSendMessage('');

};

const handleSendChannelStateChange = () => {

const readyState = sendChannel.readyState;

console.log('handleSendChannelStateChange invoked', readyState);

if (readyState === 'open') {

setSendButtonDisabled(false);

} else {

setSendButtonDisabled(true);

}

};

const handleReceiveChannelStateChange = () => {

const readyState = receiveChannel.readyState;

console.log('handleReceiveChannelStateChange invoked', readyState);

};

}

7.2 发送和接收非媒体数据

我们已经成功使用 WebRTC 实现了点对点数据通道。为了查看其实际效果，让我们通过运行npm start并打开两个网页来启动 Web 应用程序。在呼叫者的页面上，单击Call按钮以启动对等连接。

连接后，输入Hello, World!!!呼叫者的文本区域并单击Send按钮。

通过数据通道发送消息

您将看到该消息在另一端被实时接收，展示了 WebRTC 的无缝数据传输能力。

从数据通道接收消息

8. 高级 WebRTC 功能

8.1 管理音频和视频编解码器以获得最佳性能

选择在质量和带宽消耗之间取得平衡的编解码器。WebRTC 支持各种编解码器，例如视频的 VP8、VP9、H.264，以及音频的 Opus、G.711、G.722。选择编解码器时，请考虑目标设备和网络条件。例如，VP8 受到广泛支持并且质量良好，而 H.264 可能更适合某些设备上的硬件加速解码。

8.2 使用加密保护 WebRTC 连接

WebRTC 使用数据报传输层安全性 (DTLS) 协议来加密媒体流。DTLS 为 UDP 数据传输提供安全加密。在建立对等连接时，WebRTC 使用 DTLS 协商和交换用于加密媒体流的加密密钥。

如果您使用 WebRTC 数据通道交换非媒体数据，请启用数据通道消息加密。数据通道使用 DTLS 上的 SCTP（流控制传输协议）进行安全数据传输。

确保您的信令服务器和媒体服务器（如果使用）支持安全传输协议，例如 HTTPS 和 WSS（WebSocket Secure）。HTTPS 为交换信令数据提供了安全通道，而 WSS 则确保 WebRTC 中使用的 WebSocket 连接的安全通信。

8.3 实现屏幕共享功能

使用getDisplayMedia或navigator.mediaDevices.getDisplayMediaAPI 来捕获用户的屏幕。此 API 允许用户授予与应用程序共享其屏幕的权限。请务必处理用户拒绝或没有所需权限的情况。

8.4 使用 WebRTC 和 WebAssembly 进行性能优化

WebAssembly 提供了一种在浏览器中直接执行用 C、C++ 和 Rust 等语言编写的代码以及 JavaScript 的方法。凭借接近原生的性能，它可以更高效地执行视频处理、图像识别和加密/解密等计算密集型任务。

通过将性能关键任务卸载到 WebAssembly 模块，开发人员可以通过多种方式优化他们的 WebRTC 应用程序：

视频和音频处理：WebAssembly 可以处理视频和音频的编码/解码、过滤和分析，从而减轻主 JavaScript线程的负担并提高整体性能。加密和解密：WebRTC 数据通道通常需要安全通信。利用 WebAssembly 进行加密/解密任务可以加快进程并确保数据安全。人工智能和机器学习：复杂的人工智能算法和机器学习模型可以通过 WebAssembly 执行，从而实现 WebRTC 应用程序内大型数据集的实时处理。

9. 完整示例代码

所有代码都在git上，可以完整获取到！

9.1 WebRTC 示例代码

https://github.com/giftedunicorn/webpig/blob/main/src/pages/webrtc.js

9.2 信令服务器示例代码

https://github.com/giftedunicorn/webpig/blob/main/server/index.js

9.2 Agora RTC Web SDK 示例代码

https://github.com/giftedunicorn/webpig/blob/main/src/pages/agorawebsdk.js

10. 结束

恭喜！您现在已经了解了 WebRTC 的基础知识并构建了一个基本的视频通话应用程序。这只是您的 WebRTC 之旅的开始。借助 WebRTC 的巨大潜力，您可以探索各种应用程序，从视频会议到在线游戏等等。继续尝试，磨练您的技能，并对不断发展的 WebRTC 世界保持好奇心。

请记住，实时通信触手可及，因此请拥抱这项强大的技术，将您的 Web 应用程序提升到新的水平。祝您编码愉快！