WebRTC（Web Real-Time Communication）是一项开放标准和技术集合，由 W3C 和 IETF 等组织共同推动和维护，旨在通过Web浏览器实现实时通信和媒体流传输。WebRTC于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准，其提供了一组API和协议，使开发者能够在浏览器中构建实时音视频通信、数据传输和协作应用。目前WebRTC已得到包括主流的Web浏览器（如Chrome、Firefox、Safari）和移动设备平台的广泛的支持和应用。

• WebRTC API 简介
• WebRTC SDP状态机
• WebRTC API 使用——媒体流传输
• WebRTC API 使用——DataChannel
• WebRTC API 使用——RTCSessionDescription

一、API 简介

WebRTC（Web Real-Time Communication）提供了一组丰富的 API 方法，用于在浏览器中实现实时通信。这些 API 方法涵盖了音视频捕获、连接建立、媒体流传输和数据传输等方面。下面是对 WebRTC 中一些核心 API 方法的详细介绍，并提供了相应的使用示例：

• 呼叫端通过 navigator.mediaDevices.getUserMedia()捕捉本地媒体；
• 呼叫端创建一个RTCPeerConnection 并调用 RTCPeerConnection.addTrack()；
• 呼叫端调用 RTCPeerConnection.createOffer()来创建一个提议 (offer)；
• 呼叫端调用 RTCPeerConnection.setLocalDescription()将提议 (Offer) 设置为本地描述 (即，连接的本地描述)；
• 呼叫端请求 STUN 服务创建 ice 候选 (ice candidates)；
• 呼叫端通过信令服务器（如 websocket）将提议 (offer) 传递至接收端；
• 接收端收到了提议 (offer) 并调用 RTCPeerConnection.setRemoteDescription() 将其记录为远程描述 (也就是连接的另一端的描述)；
• 接收端捕获本地媒体，通过RTCPeerConnection.addTrack()添加到连接中；
• 接收端通过 RTCPeerConnection.createAnswer() 创建一个应答；
• 接收端调用 RTCPeerConnection.setLocalDescription() 将应答 (answer) 设置为本地描述。此时，接收端已经获知连接双方的配置了。
• 接收端通过信令服务器（如 websocket）将应答传递到呼叫端；
• 呼叫端接受到应答。
• 呼叫端调用 RTCPeerConnection.setRemoteDescription()将应答设定为远程描述。如此，呼叫端已经获知连接双方的配置了。

二、会话描述状态机

JSEP是一种用于在WebRTC应用程序中建立和管理通信会话的机制，其由RFC8829 JSEP：规范，定义了JavaScript API和信令交换的规范，以便在浏览器之间建立点对点的实时通信。

通过JSEP规范，我们可以了解到WebRTC SDP 会话描述状态机：

• 呼叫端通过调用 createOffer API 来创建提议 (offer)；
• 呼叫端使用这个 offer 通过 setLocalDescription API 来设置其本地配置；
• 呼叫端通过信令服务器（如 websocket）将提议 (offer) 传递至接收端；

为了完成 offer/answer 交换：

• 接收端收到了提议 (offer) 并调用 setRemoteDescription() 将其记录为远程描述；
• 接收端使用 createAnswer API 生成应答 (answer) ，使用 setLocalDescription API 来应用answer；
• 接收端通过信令服务器（如 websocket）将应答传递到呼叫端；

呼叫端接受到应答：

• 呼叫端调用 RTCPeerConnection.setRemoteDescription()将应答设定为远程描述，完成初始化。

三、WebRTC API 使用——媒体流传输

1. navigator.mediaDevices.getUserMedia(constraints)

   • 描述：请求访问音视频设备并获取本地媒体。
   • 示例：

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function(stream) {// 处理获取到的媒体流}).catch(function(error) {// 处理错误});

2. RTCPeerConnection(configuration)

   • 描述：创建一个 PeerConnection 对象，用于建立和管理点对点连接。
   • 示例：

var configuration = { iceServers: [{ urls: '192.168.1.1:19302' }] };
var peerConnection = new RTCPeerConnection(configuration);

3. peerConnection.addTrack(track, stream)

   • 描述：将音视频轨道添加到 PeerConnection 中。
   • 示例：

var localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
localStream.getTracks().forEach(function(track) {peerConnection.addTrack(track, localStream);
});

4. peerConnection.createOffer(options)

   • 描述：创建一个SDP提议 (offer)，用于发起连接。
   • 示例：

peerConnection.createOffer().then(function(offer) {return peerConnection.setLocalDescription(offer);}).then(function() {// 将 SDP offer 发送给远程端}).catch(function(error) {// 处理错误});

5. peerConnection.setLocalDescription(description)

   • 描述：将本地描述设置为提供的 SDP（Session Description Protocol）对象。
   • 示例：

var localDescription = // 从信令服务器获取的本地描述信息
peerConnection.setLocalDescription(localDescription)

6. peerConnection.setRemoteDescription(description)

   • 描述：将远程描述设置为提供的 SDP 对象。
   • 示例：

var remoteDescription = // 从信令服务器获取的远程描述信息
peerConnection.setRemoteDescription(remoteDescription)

7. peerConnection.addIceCandidate(candidate)

   • 描述：将 ICE（Interactive Connectivity Establishment）候选项添加到 PeerConnection 中。
   • 示例：

var iceCandidate = // 从信令服务器获取的 ICE 候选项
peerConnection.addIceCandidate(iceCandidate)

8. peerConnection.ontrack

   • 描述：当远程端添加媒体轨道时触发的事件处理函数。
   • 示例：

peerConnection.ontrack = function(event) {var remoteVideo = document.getElementById('remoteVideo');remoteVideo.srcObject = event.streams[0];
};

9. peerConnection.onicecandidate

   • 描述：当 ICE 候选项可用时触发的事件处理函数。
   • 示例：

peerConnection.onicecandidate = function(event) {if (event.candidate) {// 将 ICE 候选项发送给远程端}
};

10. peerConnection.onconnectionstatechange

    • 描述：当 PeerConnection 的连接状态发生变化时触发的事件处理函数。
    • 示例：

peerConnection.onconnectionstatechange = function(event) {if (peerConnection.connectionState === 'connected') {// 连接已建立} else if (peerConnection.connectionState === 'disconnected') {// 连接已断开} else if (peerConnection.connectionState === 'failed') {// 连接失败}
};

四、WebRTC API 使用——DataChannel

要在两个 WebRTC 端点之间直接传输非媒体流信息，需要使用 DataChannel API。DataChannel 允许在两个对等连接之间传输任意类型的数据，包括文本、图片等数据内容。
下面是一个使用 WebRTC DataChannel 在两个端点之间发送文字内容的详细代码实现：

1. 发送端代码（例如浏览器 A）：

// 创建 PeerConnection
var peerConnection = new RTCPeerConnection();
// 创建 DataChannel
var dataChannel = peerConnection.createDataChannel('textChannel');
// 事件处理：当 DataChannel 开启时
dataChannel.onopen = function() {// 发送文字内容dataChannel.send('Hello, WebRTC DataChannel!');
};// 事件处理：当 DataChannel 收到消息时
dataChannel.onmessage = function(event) {var receivedMessage = event.data;console.log('Received message:', receivedMessage);
};// 创建 SDP offer
peerConnection.createOffer().then(function(offer) {return peerConnection.setLocalDescription(offer);}).then(function() {// 将 SDP offer 发送给远程端var offer = peerConnection.localDescription;// 发送 offer 给远程端，例如通过信令服务器}).catch(function(error) {console.error('Error creating offer:', error);});

2. 接收端代码（例如浏览器 B）：

// 创建 PeerConnection
var peerConnection = new RTCPeerConnection();// 事件处理：当收到来自远程端的 SDP offer 时
function handleOffer(offer) {// 设置远程描述为 SDP offerpeerConnection.setRemoteDescription(offer).then(function() {// 创建 SDP answerreturn peerConnection.createAnswer();}).then(function(answer) {return peerConnection.setLocalDescription(answer);}).then(function() {// 将 SDP answer 发送给远程端var answer = peerConnection.localDescription;// 发送 answer 给远程端，例如通过信令服务器}).catch(function(error) {console.error('Error creating or setting local description:', error);});
}// 事件处理：当 PeerConnection 收到来自远程端的 DataChannel 时
peerConnection.ondatachannel = function(event) {var receivedDataChannel = event.channel;// 事件处理：当 DataChannel 开启时receivedDataChannel.onopen = function() {// 发送文字内容receivedDataChannel.send('Hi, WebRTC DataChannel!');};// 事件处理：当 DataChannel 收到消息时receivedDataChannel.onmessage = function(event) {var receivedMessage = event.data;console.log('Received message:', receivedMessage);};
};// 事件处理：当收到来自信令服务器的 SDP offer 时
var receivedOffer = // 从信令服务器获取的 SDP offer
handleOffer(receivedOffer);

在上述代码中，发送端创建了一个 DataChannel，并在 DataChannel 开启后发送文字内容。
接收端在 PeerConnection 上监听 “ondatachannel” 事件，当收到来自远程端的 DataChannel 时，设置相应的事件处理函数，并在 DataChannel 开启后发送文字内容。

五、WebRTC API 使用——RTCSessionDescription

举例RTCSessionDescription的数据结构，并对举例中的sdp行进行详细注释：

// RTCSessionDescription: sdp
{type: 'offer',sdp: // v=0: 版本号，表示SDP的版本。'v=0\r\n' +// 会话的所有者是"-"，会话标识为1234567890，IN表示使用的网络类型为Internet，IP4表示使用IPv4，192.168.0.1是会话的IP地址。'o=- 1234567890 1 IN IP4 192.168.0.1\r\n' +// 会话的主题或会议名称。's=Example SDP\r\n' +// 会话的时间描述，以秒为单位。t=0 0表示会话的持续时间是从0秒到0秒，即没有特定的时间限制。't=0 0\r\n' +// 表示音频和视频被分组在一起，一起传输。'a=group:BUNDLE audio video\r\n' +// 音频使用RTP传输，端口号是50000，SAVPF表示使用安全的RTP传输，111、103和104是音频编解码器的标识符。'm=audio 50000 RTP/SAVPF 111 103 104\r\n' +// 指定了媒体流的IP地址和网络类型。'c=IN IP4 192.168.0.1\r\n' +// 111是opus编解码器的标识符，48000表示采样率为48kHz，2表示声道数为双声道。'a=rtpmap:111 opus/48000/2\r\n' +// 103是ISAC编解码器的标识符，16000表示采样率为16kHz。'a=rtpmap:103 ISAC/16000\r\n' +// 104是ISAC编解码器的标识符，32000表示采样率为32kHz。'a=rtpmap:104 ISAC/32000\r\n' +// RTCP（实时传输控制协议）的连接信息，指定了RTCP的端口号。'a=rtcp:50001\r\n' +// 视频使用RTP传输，端口号是50002，SAVPF表示使用安全的RTP传输，100、101和102是视频编解码器的标识符。'm=video 50002 RTP/SAVPF 100 101 102\r\n' +// 媒体流的IP地址和网络类型。'c=IN IP4 192.168.0.1\r\n' +// 100是VP8编解码器的标识符，90000表示时钟频率。'a=rtpmap:100 VP8/90000\r\n' +// 101是VP9编解码器的标识符，90000表示时钟频率。'a=rtpmap:101 VP9/90000\r\n' +// 102是H264编解码器的标识符，90000表示时钟频率。'a=rtpmap:102 H264/90000\r\n' +// 指定了RTCP的端口号'a=rtcp:50003\r\n'
}

参考：

W3C WebRTC API：
https://www.w3.org/TR/webrtc/

RFC8829 JSEP：
https://datatracker.ietf.org/doc/html/rfc8829

WebRTC API：
https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API