JavaScript如何实现WebRTC实时音视频通信开发？

WebRTC是一套支持浏览器之间直接进行实时音视频和数据传输的技术标准，不需要安装额外插件，通过JavaScript调用相关API就能实现端到端的实时通信能力。目前主流的现代浏览器都已经原生支持WebRTC的核心特性，开发者可以基于它快速开发视频会议、在线客服、远程协作等场景的功能。

WebRTC实时音视频开发核心流程

完整的WebRTC音视频通信需要两个客户端配合完成，整体流程可以分为以下几个关键步骤：

• 获取本地音视频媒体流
• 创建RTCPeerConnection对等连接对象
• 交换信令信息（SDP描述、ICE候选地址）
• 建立P2P连接并传输媒体流
• 处理连接状态和错误处理

获取本地音视频流

首先需要调用getUserMediaAPI获取用户本地的摄像头和麦克风权限，得到媒体流之后可以绑定到本地的video元素上预览。

// 获取本地音视频流
async function getLocalStream() {
  try {
    // 请求摄像头和麦克风权限，获取媒体流
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    // 将本地流绑定到预览元素
    const localVideo = document.getElementById('localVideo');
    localVideo.srcObject = stream;
    return stream;
  } catch (error) {
    console.error('获取本地媒体流失败:', error);
    return null;
  }
}

创建对等连接并交换信令

RTCPeerConnection是WebRTC实现点对点连接的核心对象，两个客户端需要分别创建该对象，再通过信令服务器交换SDP（会话描述协议）和ICE（交互式连接建立）候选地址，才能完成连接的建立。

以下是发起端创建提议并发送SDP的示例代码：

// 创建对等连接对象
const peerConnection = new RTCPeerConnection({
  iceServers: [
    // 使用公共STUN服务器，帮助获取公网地址
    { urls: 'stun:stun.l.google.com:19302' }
  ]
});

// 将本地流添加到对等连接中
const localStream = await getLocalStream();
localStream.getTracks().forEach(track => {
  peerConnection.addTrack(track, localStream);
});

// 创建提议SDP
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

// 这里需要将offer通过信令服务器发送给对端，示例代码省略信令发送逻辑
// sendSignalingMessage({ type: 'offer', sdp: offer });

对端收到offer之后，需要先设置远端的SDP描述，再创建应答SDP返回给发起端：

// 对端处理收到的offer
async function handleOffer(offerSdp) {
  const peerConnection = new RTCPeerConnection({
    iceServers: [
      { urls: 'stun:stun.l.google.com:19302' }
    ]
  });
  // 设置远端SDP描述
  await peerConnection.setRemoteDescription(new RTCSessionDescription(offerSdp));
  // 创建应答SDP
  const answer = await peerConnection.createAnswer();
  await peerConnection.setLocalDescription(answer);
  // 将answer通过信令服务器返回给发起端
  // sendSignalingMessage({ type: 'answer', sdp: answer });
  return peerConnection;
}

处理ICE候选地址

ICE候选地址用于帮助两个客户端找到可用的网络路径，当peerConnection生成新的ICE候选时，需要将其通过信令服务器发送给对端，对端再调用addIceCandidate方法添加候选地址。

// 监听ICE候选生成事件
peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    // 将ICE候选发送给对端，省略信令发送逻辑
    // sendSignalingMessage({ type: 'ice_candidate', candidate: event.candidate });
  }
};

// 对端收到ICE候选后添加
async function handleIceCandidate(candidate) {
  try {
    await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
  } catch (error) {
    console.error('添加ICE候选失败:', error);
  }
}

接收远端流并渲染

当对等连接成功接收到对端的媒体流时，会触发ontrack事件，此时可以将远端的流绑定到对应的video元素上展示。

// 监听远端流到达事件
peerConnection.ontrack = (event) => {
  const remoteVideo = document.getElementById('remoteVideo');
  // 将远端流赋值给video元素
  remoteVideo.srcObject = event.streams[0];
};

常见问题与注意事项

• WebRTCAPI需要在HTTPS环境或者localhost本地环境下才能正常使用，普通HTTP环境会直接报错
• 如果两端处于不同的内网环境，需要部署TURN服务器作为中继，否则可能无法建立直接连接
• 信令服务器不属于WebRTC标准的一部分，开发者可以选择WebSocket等任意技术实现信令的转发
• 需要处理用户拒绝媒体权限、网络断开等异常场景，提升功能的稳定性

JavaScriptWebRTC实时音视频音视频通信getUserMedia修改时间：2026-07-02 03:06:33