WebRTC是一种基于浏览器的实时通信技术，它通过JavaScript API和标准化的通讯协议，允许开发者在网页中进行点对点的音视频通讯，而无需使用插件或第三方软件。本文将深入探讨WebRTC的基础原理、核心API以及如何在网页中实现音视频通讯。
基础原理
WebRTC 是由 Google 开发的开源项目，它采用了一系列标准化协议和技术，包括：
- RTP (Real-time Transport Protocol)
- STUN (Session Traversal Utilities for NAT)
- TURN (Traversal Using Relay NAT)
- ICE (Interactive Connectivity Establishment)
- SDP (Session Description Protocol)
其中，RTP 是一个用于实时传输音视频数据的协议；STUN 和 TURN 则是用于在网络中穿越 NAT（Network Address Translation）和防火墙的协议；ICE 是用于选择最佳通讯路径的协议；SDP 则是用于描述媒体流信息的协议。
WebRTC 主要分为两个部分：信令和媒体流传输。信令是指用于建立连接、交换媒体元数据等信息的过程，而媒体流传输则是指音视频数据的实时传输过程。
核心API
WebRTC 提供了一系列核心 API，包括：
- MediaStream：用于获取摄像头、麦克风等设备的媒体流数据。
- RTCPeerConnection：用于建立点对点连接，并传输音视频数据。
- RTCDataChannel：用于传输任意类型的数据。
下面我们将分别介绍这三个 API 的使用方法。
获取媒体流数据
要想进行音视频通讯，首先需要获取本地设备（如摄像头和麦克风）的媒体流数据。WebRTC 提供了 navigator.mediaDevices.getUserMedia() 方法来获取媒体流数据。
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(mediaStream => {
// 成功获取到媒体流数据
})
.catch(error => {
// 获取媒体流数据失败
});在上述代码中，getUserMedia() 方法接受一个包含 video 和 audio 属性的对象作为参数，表示需要获取的媒体流类型。该方法返回一个 Promise 对象，当成功获取到媒体流数据时，Promise 对象将被 resolve，并传递一个 MediaStream 对象作为参数；当获取媒体流数据失败时，Promise 对象将被 reject，并传递一个错误对象作为参数。
建立点对点连接
获取到本地设备的媒体流数据后，就可以开始建立点对点连接，并传输音视频数据了。WebRTC 提供了 RTCPeerConnection 类来实现点对点连接。
const peerConnection = new RTCPeerConnection();
在上述代码中，我们创建了一个 RTCPeerConnection 对象。接下来，我们需要将本地设备的媒体流数据添加到连接中，并向远程设备发送一个 offer。
-- -------------------- ---- -------
--------------------------------------
----------------------------
----------- -- -
------ ------------------------------------------
--
-------- -- -
-- ------- -----
--
------------ -- -
-- ----- ----- --
---在上述代码中，我们首先调用 addStream() 方法将本地设备的媒体流数据添加到连接中。接着，我们通过调用 createOffer() 方法生成一个 offer，并将其设置为本地描述（local description）。最后，我们通过调用 `setLocal
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38435