如何实现一个基于WebRTC的纯JavaScript点对点通信应用？-js教程-PHP中文网

如何实现一个基于WebRTC的纯JavaScript点对点通信应用？

狼影

发布： 2025-10-08 22:02:02

原创

349人浏览过

实现WebRTC点对点通信需先建立信令机制交换SDP和ICE候选者，再通过RTCPeerConnection建立连接，使用RTCDataChannel传输数据或addTrack传输音视频流。

如何实现一个基于webrtc的纯javascript点对点通信应用？

要实现一个基于WebRTC的纯JavaScript点对点通信应用，核心是利用WebRTC的P2P能力在浏览器之间直接传输音视频或数据，无需经过服务器中转。虽然信令过程需要服务器协助交换连接信息，但实际媒体流或数据是点对点传输的。以下是关键步骤和实现思路。

1. 理解WebRTC基本组件

WebRTC依赖三个主要接口：

RTCPeerConnection：用于建立点对点连接，传输音视频或数据流。
RTCDataChannel：可在RTCPeerConnection上创建数据通道，用于发送文本、文件等任意数据。
getUserMedia：获取本地摄像头和麦克风权限，用于音视频通话。

注意：WebRTC本身不负责信令（如谁要连接谁），你需要用WebSocket、HTTP或其他方式自行实现信令交换。

2. 建立信令机制

两个浏览器要建立连接，必须交换以下信息：

立即学习“Java免费学习笔记（深入）”；

SDP（会话描述协议）：描述各自的媒体能力（如支持的编解码器、分辨率等）。
ICE候选者：网络路径信息，帮助穿透NAT和防火墙。

你可以使用Node.js + Socket.IO或原生WebSocket搭建简单信令服务器。例如：

// 信令服务器（Node.js + WebSocket 示例）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', message => {
    // 将消息转发给其他客户端
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

登录后复制

前端通过WebSocket发送和接收offer、answer和ice candidates。

造点AI

夸克 · 造点AI

325

查看详情

3. 创建RTCPeerConnection并交换信令

假设A发起连接，B接受：

A调用createOffer()生成offer，设置本地描述，并通过信令发送给B。
B收到offer后，调用setRemoteDescription()，再调用createAnswer()生成answer，返回给A。
双方通过onicecandidate事件收集ICE候选者并发送给对方。

示例代码片段：

const pc = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

// 创建数据通道（可选）
const dataChannel = pc.createDataChannel('chat');
dataChannel.onmessage = e => console.log('收到消息:', e.data);

// 收到远程ICE候选者
pc.onicecandidate = e => {
  if (e.candidate) {
    socket.send(JSON.stringify({ candidate: e.candidate }));
  }
};

// 接收offer或answer
socket.onmessage = e => {
  const message = JSON.parse(e.data);
  if (message.sdp) {
    pc.setRemoteDescription(new RTCSessionDescription(message.sdp))
      .then(() => {
        if (message.sdp.type === 'offer') {
          pc.createAnswer().then(desc => {
            pc.setLocalDescription(desc);
            socket.send(JSON.stringify({ sdp: desc }));
          });
        }
      });
  } else if (message.candidate) {
    pc.addIceCandidate(new RTCIceCandidate(message.candidate));
  }
};

登录后复制

4. 传输数据或音视频

如果只是传数据，使用RTCDataChannel即可。如果是音视频：

调用navigator.mediaDevices.getUserMedia()获取本地媒体流。
将流中的track添加到RTCPeerConnection：pc.addTrack(stream.getTracks()[0], stream)。
在对方的ontrack事件中获取远程流并绑定到<video>标签。

示例：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    localVideo.srcObject = stream;
    stream.getTracks().forEach(track => pc.addTrack(track, stream));
  });

pc.ontrack = e => {
  remoteVideo.srcObject = e.streams[0];
};

登录后复制

基本上就这些。WebRTC的P2P通信看似复杂，但只要理清信令流程和连接生命周期，用纯JavaScript也能快速搭建出功能完整的点对点应用。关键是确保SDP和ICE候选者能正确交换，且STUN服务器可用。开发时建议先做文本聊天功能，再扩展音视频。

以上就是如何实现一个基于WebRTC的纯JavaScript点对点通信应用？的详细内容，更多请关注php中文网其它相关文章！