当前位置：首页 > JavaScript

webrtc js实现

2026-03-14 22:16:29JavaScript

WebRTC JavaScript 实现基础

WebRTC（Web Real-Time Communication）是一种支持浏览器实时通信的开放框架。通过 JavaScript API 可以实现点对点的音视频、数据传输。以下是核心实现步骤：

建立连接的基本流程

webrtc js实现

获取本地媒体流（摄像头、麦克风）
创建 RTCPeerConnection 对象
交换 ICE 候选信息和 SDP 描述
建立连接后传输数据

获取本地媒体流

使用 navigator.mediaDevices.getUserMedia() 获取音视频权限并捕获流：

const constraints = { audio: true, video: true };
navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    localVideo.srcObject = stream; // 显示本地视频
    localStream = stream; // 保存流对象
  })
  .catch(error => console.error('Media error:', error));

创建对等连接

初始化 RTCPeerConnection 并处理候选信息：

webrtc js实现

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

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

// 处理远程流
peerConnection.ontrack = event => {
  remoteVideo.srcObject = event.streams[0];
};

// ICE 候选信息处理
peerConnection.onicecandidate = event => {
  if (event.candidate) {
    // 发送候选信息给远端（通常通过信令服务器）
    sendCandidateToRemote(event.candidate);
  }
};

信令交换

通过信令服务器交换 SDP 和候选信息（示例代码仅展示核心逻辑）：

// 创建 offer
peerConnection.createOffer()
  .then(offer => peerConnection.setLocalDescription(offer))
  .then(() => {
    // 发送 offer SDP 给远端
    sendOfferToRemote(peerConnection.localDescription);
  });

// 接收远端 answer
function handleRemoteAnswer(answer) {
  peerConnection.setRemoteDescription(answer);
}

// 处理远端候选信息
function handleRemoteCandidate(candidate) {
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

数据传输

建立数据通道（需在创建 offer 前设置）：

const dataChannel = peerConnection.createDataChannel('chat');
dataChannel.onmessage = event => console.log('Received:', event.data);
dataChannel.onopen = () => dataChannel.send('Hello!');

完整示例结构

<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>

<script>
  let localStream, peerConnection;

  async function startCall() {
    localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    document.getElementById('localVideo').srcObject = localStream;

    peerConnection = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

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

    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    // 通过信令服务器发送 offer
  }
</script>