[JavaScript知识库]【万字长文】WebRTC浅析与实战

推荐阅读时长25分钟

前言

目前市场上音视频技术方案大致分为以下几类，WebRTC因其超低延时、集成音视频采集传输等优点，是在线教育、远程会议等领域首选技术。

WebRTC是 Google 在 2010 年收购 VoIP 软件开发商 GlobalIPSolutions 的 GIPS 引擎后，基于 GIPS 引擎实现的浏览器音视频和数据通信技术，在 2012 年集成到 chrome 浏览器，到目前为止，大部分主流现代浏览器都已经支持。

WebRTC架构

一个简单的音视频架构大致如下：

• 音视频采集模块：调用系统API，从系统麦克风和摄像头读取设备并采集音视频数据。音频是PCM数据，视频是YUV数据

• 音视频编码模块：根据不同类型数据使用不同编码方式，将原始PCM、YUV数据压缩编码

• 网络传输模块：将压缩编码后的数据封装成RTP包，通过网络传输至对端，同时对端接收RTP数据

• 音视频解码模块：将接收到的压缩编码数据还原成原始的PCM、YUV/RGB数据

• 音视频渲染模块：拿到原始数据后，音频数据输出到扬声器，视频数据输出到显示器

如果我们按照上面的架构实现一个音视频通信系统，相当于至少需要开发7个小模块，想想就费时费力。此时WebRTC就可以闪亮登场了，它内部标准化的实现上述架构，并在此基础上进行拓展，对外只暴露了相关的API，其架构图如下（ 官网 的有点旧，重新画的）：

WebRTC大体可以分为四层：接口层、Session层、引擎层、设备层：

• 接口层：暴露给业务侧，业务侧可以使用原生的 C++ API 接口或者 Web API 开发音视频实时通信。核心是 RTCPeerConnection

• Session层：用于控制业务逻辑，比如媒体协商、收集 Candidate 等

• 引擎层：包括音频引擎、视频引擎和网络传输

• 设备层：主要和硬件交互，负责音频的采集和播放，视频的采集，物理网络等

WebRTC音视频通信过程

一个正常音视频通信架构如上图所示，通信双方分别是 caller（主叫） 与 callee（被叫），两边的内部逻辑相似，下面以caller端为例，了解内部流程：

1. 调用音视频检测模块，检测终端是否有可用的音视频设备

2. 调用音视频采集模块，采集用户音视频数据

3. 根据用户选择，是否开启录制（授权）

4. 通过信令模块交换SDP

5. 创建WebRTC的核心对象RTCPeerConnection，之后添加采集到的音视频数据

6. RTCPeerConnection向STUN(SessionTraversal Utilities forNAT)/TURN(Traversal Using Relays aroundNAT)服务器发送请求，返回caller的外网ip地址和端口号

7. 通过信令服务器，caller和callee互相传递对方的外网ip地址和端口（媒体协商）

8. 最终P2P链接建立完成，后面就会源源不断的发送音视频数据到对端

下面就是该过程对应的泳道图：

信令服务器

信令是实现音视频通信的重要一环，比如创建房间、离开房间、交换双端offer/answer以及candidate信息等。但WebRTC规范文档中并未定义信令相关的内容，因为不同业务，逻辑不同，信令也会千差万别，所以需要各个业务自己实现一套信令服务。
下面以socket.io为例，实现一套信令服务：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const USER_LIMITS = 3;

const app = express();
const httpServer = http.createServer(app);
const io = new Server(httpServer);

const getRoomUsers = room => {
  const myRoom = io.sockets.adapter.rooms[room];
  return myRoom || [];
};

const getRoomUsersCount = room => {
  return getRoomUsers(room).length;
};

// 连接事件
io.sockets.on('connection', socket => {
  // 转发消息
  socket.on('message', (room, data) => {
    console.log(`message, room: ${room}, data type: ${data.type}`);
    socket.to(room).emit('message', room, data);
  });

  // 加入房间
  socket.on('join', room => {
    socket.join(room);
    const userCount = getRoomUsersCount(room);
    console.log(`user join, room number ${userCount}`);

    // 房间未满员
    if (userCount < USER_LIMITS) {
      // 广播用户加入房间
      socket.emit('joined', room, socket.id);

      if (userCount > 1) {
        // 广播其他用户加入房间
        socket.to(room).emit('otherJoin', room, socket.id);
      }
    }
    // 房间满员
    else {
      socket.leave(room);
      socket.emit('full', room, socket.id);
    }
  });

  socket.on('leave', room => {
    socket.leave(room);

    const userCount = getRoomUsersCount(room);
    console.log(`user leave, room number ${userCount}`);

    // 广播有用户退出房间
    socket.to(room).emit('exit', room, socket.id);

    socket.emit('leaved', room, socket.id);
  });
});

httpServer.listen('80');

常用API

💡WebRTC的api返回值基本上都是Promise。

获取设备 enumerateDevices

navigator.mediaDevices.enumerateDevices()

该API的返回值是一个 Promise<MediaDeviceInfo[]> 。

interface MediaDeviceInfo {
  deviceId: string; // 设备的唯一编号
  kind: MediaDeviceKind; // 设备的类型
  label: string; // 设备的名字
  groupId: string; // 设备组编号，如果两个设备在同一个硬件上，则值是一致的
}

enum MediaDeviceKind {
   AudioInput = 'audioinput', // 麦克风
   AudioOutput = 'audiooutput', // 扬声器
   VideoInput = 'videoinput', // 摄像头
}

举个🌰，在控制台输入下面的命令：

navigator.mediaDevices.enumerateDevices().then(deviceInfos => console.table(deviceInfos))

采集音视频 getUserMedia

navigator.mediaDevices.getUserMedia(constrains?: MediaStreamConstrains):Promise<MediaStream>

通过 enumerateDevices 方法获取音视频设备后，就可以调用 getUserMedia 方法指定设备采集音视频数据了。 constrains 详情参考 MediaTrackConstraints - Web APIs | MDN

interface MediaStreamConstrains {
  video?: MediaTrackConstrains | boolean;
  audio?: MediaTrackConstrains | boolean;
}

interface MediaTrackConstrains {
  // 视频相关
  width?: ConstrainULong; // 宽度
  height?: ConstrainULong; // 高度
  aspectRatio?: ConstrainDouble; // 宽高比
  frameRate?: ConstrainDouble; // 帧率
  facingMode?: ConstrainDOMString; // 前置/后置摄像头
  resizeMode?: ConstrainDOMString; // 缩放或裁剪

  // 音频相关
  sampleRate?: ConstrainULong; // 采样率
  sampleSize?: ConstrainULong; // 采样大小
  echoCancellation?: ConstrainBoolean; // 是否开启回音消除
  autoGainControl?: ConstrainBoolean; // 是否开启自动增益控制
  noiseSuppression?: ConstrainBoolean; // 是否开启降噪
  latency?: ConstrainDouble; // 目标延迟
  channelCount?: ConstrainULong; // 声道数量

  // 设备相关
  deviceId?: ConstrainDOMString; // 设备编号
  groupId?: ConstrainDOMString; // 设备组编号
}

举个🌰：

<body>
  <video id="video" autoplay></video>
</body>
<script>
  const setLocalMediaStream = mediaStream => {
    const video = document.getElementById('video');
    video.srcObject = mediaStream;
  };
  navigator.mediaDevices
      .getUserMedia({
        video: true,
        audio: false,
      })
      .then(setLocalMediaStream)
</script>

核心对象 RTCPeerConnection

new RTCPeerConnection(config: RTCConfiguration)

RTCPeerConnection 对象是WebRTC的核心，同时也是暴露给用户的统一接口，内部包含了网络处理模块、服务质量模块、音视频引擎模块等，可以把它理解为一个socket，能够快速稳定的实现端到端的数据传输。
创建 RTCPeerConnection 对象时，需要传入STUN/TURN服务器等相关信息。

interface RTCConfiguration {
    bundlePolicy?: RTCBundlePolicy;
    certificates?: RTCCertificate[];
    iceCandidatePoolSize?: number;
    iceServers?: RTCIceServer[];
    iceTransportPolicy?: RTCIceTransportPolicy;
    rtcpMuxPolicy?: RTCRtcpMuxPolicy;
}

type RTCBundlePolicy = "balanced" | "max-bundle" | "max-compat";
type RTCIceCredentialType = "password";
type RTCIceTransportPolicy = "all" | "relay";
type RTCRtcpMuxPolicy = "require";

interface RTCCertificate {
    readonly expires: number;
    getFingerprints(): RTCDtlsFingerprint[];
}

interface RTCDtlsFingerprint {
    algorithm?: string;
    value?: string;
}

interface RTCIceServer {
    credential?: string;
    credentialType?: RTCIceCredentialType;
    urls: string | string[];
    username?: string;
}

举个🌰：

const config = {
  iceServers: [
    {
      urls: '[stun:xxx.exmaple.com](http://stun:xxx.exmaple.com/)'
    }
  ]
};

const pc = new RTCPeerConnection(config);

属性

方法

事件

下面以绑定本地音视频数据为例，说明api的使用方法。
目前 RTCPeerConnection 提供了两种方法用来绑定音视频数据：addTrack() 和 addSteam() ，其中 addStream 已经被官方标记为废弃，推荐使用 addTrack() 方法，这两个方法可以转换：

peerConnection.addStream(mediaStream);
// 等价于
mediaStream.getTracks().forEach(track => {
  peerConnection.addTrack(track, mediaStream);
});

下面以 addTrack 为例：

let localMediaStream = null;

const setLocalMediaStream = mediaStream => {
  localMediaStream = mediaStream;
};

navigator.mediaDevices
  .getUserMedia({
    video: true,
    audio: false,
  })
  .then(setLocalMediaStream);

const bindTracks = () => {
  localMediaStream
    .getTracks()
    .forEach(track => {
      peerConnection.addTrack(track, localMediaStream);
    })
};

媒体协商

媒体协商就是在双端通信之前，了解双方具备哪些能力。其协商过程中交换的内容就是SDP协议定义的。

会话描述协议SDP

SDP（SessionDescription Protocol）是一个2006年发布的老协议，以 <type>=<value> 的格式描述会话内容，其中 <type> 表示描述的目标，由单个字符构成； <value> 是对 <type> 的描述和约束，包括音视频编解码器类型、传输协议等，详情可以查看 RFC4566 。WebRTC引入SDP来描述媒体信息，用于媒体协商，决定双端使用何种方式通信。
SDP协议的具体格式如下，分为两部分：会话描述和媒体描述。其中带星号（*）的表示可选。

Session description
    v=  (protocol version)
    o=  (originator and session identifier)
    s=  (session name)
    i=* (session information)
    u=* (URI of description)
    e=* (email address)
    p=* (phone number)
    c=* (connection information -- not required if included in all media)
    b=* (zero or more bandwidth information lines)
    [...One or more time descriptions ("t=" and "r=" lines)]
    z=* (time zone adjustments)
    k=* (encryption key)
    a=* (zero or more session attribute lines)
    [...Zero or more media descriptions]

Time description
    t=  (time the session is active)
    r=* (zero or more repeat times)

Media description, if present
    m=  (media name and transport address)
    i=* (media title)
    c=* (connection information -- optional if included at session level)
    b=* (zero or more bandwidth information lines)
    k=* (encryption key)
    a=* (zero or more media attribute lines)

举个🌰：

v=0
o=jdoe 2890844526 2890842807 IN IP4 10.47.16.5
s=SDP Seminar
i=A Seminar on the session description protocol
u=[http://www.example.com/seminars/sdp.pdf](http://www.example.com/seminars/sdp.pdf)
[e](mailto:e=j.doe@example.com)[=j.doe@example.com](mailto:e=j.doe@example.com) (Jane Doe)
c=IN IP4 224.2.17.12/127
t=2873397496 2873404696
a=recvonly
m=audio 49170 RTP/AVP 0
m=video 51372 RTP/AVP 99
a=rtpmap:99 h263-1998/90000

协商流程

1. caller生成本地描述信息

const offer = await peerConnection.createOffer()

2. caller设置本地描述信息

await peerConnection.setLocalDescription(offer);

3. caller发送本地描述信息至远端

const signalServer = new WebSocket('ws://[xxx.signal.com](http://xxx.signal.com/)');

signalServer.send({
  type: 'offer',
  data: offer,
});

4. callee设置远端描述信息

await peerConnection.setRemoteDescription(offer);

5. callee生成本地应答描述信息

const answer = await peerConnection.createAnswer();

6. callee设置本地描述信息

await peerConnection.setLocalDescription(answer);

7. callee发送answer描述信息至远端

const signalServer = new WebSocket('ws://[xxx.signal.com](http://xxx.signal.com/)');

signalServer.send({
  type: 'answer',
  data: answer,
});

8. callee设置远端描述信息

peerConnection.setRemoteDescription(answer);

交互式连接建立 ICE

当各端调用 setLocalDescription 后，WebRTC就开始建立网络连接，主要包括收集candidate、交换candidate和按优先级尝试连接，该过程被称为ICE（Interactive Connectivity Establishment，交互式连接建立）。其中每个 candidate 都包含IP地址、端口、传输协议、类型等信息。
根据 RFC5245 协议，WebRTC将 candidate分为了四个类型：host、srflx、prflx、relay，它们的优先级依次降低。

• host：Host Candidate，根据主机的网卡数量决定，一般一个网卡对应一个ip地址，然后给每个ip随机分配一个端口生成

• srflx：Server Reflexive Candidate，根据STUN服务器获得的ip和端口生成

• prflx：Peer Reflexive Candidate，根据对端的ip和端口生成

• relay：Relayed Candidate，根据TURN服务器获得的ip和端口生成

网络地址转换NAT

NAT在真实网络环境中随处可见，主要由两个用处：

• 解决IPv4地址不够用的问题，可以让多台主机共用一个公网IP

• 安全问题，将主机隐藏在内网中，外网就比较难访问到真实主机

NAT类型

根据 RFC3489 协议，NAT总共分成4种类型：完全锥型（Full ConeNAT）、IP限制锥型（Address Restricted ConeNAT）、端口限制锥型（Port Restricted ConeNAT）、对称型（SymmetrictNAT），依次检测越来越严格。

💡所谓“打洞”，其实就是在 NAT 建立一个内外网的映射表。包括内网IP和端口，以及映射的外网IP和端口。

完全锥型

NAT打洞成功后，所有知道该洞的主机都可以通过它与内网主机进行通信。映射表内容如下：

{
  内网ip，
  内网端口，
  映射的外网ip，
  映射的外网端口
}

举个栗子：从同一私网地址端口192.168.0.8:4000发至公网的所有请求都映射成同一个公网地址端口1.2.3.4:62000 ，192.168.0.8可以收到任意外部主机发到1.2.3.4:62000的数据报。

IP限制锥型

NAT打洞成功后，只有打洞成功的外网主机才能通过该洞与内网主机通信，其他外网主机即使知道洞口也不能内网主机通信。映射表内容如下：

{
  内网ip，
  内网端口，
  映射的外网ip，
  映射的外网端口，
  [被访问主机的ip，....]
}

举个栗子：从同一私网地址端口192.168.0.8:4000发至公网的所有请求都映射成同一个公网地址端口1.2.3.4:62000，只有当内部主机192.168.0.8先给服务器C 6.7.8.9发送一个数据报后，192.168.0.8才能收到6.7.8.9发送到1.2.3.4:62000的数据报。

端口限制锥型

除了像IP限制锥型一样对IP进行检测以外，还需要检测端口。映射表内容如下：

{
  内网ip，
  内网端口，
  映射的外网ip，
  映射的外网端口，
  [
    {被访问主机的ip，被访问主机的端口}，
    ...
  ]
}

举个栗子：从同一私网地址端口192.168.0.8:4000发至公网的所有请求都映射成同一个公网地址端口1.2.3.4:62000，只有当内部主机192.168.0.8先向外部主机地址端口6.7.8.9:8000发送一个数据报后，192.168.0.8才能收到6.7.8.9:8000发送到1.2.3.4:62000的数据报。

对称型

内网主机每次访问不同的外网时，都需要打一个新洞，而不像前面三种NAT类型使用的是同一个“洞”，即只有收到过一个数据包的外部主机才能够向该内部主机发送数据包，映射表内容如下：

{
  内网ip，
  内网端口，
  // 不仅访问地址变化，映射ip也要发生变化
  映射的外网ip，
  // 不仅访问端口变化，映射端口也要发生变化
  映射的外网端口，
  被访问主机的ip，
  被访问主机的端口
}

NAT类型检测

💡下述算法在 RFC 3489 被提出，但在 RFC 5389 中被删除。因为随着发展，NAT类型比协议中描述的更多种多样，检测过程变得比较脆弱。更详细的原因可以到 RFC 5389 的Page 45中‘ 19.Changes since RFC 3489 ’查看。

下面（ 原图 ）就是内网主机进行NAT类型检测的算法流程，总共需要2台STUN服务器，每台STUN服务器又需要两块网卡，每块网卡都需要配置公网ip地址。
如果双端都进入红色部分，则表示无法通信，进入黄色或者绿色就有打洞通信的可能性。

检测是否具备通信能力（Test1）

• 客户端建立UDPsocket，然后用这个socket向服务器 Server#1 的（IP-1，Port-1）发送数据包，要求服务器从（IP-1，Port-1）返回客户端的IP和Port，客户端发送请求后立即开始接收数据包。

  • 如果超时收不到服务器的响应，则说明客户端无法进行UDP通信，表明：防火墙阻止UDP通信；

  • 如果能收到回应，则比较服务器返回的客户端（ip:port）与本地的（ip:port）是否一致；

• 如果完全相同则表明：客户端具有公网IP，然后进行防火墙检测；

• 如果不同，则表明：客户端在NAT后，要做进一步的NAT类型检测（继续）。

检测是否具有防火墙（Test2）

• 客户端向服务器 Server#1 的（IP-1，PORT-1）发送请求，要求服务器从（IP-2，PORT-2）向客户端发送数据包：

  • 如果客户端能够收到数据包，则认为客户端处在一个开放的网络上，网络类型为公开的互联网IP

  • 否则客户端被前置防火墙拦截，判断为对称型网络；

检测是否为完全锥型网络（Test2）

• 客户端向服务器的（IP-1，Port-1）发送数据包，并要求服务器从（IP-2，Port-2）向客户端发回一个响应数据包，客户端发送请求后立即开始接受数据包。

  • 如果能够接受到服务器从(IP-2,Port-2)返回的应答UDP包，则说明客户端是一个完全锥型网络。

  • 否则进行下一步检测（继续）；

检测是否为对称型（Test1#2）

• 客户端向另一台STUN服务器 Server#2 的 （IP-3，Port-3）发送请求，要求服务器从（IP-3，Port-3）返回客户端的ip和端口。

  • 如果服务端返回的客户端ip与本地ip不一致，则表明是对称型网络；

  • 否则，表明是限制型网络，进行下一步检测（继续）；

检测为IP限制锥型 or 端口限制锥型（Test3）

• 客户端向另一台STUN服务器 Server#2 的 （IP-3，Port-3）发送请求，要求服务器从（IP-3，Port-4）返回客户端的ip和端口。

  • 如果收到数据，则表明是：IP限制锥形网络；

  • 否则表明是：端口限制锥形网络。

实战

接下来开发一个本地1v1通信的简单demo以及附加的拍照功能.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebRTC Demo</title>
    <style>
      video {
        width: 400px;
      }
    </style>
  </head>
  <body>
    <video id="localVideo" autoplay></video>
    <video id="remoteVideo" autoplay></video>

    <div>
      <button id="startBtn">打开摄像头</button>
      <button id="callBtn">建立远程连接</button>
      <button id="hangupBtn">断开远程连接</button>
      <button id="photoBtn" disabled>拍照</button>
    </div>

    <canvas id="photoContainer"></canvas>
  </body>
  <script>
    const startBtn = document.getElementById("startBtn");
    const callBtn = document.getElementById("callBtn");
    const hangupBtn = document.getElementById("hangupBtn");
    const photoBtn = document.getElementById("photoBtn");
    const photoContainer = document.getElementById("photoContainer");
    const photoCtx = photoContainer.getContext("2d");

    startBtn.addEventListener("click", startHandle);
    callBtn.addEventListener("click", callHandle);
    hangupBtn.addEventListener("click", hangupHandle);
    photoBtn.addEventListener("click", photoHandle);

    // 本地流
    let localStream;
    // 远端流
    let remoteStream;

    // 本地连接对象
    let localPeerConnection;
    // 远端连接对象
    let remotePeerConnection;

    // 本地视频
    const localVideo = document.getElementById("localVideo");
    // 远端视频
    const remoteVideo = document.getElementById("remoteVideo");

    // 设置约束
    const mediaStreamConstraints = {
      video: true,
    };

    // 仅交换视频
    const offerOptions = {
      offerToReceiveVideo: 1,
    };

    function startHandle() {
      console.log("开启本地摄像头");
      startBtn.disabled = true;
      navigator.mediaDevices
        .getUserMedia(mediaStreamConstraints)
        .then(setLocalMediaStream)
        .catch((err) => {
          console.error("getUserMedia", err);
        });
    }

    async function callHandle() {
      console.log("建立远端连接");
      callBtn.disabled = true;
      hangupBtn.disabled = false;
      photoBtn.disabled = false;

      // 本地直连，没有STUN服务器
      const rtcConfig = null;

      // 1. 创建 RTCPeerConnection
      createLocalPeerConnection(rtcConfig);
      createRemotePeerConnection(rtcConfig);

      // 2.添加本地音视频流
      addLocalStream();

      /** 媒体协商 */
      // 2.创建SDP offer
      const offer = await createOffer(offerOptions);
      // 3.设置本地SDP offer
      setLocalDescription(localPeerConnection, offer);
      // 4.远端设置远端SDP offer
      setRemoteDescription(remotePeerConnection, offer);
      // 5.远端创建SDP answer
      const answer = await createAnswer();
      // 6.远端设置本地SDP answer
      setLocalDescription(remotePeerConnection, answer);
      // 7.本地设置SDP answer
      setRemoteDescription(localPeerConnection, answer);
    }

    function hangupHandle() {
      console.log("断开远端连接");
      // 关闭连接并设置为空
      localPeerConnection.close();
      remotePeerConnection.close();
      localPeerConnection = null;
      remotePeerConnection = null;
      hangupBtn.disabled = true;
      callBtn.disabled = false;
      photoBtn.disabled = true;
    }

    function photoHandle() {
      photoContainer.setAttribute("width", localVideo.videoWidth);
      photoContainer.setAttribute("height", localVideo.videoHeight);
      photoCtx.drawImage(localVideo, 0, 0);
    }

    function createLocalPeerConnection(rtcConfig) {
      // 创建本地 RTCPeerConnection 对象
      localPeerConnection = new RTCPeerConnection(rtcConfig);
      // 监听本地返回的 Candidate
      localPeerConnection.addEventListener("icecandidate", handleICEConnection);
      // 监听本地 ICE 状态变化
      localPeerConnection.addEventListener(
        "iceconnectionstatechange",
        handleICEConnectionChange
      );
    }

    function createRemotePeerConnection(rtcConfig) {
      // 创建远端 RTCPeerConnection 对象
      remotePeerConnection = new RTCPeerConnection(rtcConfig);
      // 监听远端返回的 Candidate
      remotePeerConnection.addEventListener(
        "icecandidate",
        handleICEConnection
      );
      // 监听远端 ICE 状态变化
      remotePeerConnection.addEventListener(
        "iceconnectionstatechange",
        handleICEConnectionChange
      );
      // 监听远端轨道添加
      remotePeerConnection.addEventListener("track", setRemoteMediaStream);
    }

    function addLocalStream() {
      localStream.getTracks().forEach((track) => {
        localPeerConnection.addTrack(track, localStream);
      });
    }

    // 设置本地媒体流
    function setLocalMediaStream(mediaStream) {
      localVideo.srcObject = mediaStream;
      localStream = mediaStream;
      callBtn.disabled = false;
    }

    // 设置本地SDP
    function setLocalDescription(peerConnection, description) {
      return peerConnection.setLocalDescription(description);
    }

    // 生成SDP offer
    function createOffer(options) {
      return localPeerConnection.createOffer(options);
    }

    // 生成SDP answer
    function createAnswer() {
      return remotePeerConnection.createAnswer();
    }

    // 设置远端SDP
    function setRemoteDescription(peerConnection, description) {
      return peerConnection.setRemoteDescription(description);
    }

    // 端与端建立连接
    function handleICEConnection(event) {
      // 获取到触发 icecandidate 事件的 RTCPeerConnection 对象
      // 获取到具体的Candidate
      const peerConnection = event.target;
      const iceCandidate = event.candidate;

      if (iceCandidate) {
        // 创建 RTCIceCandidate 对象
        const newIceCandidate = new RTCIceCandidate(iceCandidate);
        // 得到对端的 RTCPeerConnection
        const otherPeer = getOtherPeer(peerConnection);

        // 将本地获得的 Candidate 添加到远端的 RTCPeerConnection 对象中
        otherPeer.addIceCandidate(newIceCandidate);
      }
    }

    // 显示远端媒体流
    function setRemoteMediaStream(event) {
      if (remoteVideo.srcObject !== event.streams[0]) {
        remoteVideo.srcObject = event.streams[0];
        remoteStream = event.streams[0];
        console.log("开始接收远端音视频流");
      }
    }

    function handleICEConnectionChange(event) {
      console.log("ICE连接状态改变: ", event);
    }

    function getOtherPeer(peerConnection) {
      return peerConnection === localPeerConnection
        ? remotePeerConnection
        : localPeerConnection;
    }
  </script>
</html>

参考文档

浅聊WebRTC视频通话
从0到1打造一个 WebRTC 应用
前端音视频WebRTC实时通讯的核心
音视频开发基础概述 - PCM、YUV、H264、常用软件介绍
《 WebRTC音视频实时互动技术——李超 》
官网 WebRTC 架构
STUN(RFC3489)的NAT类型检测方法
webRTC连接过程详细剖析,及阶段总结 - github