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 基础入门_