Что такое WebRTC

WebRTC позволяет передавать видео, звук и произвольные данные напрямую между браузерами (peer-to-peer). На нём строятся видеозвонки, демонстрация экрана, онлайн-игры и передача файлов. Основных API три.

  • getUserMedia - поток с камеры и микрофона (MediaStream).
  • RTCPeerConnection - зашифрованное соединение между двумя браузерами.
  • RTCDataChannel - канал для текста или бинарных данных.

Важный момент: два пира сами друг друга не находят. Чтобы соединиться, им нужно обменяться небольшими сообщениями (offer, answer, ICE-кандидаты). Этот этап называется signaling, и в стандарт он не входит: вы строите его сами, обычно на WebSocket. А вот медиа шифруется всегда (DTLS-SRTP).

getUserMedia: камера и микрофон

navigator.mediaDevices.getUserMedia() запрашивает разрешение у пользователя и возвращает MediaStream. Поток состоит из одного или нескольких треков (видео, аудио). Его отдают в свойство srcObject элемента <video>.

javascript
const localVideo = document.querySelector('#local');

let stream;
try {
  stream = await navigator.mediaDevices.getUserMedia({
    video: { width: { ideal: 1280 }, height: { ideal: 720 } },
    audio: { echoCancellation: true },
  });
  localVideo.srcObject = stream;
  localVideo.muted = true;
  await localVideo.play();
} catch (err) {
  if (err.name === 'NotAllowedError') console.log('Permission denied');
  else if (err.name === 'NotFoundError') console.log('No camera found');
  else throw err;
}

// later: release the camera
stream.getTracks().forEach((track) => track.stop());
  • Если разрешение отклонено, бросается NotAllowedError, если устройства нет - NotFoundError.
  • Закончив, вызывайте stop() у каждого трека, иначе индикатор камеры продолжит гореть.
  • Список устройств даёт navigator.mediaDevices.enumerateDevices().

⚠️ getUserMedia работает только в защищённом контексте (https:// или localhost).

💡 Локальное превью делайте muted, иначе будет эхо.

RTCPeerConnection, offer и answer

Соединение устанавливается текстами SDP (Session Description Protocol). SDP описывает медиапотоки, кодеки и ключи шифрования. Порядок такой: