HTML5WebRTC怎么用_HTML5WebRTC实现视频通话的原理与代码示例-html教程-PHP中文网

HTML5WebRTC怎么用_HTML5WebRTC实现视频通话的原理与代码示例

絕刀狂花

发布： 2025-11-22 23:42:06

原创

201人浏览过

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

html5webrtc怎么用_html5webrtc实现视频通话的原理与代码示例

WebRTC（Web Real-Time Communication）是HTML5提供的一个强大API，允许浏览器之间进行实时音视频通信，无需插件或第三方软件。它广泛应用于视频通话、在线会议、远程协助等场景。下面介绍其基本原理和实现视频通话的代码示例。

WebRTC 实现视频通话的基本原理

WebRTC 的核心在于让两个浏览器直接建立P2P连接传输音视频数据，主要依赖以下三个关键接口：

getUserMedia：获取本地摄像头和麦克风的音视频流。
RTCPeerConnection：建立并管理两个客户端之间的点对点连接，用于传输音视频数据。
RTCDataChannel：可选，用于传输任意数据（如文本、文件）。

由于浏览器无法直接发现彼此，需要借助信令服务器（Signaling Server）来交换连接信息（如会话描述和网络候选）。信令机制本身不由WebRTC定义，通常使用WebSocket、Socket.IO等实现。

实现步骤与代码示例

以下是一个简化版的双人视频通话实现流程，包含前端HTML/JavaScript和简单的信令逻辑。

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

1. 获取本地媒体流

使用 getUserMedia 请求访问摄像头和麦克风：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    document.getElementById('localVideo').srcObject = stream;
    localStream = stream;
  })
  .catch(err => console.error('无法获取媒体流：', err));

登录后复制

2. 创建 RTCPeerConnection 并添加流

初始化连接对象，并将本地流添加进去：

Project IDX

Google推出的一个实验性的AI辅助开发平台

113

查看详情

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

// 添加本地流中的轨道
localStream.getTracks().forEach(track => {
  peerConnection.addTrack(track, localStream);
});

登录后复制

3. 设置事件监听，处理ICE候选

ICE候选是网络路径信息，需通过信令服务器发送给对方：

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

登录后复制

4. 处理远程流（对方视频）

当连接接收到远程音视频流时，绑定到视频元素：

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

登录后复制

5. 信令交互：交换SDP会话描述

创建并发送本地offer：

async function createOffer() {
  const offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offer);
  signalingServer.send({ type: 'offer', sdp: offer });
}

登录后复制

接收并处理远端offer，返回answer：

signalingServer.onmessage = async (message) => {
  if (message.type === 'offer') {
    await peerConnection.setRemoteDescription(new RTCSessionDescription(message.sdp));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    signalingServer.send({ type: 'answer', sdp: answer });
  } else if (message.type === 'answer') {
    await peerConnection.setRemoteDescription(new RTCSessionDescription(message.sdp));
  } else if (message.type === 'candidate') {
    peerConnection.addIceCandidate(new RTCIceCandidate(message.candidate));
  }
};

登录后复制

搭建信令服务器（Node.js + WebSocket 示例）

使用WebSocket中转连接信息：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', data => {
    const message = JSON.parse(data);
    // 转发消息给其他客户端
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

登录后复制