webRTC实现P2P音视频通话（无服务端）

**WebRTC 实现 P2P 音视频通话**

在 WebRTC 的世界里，P2P (点对点) 通话是最基本也是最重要的功能之一。通过 P2P 通话，我们可以实现无服务端的音视频通话，这样就能大大减少网络带宽和服务器负载。

**WebRTC 架构**

首先，让我们来看一下 WebRTC 的基本架构：

* **浏览器**:用户使用的浏览器，例如 Chrome、Firefox 等。
* **RTCPeerConnection**:这是一个用于建立 P2P 连接的对象，它负责管理连接的生命周期。
* **MediaStreamTrack**:这是一个用于处理媒体流（音视频）的对象。
* **RTCSessionDescription**:这是一个用于描述会话信息的对象。

**实现步骤**

下面是实现 P2P 音视频通话的基本步骤：

1. **创建 RTCPeerConnection 对象**

javascript const pc = new RTCPeerConnection();
 

javascript navigator.mediaDevices.getUserMedia({ video: true, audio: true })
 .then(stream => {
 // 将媒体流添加到 RTCPeerConnection 中 stream.getTracks().forEach(track => pc.addTrack(track, stream));
 });
 

javascript pc.createOffer()
 .then(offer => {
 // 将 Offer 转换为 SessionDescription const sessionDescription = new RTCSessionDescription({ type: 'offer', sdp: offer });
 // 设置 Offer pc.setLocalDescription(sessionDescription);
 });
 

javascript pc.createAnswer()
 .then(answer => {
 // 将 Answer 转换为 SessionDescription const sessionDescription = new RTCSessionDescription({ type: 'answer', sdp: answer });
 // 设置 Answer pc.setLocalDescription(sessionDescription);
 });
 

javascript pc.oniceconnectionstatechange = event => {
 if (pc.iceConnectionState === 'connected') {
 console.log('已建立连接');
 }
 };
 

javascript// 创建 RTCPeerConnection 对象const pc = new RTCPeerConnection();

// 添加媒体流navigator.mediaDevices.getUserMedia({ video: true, audio: true })
 .then(stream => {
 // 将媒体流添加到 RTCPeerConnection 中 stream.getTracks().forEach(track => pc.addTrack(track, stream));
 // 创建 Offer pc.createOffer()
 .then(offer => {
 // 将 Offer 转换为 SessionDescription const sessionDescription = new RTCSessionDescription({ type: 'offer', sdp: offer });
 // 设置 Offer pc.setLocalDescription(sessionDescription);
 // 发送 Offer pc.onicecandidate = event => {
 if (event.candidate) {
 console.log('发送 Offer:', event.candidate);
 }
 };
 });
 // 创建 Answer pc.createAnswer()
 .then(answer => {
 // 将 Answer 转换为 SessionDescription const sessionDescription = new RTCSessionDescription({ type: 'answer', sdp: answer });
 // 设置 Answer pc.setLocalDescription(sessionDescription);
 // 接收 Answer pc.onicecandidate = event => {
 if (event.candidate) {
 console.log('接收 Answer:', event.candidate);
 }
 };
 });
 });

// 建立连接pc.oniceconnectionstatechange = event => {
 if (pc.iceConnectionState === 'connected') {
 console.log('已建立连接');
 }
};