JavaScriptWebRTC_点对点视频通话实现

WebRTC通过getUserMedia获取音视频流，RTCPeerConnection建立P2P连接，并借助信令服务器交换SDP与ICE候选，实现浏览器间实时音视频通信。

WebRTC（Web Real-Time Communication）是一种支持浏览器之间直接进行音视频通话和数据传输的技术，无需中间服务器转发媒体流。实现点对点视频通话的核心在于建立P2P连接，这主要依赖于 getUserMedia 获取本地媒体、RTCPeerConnection 建立连接以及信令机制交换会话描述。

获取本地音视频流

要开启视频通话，第一步是获取用户的摄像头和麦克风权限。

• video: true 请求摄像头画面
• audio: true 请求麦克风输入

成功后返回一个 MediaStream 对象，可赋值给页面中的 video 元素进行预览：

const localVideo = document.getElementById('localVideo');
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    localVideo.srcObject = stream;
    localStream = stream; // 保存供后续使用
  })
  .catch(err => console.error('无法获取媒体设备:', err));

创建 RTCPeerConnection 实例

每个参与通话的客户端都需要创建一个 RTCPeerConnection 对象，它是 WebRTC 的核心，负责音视频流的加密传输与网络穿透。

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

通常需配置 STUN/TURN 服务器帮助穿越 NAT 和防火墙：

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

将本地流添加到连接中，以便发送给对方：

localStream.getTracks().forEach(track => {
  peerConnection.addTrack(track, localStream);
});

通过信令服务交换连接信息

WebRTC 本身不提供信令机制，需借助外部方式（如 WebSocket、HTTP）传递 SDP 和 ICE 候选地址。

android rtsp流媒体播放介绍 中文WORD版

本文档主要讲述的是android rtsp流媒体播放介绍；实时流协议（RTSP）是应用级协议，控制实时数据的发送。RTSP提供了一个可扩展框架，使实时数据，如音频与视频，的受控、点播成为可能。数据源包括现场数据与存储在剪辑中数据。该协议目的在于控制多个数据发送连接，为选择发送通道，如UDP、组播UDP与TCP，提供途径，并为选择基于RTP上发送机制提供方法。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

0

查看详情

流程如下：

• 调用 createOffer 生成本地提议（offer）
• 设置本地描述并发送 offer 给对方
• 对方收到后设置为远程描述，调用 createAnswer 生成应答（answer）
• 将 answer 发送回发起方，双方都设置对应的远程描述

同时收集 ICE 候选地址，通过信令通道发送给对方：

peerConnection.onicecandidate = event => {
  if (event.candidate) {
    signalingChannel.send({
      type: 'candidate',
      candidate: event.candidate
    });
  }
};

对方收到候选信息后添加到自己的连接中：

peerConnection.addIceCandidate(new RTCIceCandidate(candidate));

接收远程视频流

当连接建立成功，远端媒体流会通过 ontrack 事件送达：

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

此时即可看到对方的画面，完成双向音视频通信。

基本上就这些关键步骤。虽然 WebRTC 是点对点通信，但初期必须依赖信令服务器协调连接。实际部署时还需处理错误、重连、兼容性等问题，不过现代浏览器已广泛支持该技术。

以上就是JavaScriptWebRTC_点对点视频通话实现的详细内容，更多请关注php中文网其它相关文章！