WebRTC: как устроена технология для видеозвонков прямо в браузере

WebRTC (Web Real-Time Communication) — это открытый стандарт, который позволяет браузерам и мобильным приложениям устанавливать прямое P2P-соединение для передачи аудио, видео и произвольных данных без установки плагинов или стороннего ПО.


Зачем нужен WebRTC?

  • Видеозвонки и конференции (Zoom, Google Meet, Discord)
  • Файлообмен без загрузки на сервер
  • Онлайн-трансляции с низкой задержкой
  • Игры и совместные редакторы в реальном времени


Как это работает технически

  • getUserMedia — запрашивает доступ к камере и микрофону.
  • RTCPeerConnection — устанавливает защищённое соединение между браузерами.
  • RTCDataChannel — передаёт любые данные (текст, файлы, игровые команды) с низкой задержкой.


Почему не обойтись без сервера?

Хотя WebRTC и P2P, для первого рукопожатия (обмена метаданными — SDP и ICE-кандидатами) всё равно нужен сигнальный сервер. Он не передаёт медиа-трафик, а только помогает клиентам найти друг друга. После установления соединения трафик идёт напрямую.


Проблема NAT и решение

Большинство пользователей сидят за NAT, поэтому прямое соединение невозможно. Для преодоления используются STUN и TURN серверы:

  • STUN — помогает клиенту узнать свой публичный IP и порт.
  • TURN — ретранслирует трафик, когда прямое соединение не удаётся (дорого, но надёжно).


Код «Hello, world!» — видеозвонок за 30 строк
JavaScript: 
// 1. Запрашиваем камеру и микрофон
const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
// 2. Отображаем себя
document.querySelector('video#local').srcObject = localStream;
// 3. Создаём соединение
const pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });
// 4. Добавляем треки
localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
// 5. Создаём оффер и отправляем через сигнальный сервер
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
sendToRemote(offer); // ваша реализация сигнала


Где тестировать

Подводные камни
  • HTTPS обязателен (кроме localhost).
  • iOS разрешил WebRTC только с 11-й версии Safari.
  • TURN-сервер может «съесть» трафик — будьте готовы к счетам за гигабайты.
  • Кодеки: VP8/VP9 и H264 поддерживаются не всеми клиентами одинаково.

Итого
WebRTC — это уже не будущее, а настоящее: Zoom, Google Meet, Telegram-звонки, Discord, TikTok-стримы — всё работает на нём. Если вашему проекту нужно реальное время, но вы не хотите писать нативные приложения — начинайте с WebRTC.

Полезные ресурсы
 
Нажмите, чтобы раскрыть...
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху