WebRTC

1. WebRTC 概述

2. getUserMedia

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const video = document.querySelector('#localVideo');
video.srcObject = stream;
await video.play();

约束条件

const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: 'user' },
  audio: { echoCancellation: true, noiseSuppression: true },
});

屏幕共享

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });

3. RTCPeerConnection

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

// 添加本地流
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
stream.getTracks().forEach((t) => pc.addTrack(t, stream));

// 接收远端流
pc.ontrack = (e) => {
  document.getElementById('remote').srcObject = e.streams[0];
};

// ICE 候选
pc.onicecandidate = (e) => {
  if (e.candidate) sendSignal({ candidate: e.candidate });
};

// 交换 SDP
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

4. RTCDataChannel

const channel = pc.createDataChannel('chat', { ordered: true });
channel.onopen = () => channel.send('Hello!');
channel.onmessage = (e) => console.log('收到:', e.data);