基于WebRTC的视频会议系统（2）-ZHD的小窝

RTCPeerConnection是WebRTC中的核心API之一，它用于在浏览器之间建立点对点（P2P）的音视频通信。以下是RTCPeerConnection的基本用法：

一、创建RTCPeerConnection对象

首先，需要创建一个RTCPeerConnection对象。在创建时，可以传递一个包含服务器配置信息的对象作为参数，这个参数通常用于指定STUN和TURN服务器的地址，但在某些情况下也可以为null或省略。

const pc = new RTCPeerConnection(configuration);

二、添加本地媒体流

接下来，需要将本地的音视频流添加到RTCPeerConnection对象中。这通常通过调用getUserMedia()方法获取本地媒体流，然后将其添加到RTCPeerConnection中。

navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(function(localStream) {
    pc.addStream(localStream);
}).catch(function(error) {
    console.error("Error accessing media devices.", error);
});

三、设置ICE候选者

ICE（Interactive Connectivity Establishment）协议用于WebRTC的NAT穿越和网络协商。在建立连接的过程中，RTCPeerConnection会收集可能的网络连接路径（称为ICE候选者），并将它们发送给远程的RTCPeerConnection对象。

pc.onicecandidate = function(event) {
    if (event.candidate) {
        // 将候选者发送给远程的RTCPeerConnection
        // 通常通过信令服务器进行发送
    }
};

四、设置远程媒体流

当远程的RTCPeerConnection对象接收到ICE候选者并成功建立连接后，它会将远程的音视频流发送给本地的RTCPeerConnection对象。此时，可以通过监听onaddstream事件来处理远程音视频流。

pc.onaddstream = function(event) {
    const remoteStream = event.stream;
    // 处理远程音视频流，例如将其显示在video元素中
};

五、创建和交换SDP

SDP（Session Description Protocol）用于描述多媒体会话的参数。在WebRTC中，通过交换SDP来完成对等节点之间的音视频格式、编解码器等参数的协商。

创建offer：本地的RTCPeerConnection对象创建一个包含本地描述信息的SDP（称为offer），并将其发送给远程的RTCPeerConnection对象。

pc.createOffer().then(function(offer) {
    pc.setLocalDescription(offer);
    // 将offer发送给远程的RTCPeerConnection
    // 通常通过信令服务器进行发送
}).catch(function(error) {
    console.error("Error creating offer.", error);
});

设置远程描述信息并创建answer：远程的RTCPeerConnection对象接收到offer后，设置远程描述信息，并根据offer创建一个应答（answer），然后将其发送给本地的RTCPeerConnection对象。

// 远程端代码示例
const remotePc = new RTCPeerConnection();

remotePc.setRemoteDescription(receivedOffer).then(function() {
    return remotePc.createAnswer();
}).then(function(answer) {
    remotePc.setLocalDescription(answer);
    // 将answer发送给本地的RTCPeerConnection
    // 通常通过信令服务器进行发送
}).catch(function(error) {
    console.error("Error creating answer.", error);
});

设置本地描述信息：本地的RTCPeerConnection对象接收到answer后，设置本地描述信息，此时双方已经完成了SDP的交换和协商。

// 本地端代码示例（接收answer）
pc.setRemoteDescription(receivedAnswer).then(function() {
    // 连接协商完成，可以开始音视频通信
}).catch(function(error) {
    console.error("Error setting remote description.", error);
});

六、监听连接状态变化

可以通过监听oniceconnectionstatechange事件来检测ICE连接状态的变化。当ICE连接状态变为connected时，表示已经成功建立了P2P连接。

pc.oniceconnectionstatechange = function(event) {
    if (pc.iceConnectionState === 'connected') {
        console.log("ICE connection state is connected.");
        // 连接成功建立后的操作
    }
};

七、其他功能和属性

除了上述基本用法外，RTCPeerConnection还提供了其他事件、方法和属性来扩展其功能。例如：

pc.onicecandidateerror：处理ICE候选者错误的事件。
pc.onnegotiationneeded：在需要重新协商连接时触发的事件。
pc.ondatachannel：处理数据通道相关操作的事件。
pc.createDataChannel()：创建数据通道，用于传输文件、文本等二进制数据。
pc.addIceCandidate()：添加ICE候选者。
pc.ontrack：处理轨道相关操作的事件。
pc.localDescription：获取本地描述信息。
pc.remoteDescription：获取远程描述信息。
pc.iceConnectionState：获取ICE连接状态。

综上所述，RTCPeerConnection是WebRTC中非常重要的API之一，它提供了建立点对点的实时音视频通信的功能，并通过一系列的事件、方法和属性来实现自定义和扩展。

目录CONTENT

基于WebRTC的视频会议系统（2）