当前位置：首页 > JavaScript

js实现webrtc

2026-03-15 07:46:59JavaScript

WebRTC 基础概念

WebRTC（Web Real-Time Communication）是一种支持浏览器或移动应用进行实时音视频通信的开源技术。它无需插件，直接通过 JavaScript API 实现点对点（P2P）连接。

核心 API 模块

RTCPeerConnection：管理端到端连接，处理音视频流传输。
RTCDataChannel：支持端到端任意数据传递（如文本、文件）。
MediaStream（getUserMedia）：获取摄像头、麦克风等媒体设备权限。

实现步骤

获取本地媒体流

通过 navigator.mediaDevices.getUserMedia 请求用户授权并捕获音视频流：

const constraints = { audio: true, video: true };
navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    const localVideo = document.getElementById('localVideo');
    localVideo.srcObject = stream;
  })
  .catch(error => console.error('Media access denied:', error));

创建 RTCPeerConnection

初始化连接对象并添加本地流：

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

// 添加本地流到连接
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// 监听远程流
peerConnection.ontrack = event => {
  const remoteVideo = document.getElementById('remoteVideo');
  remoteVideo.srcObject = event.streams[0];
};

处理 ICE 候选

收集网络候选地址（NAT穿透）并发送给对方：

peerConnection.onicecandidate = event => {
  if (event.candidate) {
    // 通过信令服务器发送候选（示例：使用Socket.IO）
    socket.emit('ice-candidate', event.candidate);
  }
};

// 接收对方候选
socket.on('ice-candidate', candidate => {
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
});

信令交换

通过信令服务器交换 SDP 描述（Offer/Answer）：

js实现webrtc

// 发起方创建Offer
peerConnection.createOffer()
  .then(offer => peerConnection.setLocalDescription(offer))
  .then(() => {
    socket.emit('offer', peerConnection.localDescription);
  });

// 接收方处理Offer并回复Answer
socket.on('offer', offer => {
  peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
    .then(() => peerConnection.createAnswer())
    .then(answer => peerConnection.setLocalDescription(answer))
    .then(() => {
      socket.emit('answer', peerConnection.localDescription);
    });
});

// 发起方处理Answer
socket.on('answer', answer => {
  peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
});

完整示例代码

<!DOCTYPE html>
<html>
<body>
  <video id="localVideo" autoplay muted></video>
  <video id="remoteVideo" autoplay></video>
  <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
  <script>
    const socket = io('https://your-signaling-server.com');
    const peerConnection = new RTCPeerConnection({ 
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] 
    });

    // 获取媒体流并设置连接
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        document.getElementById('localVideo').srcObject = stream;
        stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
      });

    // 信令交换逻辑（如上述代码）
  </script>
</body>
</html>