当前位置：首页 > HTML

h5 实现视频通话

2026-01-13 22:58:11HTML

H5 实现视频通话的技术方案

H5（HTML5）实现视频通话主要依赖WebRTC（Web Real-Time Communication）技术。以下是实现步骤和关键代码示例：

获取用户媒体设备权限

使用navigator.mediaDevices.getUserMedia获取摄像头和麦克风的访问权限：

const constraints = {
  audio: true,
  video: { width: 1280, height: 720 }
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    const localVideo = document.getElementById('localVideo');
    localVideo.srcObject = stream;
  })
  .catch(error => {
    console.error('Error accessing media devices:', error);
  });

建立RTCPeerConnection

创建RTCPeerConnection实例并添加本地媒体流：

const configuration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    // 可添加TURN服务器用于NAT穿透
  ]
};

const peerConnection = new RTCPeerConnection(configuration);

// 添加本地流到连接中
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

处理ICE候选和信令交换

监听ICE候选事件并通过信令服务器交换：

peerConnection.onicecandidate = event => {
  if (event.candidate) {
    // 通过信令服务器发送候选
    signalingServer.send({
      type: 'candidate',
      candidate: event.candidate
    });
  }
};

// 接收远程候选
signalingServer.on('candidate', candidate => {
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
});

创建和应答offer/answer

发起方创建offer：

peerConnection.createOffer()
  .then(offer => {
    return peerConnection.setLocalDescription(offer);
  })
  .then(() => {
    // 通过信令服务器发送offer
    signalingServer.send({
      type: 'offer',
      sdp: peerConnection.localDescription
    });
  });

接收方处理offer并创建answer：

signalingServer.on('offer', offer => {
  peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
    .then(() => {
      return peerConnection.createAnswer();
    })
    .then(answer => {
      return peerConnection.setLocalDescription(answer);
    })
    .then(() => {
      // 通过信令服务器发送answer
      signalingServer.send({
        type: 'answer',
        sdp: peerConnection.localDescription
      });
    });
});

处理远程媒体流

监听远程流并显示：

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

信令服务器实现

信令服务器可以使用WebSocket实现基本功能：

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

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