JavaScript中的WebRTC基础入门_javascript实时通信

WebRTC通过MediaDevices、RTCPeerConnection和RTCDataChannel实现浏览器间音视频通话与数据传输。首先调用getUserMedia获取本地媒体流并显示，然后创建RTCPeerConnection实例配置STUN/TURN服务器，添加媒体流并生成offer进行信令交换，对方回应answer完成连接协商，最终通过ICE建立P2P通信链路；同时可创建DataChannel传输文本或文件等任意数据，实现低延迟实时交互。

WebRTC（Web Real-Time Communication）是一项让浏览器之间直接进行音视频通话和数据传输的技术，无需插件或第三方应用。在JavaScript中使用WebRTC，可以快速搭建实时通信功能，比如视频会议、语音聊天或文件共享。

1. WebRTC的核心组件

要理解WebRTC的基础，需要掌握它的三个关键API：

• MediaDevices.getUserMedia()：用于获取用户的摄像头和麦克风权限，获取音视频流。
• RTCPeerConnection：负责建立两个浏览器之间的安全连接，并传输音视频或数据。
• RTCDataChannel：允许在连接的两端传输任意数据，如文本、文件等，类似于WebSocket但点对点。

这些组件共同构成了WebRTC的通信能力。

2. 获取本地媒体流

开始前，先让浏览器访问用户的摄像头和麦克风：

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

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // 将视频流显示在页面上
    document.getElementById('localVideo').srcObject = stream;
  })
  .catch(err => {
    console.error("无法获取媒体设备:", err);
  });

这段代码请求音视频权限，并将获取到的流绑定到video标签上播放。注意必须在HTTPS环境下运行，否则浏览器会阻止访问媒体设备。

3. 建立RTCPeerConnection连接

真正实现通信的是RTCPeerConnection。它需要交换“信令”信息——即双方的连接配置，包括IP、端口、编解码方式等。虽然WebRTC本身不规定信令传输方式，但通常用WebSocket或Socket.IO来传递。

以下是一个简单的连接示例：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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

// 添加本地流
pc.addStream(localStream);

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

// 创建并发送offer
pc.createOffer()
  .then(offer => pc.setLocalDescription(offer))
  .then(() => {
    // 发送offer给对方（通过信令服务器）
    signaling.send(pc.localDescription);
  });

对方收到offer后，需设置远端描述，创建answer并返回：

pc.setRemoteDescription(offer)
  .then(() => pc.createAnswer())
  .then(answer => pc.setLocalDescription(answer))
  .then(() => signaling.send(pc.localDescription));

当双方都设置了彼此的描述后，ICE框架会尝试建立P2P连接。

4. 处理NAT和防火墙：STUN与TURN

由于大多数设备位于路由器后（私有IP），直接连接困难。WebRTC依赖STUN服务器获取公网地址，若仍无法连接，则使用TURN服务器中继数据。

• STUN（Session Traversal Utilities for NAT）：帮助发现公网IP和端口。
• TURN（Traversal Using Relays around NAT）：当P2P不通时，作为中转服务器转发数据。

开发阶段可用Google的免费STUN服务器：stun:stun.l.google.com:19302。生产环境建议部署自己的STUN/TURN服务（如Coturn）。

5. 使用RTCDataChannel传输数据

除了音视频，你还可以用RTCDataChannel发送任意数据：

const channel = pc.createDataChannel("chat");
channel.onmessage = event => {
  console.log("收到消息:", event.data);
};

// 发送消息
channel.send("Hello P2P!");

对方需监听ondatachannel事件接收通道：

pc.ondatachannel = event => {
  const receiveChannel = event.channel;
  receiveChannel.onmessage = e => {
    console.log("接收到:", e.data);
  };
};

基本上就这些。WebRTC看似复杂，但拆解为获取媒体、建立连接、交换信令、传输数据几个步骤后，逻辑就很清晰了。实际项目中还需处理网络变化、错误重连、兼容性等问题，但入门的关键是动手实践一个简单视频通话。

以上就是JavaScript中的WebRTC基础入门_javascript实时通信的详细内容，更多请关注php中文网其它相关文章！