Создание P2P соединения с помощью JavaScript без плагинов

Быстрый ответ

Для установки пирингового соединения в браузере используется технология WebRTC и интерфейс RTCPeerConnection. Это позволяет с легкостью организовать прямое вещание медиа:

// Даем разрешение на использование медиа и начинаем вещание видео
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
  const pc = new RTCPeerConnection();
  // Подключаем наше видео
  document.getElementById('localVideo').srcObject = stream;
  // Добавляем каждую дорожку в соединение
  stream.getTracks().forEach(track => pc.addTrack(track, stream));

  // Здесь будет реализован процесс WebRTC-сигнализации для установления соединения
});

Этот код позволяет установить видеосвязь, подготавливая все необходимое для дальнейшего настройки соединения.

Принцип работы WebRTC: MQTT для браузеров

Каналы передачи данных (DataChannels) в WebRTC работают по принципу MQTT, но предназначены для общения между браузерами. С помощью этих каналов Вы сможете передавать текстовые сообщения, файлы и бинарные данные.

Однако необходимо отметить, что даже при использовании WebRTC для установления соединения, требуются процедуры сигнализации. Здесь на помощь придут WebSockets и специализированные сигнализационные серверы, предназначенные для обмена необходимой информацией между клиентами.

Благодаря реализации на основе протокола UDP, WebRTC способно обеспечить высокую производительность, обходя прямые TCP/IP-соединения, даже если на пути присутствуют NAT и файрволы.

Твердые факты и полезные нюансы

Иногда, чтобы преодолеть NAT и файрволы с помощью WebRTC, требуется использование серверов STUN или TURN.

С приходом WebRTC ушли в прошлое времена, когда для организации прямого обмена данными в браузере использовались плагины Flash и Silverlight.

К поддержке WebRTC присоединились крупнейшие разработчики веб-браузеров, такие как Chrome, Firefox и Opera. Однако даже в современных условиях иногда данные приходится передавать через серверы из-за NAT или ограничений, накладываемых политиками безопасности.

Мы против них: Серверная ретрансляция

В случаях, когда пиринговое соединение установить не удается, возможно использование системы типа "клиент-сервер" с применением Websockets.

Для облегчения процесса, может быть полезен фреймворк Socket.io, который автоматически выбирает серверную связь в случае, когда прямое соединение недоступно.

Визуализация

Пиринговое соединение можно представить как прямую связь между двумя точками:

Точка A (📍): Дом Элис – с компьютером (💻)
Точка B (📍): Дом Боба – с компьютером (💻)

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

📍🖧📍
Компьютер Элис (💻) <--------- Мост WebRTC ---------> Компьютер Боба (💻)

Центральный сервер (🏢) на этот раз полностью исключается из пути передачи данных:

Без P2P: 📍 --🛣️--> 🏢 --🛣️--> 📍
С P2P: 📍 <------------ 🖧 ------------> 📍

Данные передаются прямо и быстро, словно через секретный туннель!

Декодирование WebRTC: Чек-лист

Искусство сигнализации

• WebSocket: Широко используемый для сигнализации.
• Безсерверная сигнализация: Методы, позволяющие обходить серверы, например, при помощи электронной почты или QR-кодов.

Преодоление NAT/файрвола

• Серверы STUN/TURN: Помогают налаживать соединение сквозь NAT.
• Сервер TURN: В случае, когда соединение через STUN установить не удаётся.

Отладка соединения

• WebRTC Internals: Инструмент для диагностики проблем в браузере.
• Сетевые логи: Помогают раскрывать проблемы с установлением соединения ICE.

Полезные материалы

1. WebRTC API – Веб API | MDN — всё, что стоит знать для создания пирингового соединения.
2. Начало работы с WebRTC | web.dev — поэтапное руководство по WebRTC.
3. PeerJS – Простое пиринговое соединение с WebRTC — инструмент для упрощения работы с WebRTC.
4. "webrtc" | Can I use... Справочные таблицы для HTML5, CSS3 и т.д. — проверка совместимости WebRTC.
5. Примеры WebRTC — примеры для различных сценариев использования.
6. Real-Time Communication с WebRTC | Google Codelabs — совместное изучение теории и практики для создания видеочата на базе WebRTC.
7. Начало работы с пиринговыми соединениями | WebRTC — инструкции по настройке пиринговых соединений.