Под капотом WEBRTC: от SDP до ICE и DTLS в производстве

WebrtcВключает богатый аудио/видео (и данные (и данные) в реальном времени непосредственно в браузерах без плагинов. Под капотом он объединяет несколько слоев-API JavaScript высокого уровня (RTCPeerConnection) расположены на местных двигателях (голос, видео, транспорт) и протоколы, такие как SDP, ICE/Elun/Turn, DTLS и SRTP (см. Диаграмму).

С первого взгляда, соединение WEBRTC включает в себя два сверстника (скажем, Алиса и Боб) обменятьсигнализацияСообщения (через ваш собственный сервер/канал), содержащиеПротокол описания сеанса(SDP) предложения/ответы иКандидаты в ледПолем Комиссии собирают все возможные сетевые пути (ICE), выбирают лучший, выполните рукопожатие DTLS, чтобы установить клавиши шифрования, а затем начать потоковую передачу носителей над безопасным RTP. Ниже мы распаковываем каждый шаг в подробности: как обсуждается предложение/ответ SDP, как ледо/оглушение/поворот работает для прохождения NATS, и как DTLS обрабатывает безопасное место для медиа.

Сигнализация и предложение SDP/ответ

Сам Webrtc делаетнетОпределить сигнализацию. Вместо этого приложения должны использоватькакой -то канал(WebSocket, отдых и т. Д.) Для обмена информацией об соединении. В частности, сигнализация несет три ключевых фрагмента информации:

• Управление сеансом:«Звоните старт» или команды подвески.
• Конфигурация сети:Кандидаты на льду каждого сверстника (IP -адреса, порты).
• Медиа -возможности:Предложение или ответ SDP каждой стороны, перечисление кодеков, разрешений и транспортных параметров.

NCE Алиса решает позвонить Бобу, она создает RTCPeerConnection (часто поставляяiceServersконфигурация с URL -адресами STUN/TURN) и приобретает ее локальные носители (черезgetUserMedia) Затем она звонитpc.createOffer(), который создает строку SDP, описывающуюееКонец сеанса: какие аудио/видеокодеки и форматы она может отправить/получить, и (первоначально) информация о своей локальной сети. Алиса немедленно применяет это к себе сpc.setLocalDescription(offer), а затем отправляет SDPofferчтобы пробить сигнальный канал.

Боб получает предложение SDP (через канал сигнализации) и применяет его в качестве удаленного описания (pc.setRemoteDescription(offer)) Затем он создает свой собственный ответ SDP (pc.createAnswer()), применяет его локально (setLocalDescription(answer)) и отправляет этот ответ обратно Алисе. В этот моментboth sides knowПараметры медиа друг друга и «настроены» для сеанса. В коде это похоже на:

// Caller (Alice) side:
const pc = new RTCPeerConnection({iceServers:[{urls:'stun:stun.l.google.com:19302'}]});
const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
stream.getTracks().forEach(t => pc.addTrack(t, stream));
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
signaling.send({ type: 'offer', sdp: pc.localDescription });  // send to Bob

// Callee (Bob) side when receiving the offer:
await pc.setRemoteDescription(receivedOffer);
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
signaling.send({ type: 'answer', sdp: pc.localDescription });  // send back to Alice

Сам SDP - это текстовая капля (каждая строка какv=0Вo=- ...Вm=audio ...Вa=rtpmap:111 OPUS/48000/2, и т. д.). Он включает в себя: Информация о сеансе (v=Вo=Вs=), Описания СМИ (m=строки для аудио/видео с списком порта и кода иa=атрибуты для деталей формата),Данные подключения (c=IPстроки),Отпечатки отпечатков пальцев шифрования (a=fingerprint:sha-256 ...) для DTL, и частоa=group:BUNDLE ...Линия, указывающая, что несколько медиа -потоков будут мультиплексированы в течение одного ледового транспорта. Современные браузеры используютПУЧОКПо умолчанию, поэтому аудио и видео поделитесь одним подключением UDP/TCP.

После этого обмена каждая сторона содержит два описания SDP: ееместный(что он предложил/ответил) и егоудаленный(что он получил). НоЕще нет потоков в СМИ- Нам все еще нужно иметь дело с сетевыми путями.

Лед: поиск сетевого пути

Даже при обмене SDP коллеги все еще должны определитькакчтобы достичь друг друга через Натс и брандмауэры. Это работаЛед (интерактивное установление подключения).Каждый сверстник собирает список возможных сетевых конечных точек, называемыхКандидаты в ледПолем Есть несколько типов:

• Хозяин: Собственный локальный IP -адрес устройства (например,192.168.x.x), обычно за NAT.
• Сервер-рефлексивный (srflx): Общедоступный IP -адрес, как видно на STUN Server. Запрос STUN «обнаруживает», как NAT переводит исходящий трафик, что дает маршрутный адрес.
• Рефлексивный (PRFLX): Кандидат выучился после начального теста на подключение через симметричный NAT (менее распространен).
• Реле: Адрес, предоставленный сервером Turn, который будетрелеВсе средства массовой информации, если не работает прямой путь.

Как правило, сверстники предпочитают лучших кандидатов в первую очередь. MDN Примечания:

«Каждый сверстник будет предлагать своих лучших кандидатов в первую очередь, пробиваясь к худшим кандидатам. В идеале кандидаты являются UDP (быстро), хотя ICE тоже позволяет TCP».

На практике ваше приложение часто предоставляет список серверов STUN/Turn вRTCPeerConnectionконструктор. Например:

const pc = new RTCPeerConnection({
  iceServers: [
    { urls: ['stun:stun1.l.google.com:19302'] }, 
    { urls: ['turn:turn.example.com:3478'], username: 'user', credential: 'pass' }
  ]
});

Это сообщает браузеру запросить сервер (ы) STUN для рефлексивных кандидатов и при необходимости использовать поворот. Аpc.onicecandidateСобытия неоднократно стреляют, когда встречаются новые кандидаты (Host, SRFLX и в конечном итоге реле кандидатов). Каждый кандидат отправляется на отдаленный сверстникчерез сигнализациюПолем Сверстники продолжают посылать кандидатов, пока не будет завершено сборы льда (обозначеноpc.addIceCandidate(null))

Между тем, обе стороны продолжают обмениваться кандидатами (частопостепенно, процесс, известный какСтехнуть лед) Как только первая пара кандидатов обменивается, начинаются проверки подключения ICE (запросы на привязку к оглушению). На самом деле, подключение можетначинатьКак только первый кандидат отправлен, но может быть завершен только тогда, когда найден лучший взаимный кандидат. Алгоритм льда систематически пытается сочетать каждого из кандидатов Алисы с каждым из Боба, выполняя пинги на основе оглуха, чтобы увидеть, какой путь действительно работает. Сначала он предпочитает прямые пути UDP (хост → хост или хост → SRFLX), только при необходимости возвращается к обратном поворотном пути.

В конце концов, ледВыбирает одну пару кандидатовкак лучшее соединение. Один сверстник становитсяконтрольАгент и завершает выбор, информируя другого узла выбранной пары с помощью окончательного оглушенного сообщения (или обновленного предложения). В конце концов, ледВыбирает одну пару кандидатовкак лучшее соединение. Один сверстник становитсяконтрольАгент и завершает выбор, информируя другого узла выбранной пары с помощью окончательного оглушенного сообщения (или обновленного предложения).

Огромный против хода

Ошеломление и поворот - рабочие лошади за льдом. АSTUN (утилиты для проходов сессии для NAT)Сервер просто говорит клиенту «Вот ваш публичный IP и порт». В Webrtc:

«Клиент отправит запрос на STUN Server в Интернете, который ответит общедоступным адресам клиента и доступен ли клиент за NAT маршрутизатора».

Это даетсервер-рефлексивныйкандидаты (srflx), которые позволяют сверстникам попробовать подключение через свои общедоступные конечные точки. Сам STUN не передает никаких средств массовой информации - он только обнаруживает адреса. Если оба сверстника находятся за простыми NAT, эти адреса может быть достаточно для прямого соединения P2P.

Однако,Многие NAT (например, симметричные NAT) не допустит этого, или брандмауэры могут блокировать неизвестный трафик UDP. В этих случаях вам нужноПоворот (обход с использованием реле вокруг Nat)Полем Сервер поворота выступает в качестве реле: оба коллеги отправляют все свои носители на сервер Turn, который пересылает его между ними. Как объясняет руководство GetStream:

«Серверы поворота обеспечивают механизм резерва, когда прямые одноранговые соединения не могут быть установлены с помощью STUN. В отличие от STUN, что просто облегчает обнаружение, Turn Turn действительно передает данные среды между сверстниками».

Turn работает так: клиент выделяет адрес реле на сервере Turn (с учетными данными), а затем предоставляет ретрансляцию IP/порт в качестве кандидата для другого однорангового. Затем весь трафик проходит через сервер поворота. ПОВЕРНУТЬгарантииПодключение за счет дополнительной задержки и использования полосы пропускания. Действительно, реле поворота имеет значительные компромиссы:

«В то время как серверы поворота обеспечивают соединение почти универсального, они поставляются со значительными компромиссами: увеличение задержки, затраты на пропускную способность и требования к инфраструктуре…».

В производстве хорошая практика - этоИспользуйте поворот только при необходимостиПолем Обычно приложения настраивают один или два общедоступных оглушенных сервера (например, Googlestun:stun.l.google.com:19302и сервер поворота. Если ICE дает пару кандидатов в хост/SRFLX, медиа идет прямо. Если у льда нет выбора, он будет использовать поворотrelayпара.

Руководство DTLS-SRTP

Как только лед находит рабочий путь, два коллеги имеют подключение UDP (или TCP). Следующий шаг -Закрепите СМИПолем WEBRTC мандат зашифрованных носителей, используяDTLS-SRTP.Это означает, что два сверстника выполняют рукопожатие DTLS над выбранным ледовным транспортом. SDP уже включил отпечатки пальцев в сертификате каждой стороны (например,a=fingerprint:sha-256 ...), поэтому коллеги могут проверить, что у них есть ожидаемые сертификаты. От RFC8827:

«После того, как необходимые проверки льда завершены,… Алиса и Боб выполняют рукопожатие DTLS на каждом компоненте, который был установлен ICE.… Как только рукопожатие DTLS завершено, ключи экспортируются… и используются для ключа SRTP для каналов медиа».

Поскольку WEBRTC обычно использует пакет (один транспорт для всех средств массовой информации), обычно будет одно рукопожатие DTLS. После рукопожатия обе стороны получают одинаковые клавиши SRTP (через экспортер клавиши RFC5705) и запускают шифрование/дешифрование среды SRTP. SDPa=setup:Линии (например,a=setup:actpass) координировать, какая сторона действует как клиент или сервер DTLS.

Между тем, каналы данных (RTCDataChannel) ИспользованиеSCTP над DTLS.На практике это означает, что рукопожатие DTLS также устанавливает ключи для потоков SCTP, так что текстовые или двоичные данные, отправляемые по каналам данных, также шифрованы.

С завершением DTL, соединение с одноранговым однорангом полностью настраивается: любые пакеты RTP (видео/аудио), отправленные SRTP и заполнены и класс через только что только что заполняемое рукопожатие DTLS. На этом этапе настоящие носители начинают течь.

СМИ поток и пакет

После DTLS медиа (аудио/видео) отправляется по согласованной паре кандидатов на ICE. Спасибоa=group:BUNDLEЛиния в SDP, несколько средств массовой информации (например, микрофон и камера) разделяютТот же 5-тупе(IP/Port/Protocol). Библиотеки WEBRTC Мультиплексные RTP -потоки с разнымиSSRCSилиСерединаЧерез один лед/DTLS/SRTP -канал. Это уменьшает используемые порты и упрощает обход.

Например, Алиса могла бы отправить один 5-тупой UDP, несущий как OPUS Audio SRTP-поток, так и VP8 Video SRTP-поток. Браузер Боба демольтиплексы SSRC и декодирует каждую носитель в отдельные HTMLMedieElements (черезtrackсобытия). Периодические пакеты RTCP (отчеты отправителя/приемника, NACKS) также переходят на тот же транспорт, чтобы адаптировать битрейт и обработку потери пакетов.

В отличие от более старых SIP/VoIP, WEBRTC не использует шифрование SDES - этовсегдаиспользует DTLS-SRTP. Кроме того, браузеры обрабатывают такие вещи, как отмена эхо, буферизацию дрожания и адаптивная битрейта внутри, поэтому код уровня приложения видит только готовые к игре потоки.

Собрать все вместе: шаги соединения

Таким образом, полный поток соединения WEBRTC происходит следующим образом:

1. Создайте пилоты и собирайте средства массовой информации.Каждую побочные вызовыnew RTCPeerConnection(...)(с ледяными серверами). Треки медиа (аудио/видео) добавляются в соединение (addTrackилиaddStream)
2. Предложение/Ответ обмен (SDP).ВызовыcreateOffer()ВsetLocalDescription(offer)и сигнализирует о предложении Peer B. Peer B устанавливает его черезsetRemoteDescription(offer), затемcreateAnswer()иsetLocalDescription(answer)и сигнализирует ответ обратно. Теперь оба сверстника обладают средствами массовой информации и отпечатками пальцев DTLS.
3. Кандидат в кандидат/обмен.Оба сверстника начинают ICE: вызов STUN Servers, собирая хост, SRFLX (и, возможно, эстафет) кандидатов. Каждый найденный кандидат отправляется на другую сторону посредством сигнализации. Это часто происходит параллельно с (или вскоре после) обмена SDP (Sclickle Ice).
4. Проверки подключения (ICE).По мере обмена кандидатов проводятся проверки подключения к льду. Каждая пара кандидатов проверяется с помощью сообщений STUN. Компании обнаруживают, какая пара кандидатов на самом деле работает. (Пары кандидатов в UDP пробовали сначала; TCP только в случае невозможности UDP.) Когда найдена подходящая пара, отчеты ICE отчетыconnectedилиcompletedПолем
5. DTLS Handshake.В рабочем транспорте обе стороны выполняют рукопожатие DTLS (один клиент, один сервер), используя отпечаток пальца сертификата от SDP. Как только это завершится, создаются клавиши SRTP.
6. СМИ поток.Зашифрованные аудио и видео -пакеты начинают течь (через SRTP) на выбранной паре кандидатов. Каждая сторонаontrackХэндлер обеспечивает входящие медиа -потоки для воспроизведения. Каналы данных (SCTP/DTLS) также становятся доступными на этом этапе.

Каждый из этих шагов может произойти несколько одновременно (например, сборы льда и проверки DTLS перекрываются), но этот линейный контур отражает основные вехи. В конце концов, с защищенными средствами массовой информации устанавливается одноранговое соединение через UDP (или TCP, если UDP был заблокирован).

Общие ловушки и советы отладки

Создание приложений WEBRTC в производстве часто сталкивается с сложными проблемами. Вот несколько распространенных болевых точек и практических советов:

• Сборы подключения к льду:ЕслиiceConnectionStateидетнеуспешныйилиотключенЭто часто означает, что сверстники не могут найти рабочую сеть. Типичные причины: отсутствующие или неправильно настроенные серверы оглуха/поворота, строгий симметричный NAT/брандмауэр, или только TCP. Чтобы отлаживать, проверьте обмен кандидатами на Ice: вы действительно отправляете кандидатов на ледяные кандидаты? (Помните, после создания локального описания вы должны выслушатьonicecandidateи отправьте их на одноранговый.) Также убедитесь, что ваш URL -сигнал STUN Server достижимы (проверьте его отдельно, если это необходимо). Инструменты:Chrome: // webrtc-internalsможет показать изменения состояния ледяного состояния и выбрать пары кандидатов. Webrtc Stats API (pc.getStats()) может сообщить, когда пары кандидатов преуспевают или провалится.

• Несоответствие SDP и кодека:Если вы видите, что соединение устанавливается, но нет медиа (тихой аудио, черное видео), распространенным виновником не соответствуют несовпадающую кодеки или отсутствующие медиа -линии. Проверьте окончательный согласованный SDP вoniceconnectionstatechangeПолем Убедитесь, что каждый раздел средств массовой информации (m=Линия) имеет хотя бы один общий кодек. Сегодня браузеры поддерживают Opus (Audio) и VP8/VP9/H264 (видео) из коробки, но если вы используете узкий или запатентованный кодек, у вас может быть никакого согласованного кодека. Также проверьте, что SDPa=fingerprintЛинии соответствуют тому, что ожидает каждая сторона (на случай, если вы по какой -то причине вручную ведете SDP).

• Проблемы с рукопожатием DTLS:Если носитель по -прежнему не течет, а лед подключен, рукопожатие DTLS может провалиться (застрял). Это может произойти, если отпечаток пальца сертификата в SDP изменяется или путь пакета заблокирован (DTL требует двунаправленного UDP). Регистрироватьсяchrome://webrtc-internalsБудет ли состояние DTLS «связано». Можно также захватить пакеты (Wireshark), чтобы увидеть, возникают ли DTLS ClientHello или ServerHello. Ноль-байтовый поток среды часто указывает на сбой DTLS.

• СМИ ТРЕЗИЯ/Проблемы с разрешением:Иногда разработчик забывает правильно прикрепить СМИ. Убедитесь, что вы успешно получили треки сgetUserMedia()и добавил их в соединение перед созданием предложения (или добавьте их на необходимые переговоры). Кроме того, проверьте разрешение на камеру/микрофона с микрофоном (браузеры будут блокировать иное). Если трек приглушен или завершен, пакеты не будут отправлены. В коде, журналpc.ontrackи проверять видео<video>Элементы могут показать, появятся ли потоки, но не отображаются.

• Пропускная способность сети и узкие места процессора:Видео с высоким разрешением может налоговые устройства и сети. Мониторинг полосы пропускания: API Stats может показатьbytesSent/Received, потеря пакета, время в обаДоступен OutgoingBitrateПолем Если вы заметили чрезмерную потерю пакета или загрузку процессора, попробуйте уменьшить разрешение видео или кадров. Контроль заторов WEBRTC снизит качество самостоятельно, но вы также можете использоватьRTCRtpSender.setParameters()Чтобы ограничить битрейт или включить одновременную трансляцию/SPS, если использование SFU. Запуск тяжелого кодирования на процессоре (или в шейдерах JavaScript) может сбросить кадры. Кроме того, как отмечалось выше, Reliance on Turn Relay Double Latency и использует вдвое большую пропускную способность - когда это возможно, минимизируйте использование поворота, обеспечивая оптимальный сетевой путь или реже используя ICE RESTARN.

• Совместимость браузера:Различные браузеры имеют незначительные различия (например, SDP Semantics «Unified Plan» против «плана B», версия DTLS, имена поля). Придерживайтесь стандартизированного SDP и используйте обнаружение функций (RTCRtpSender.getCapabilities()) Убедитесь, что вы не полагаетесь на какие -либо запатентованные API. Тестирование сквозного на всех целевых браузеров (Chrome, Firefox, Safari, Edge) имеет важное значение. Обычные ошибки включают отсутствующиеawaitна асинхронных вызовах или не обрабатывая переоборудование (например, добавление треков после факта).

• Инструменты отладки:Как уже упоминалось,Webrtc-internalsбесценен. В Chrome посетитеchrome://webrtc-internalsЧтобы увидеть живые графики и журналы каждого RTCPeerconnection: состояния ICE, состояния DTLS, битрейты, количество пакетов и отчеты о статистике. Firefoxabout:webrtcпредлагает аналогичное резюме. Вы также можете позвонитьpc.getStats()В JavaScript и войдите в систему результаты. Для более глубокого анализа Wireshark может декодировать SRTP/DTL, если вы экспортируете клавиши (Chrome может регистрировать материал Keying DTLS). Простая журнала (печатьiceConnectionStateВconnectionStateВonicecandidateСобытия) в вашем приложении может быстро показать, где застрял процесс.

Заключение

Webrtc смешивает несколько протоколов (SDP, ICE, STUN/TURN, DTLS/SRTP) для достижения одноранговых средств массовой информации в реальном времени в браузерах. Понимание каждого уровня помогает отладить и оптимизировать живые приложения. Мы прошли полный поток: начальный сигнальный обмен предложениями/ответами SDP,ЛЕДСбор кандидатов (хост/SRFLX/RELAY) и проверки подключения,DTLSрукопожатие, чтобы обеспечить транспорт и, наконец, зашифрованные носителипотоковая передачаПолем Вооружены этими знаниями и инструментами (журналы браузеров, GetStats, Dampets Packet), разработчик может лучше диагностировать проблемы - будь то сервер отсутствующего поворота, перевернутый отпечаток SDP или застой в сети. В производстве необходимо соблюдать осторожность для обеспечения надежной инфраструктуры STUN/Turn, обработки пересмотра и производительности настройки. Но, следуя стандартизированному пути WEBRTC, можно достичь низкой задержки, безопасного аудио и видео между браузерами без проприетарных плагинов.

Ссылки:Мы использовали спецификации и документацию WEBRTC для деталей. Для сигнализации смПодключение MDN WEBRTCОбзор. Для поведения льда/ошеломления/поворота см. Руководства MDN и экосистемы. Для безопасностиIETF WEBRTC Security Architecture(RFC8827 **) ** описывает требования DTLS/SRTP. Эти источники, среди прочего, сообщили о объяснениях выше.