RTCPeerConnection: примеры (JAVASCRIPT)

Базовые примеры использования

Создание простого соединения:

const pc = new RTCPeerConnection();
console.log(pc.connectionState);

new

Конфигурация с STUN сервером:

const config = {
  iceServers: [{ urls: 'stun:stun.example.org' }]
};
const pc = new RTCPeerConnection(config);

RTCPeerConnection {}

Создание оффера и установка локального описания:

const pc = new RTCPeerConnection();
pc.createOffer().then(offer => {
  pc.setLocalDescription(offer);
  console.log(offer.type);
});

offer

Сходные JavaScript инструменты

RTCDataChannel: Обеспечивает передачу данных через установленное соединение. Применяется для обмена файлами и сообщениями.

MediaStream API: Предоставляет доступ к медиаустройствам. Используется для получения аудио и видео потоков перед передачей.

XMLHttpRequest и WebSockets: Альтернативы для клиент-серверного взаимодействия. Не подходят для прямого peer-to-peer обмена.

Решения в других языках

Python (aiortc): Библиотека для WebRTC. Пример установки соединения:

from aiortc import RTCPeerConnection
pc = RTCPeerConnection()
print(pc)

C++ (libwebrtc): Нативная библиотека от Google. Используется в десктопных приложениях.

PHP и MySQL: Не имеют встроенной поддержки WebRTC. Обычно применяются для сигнального обмена через WebSocket.

Частые ошибки при работе

Отсутствие обработки ICE кандидатов:

const pc = new RTCPeerConnection();
pc.createOffer().then(offer => {
  pc.setLocalDescription(offer);
});
// Не добавлен обработчик onicecandidate

Соединение не устанавливается

Неправильная конфигурация TURN сервера:

const config = {
  iceServers: [{
    urls: 'turn:example.org',
    username: 'user',
    credential: 12345 // Должно быть строкой
  }]
};
new RTCPeerConnection(config);

TypeError: Failed to construct 'RTCPeerConnection'

Использование устаревших ограничений:

new RTCPeerConnection(null, { mandatory: { OfferToReceiveAudio: true } });

Предупреждение в консоли

Современные изменения интерфейса

В 2022 году удален второй аргумент mediaConstraints. Медиа-ограничения теперь передаются в getDisplayMedia и getUserMedia.

Добавлена поддержка RTCEncodedTransform для обработки закодированных медиафреймов.

Введено свойство sctp для контроля параметров SCTP транспорта.

Уточнена работа iceCandidatePoolSize для предсборки ICE кандидатов.

Продвинутые варианты применения

Использование нескольких аудио и видео дорожек:

const pc = new RTCPeerConnection();
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    stream.getTracks().forEach(track => 
      pc.addTrack(track, stream)
    );
    return pc.createOffer();
  }).then(offer => pc.setLocalDescription(offer));

Локальное описание установлено

Кастомная обработка ICE кандидатов:

const pc = new RTCPeerConnection();
pc.onicecandidate = ({ candidate }) => {
  if (candidate) {
    // Фильтрация определенных типов кандидатов
    if (candidate.protocol === 'udp') {
      sendToPeer(candidate);
    }
  }
};

Отправляются только UDP кандидаты

Использование RTCDataChannel для текстового чата:

const pc = new RTCPeerConnection();
const dc = pc.createDataChannel('chat');
dc.onopen = () => dc.send('Привет');
dc.onmessage = e => console.log(e.data);

Привет

Восстановление соединения после разрыва:

let pc = new RTCPeerConnection();
pc.onconnectionstatechange = () => {
  if (pc.connectionState === 'failed') {
    pc.restartIce();
  }
};

Перезапуск ICE процесса