Доклад о RTC, WebRTC и проблемах с которыми сталкиваются наши пользователи пытаясь это все реализовать
RTCпочти RTCи 🧟
View Slide
WebRTC: Скоростнаядоставка данных
WebRTC больше 10 лет, зачем опять об этомрассказывать?RTC актуально в условияхповышенной изоляцииНа первый взгляд WebRTCсложная штука, но на самом делеэто не такRTC и WebRTC активноразвиваются• WebRTC теперь IETF стандарт 🎉• Появляются новые интересныеAPI (об этом позже)
Пересылаем:видео с веб-камерыаудиофайликискриншаруФормулируем задачуВнешние условия:лагающий интернетлюбые устройства сбраузером внутрипользователи заfirewallДополнительныетребования:Используем самый«прямой» из доступныхспособовПользователей можетбыть многоУ потоков может бытьразный приоритетВсе должношифроваться🧟 🧟
Транспорт: медленно инадежно или быстро иопасно?• Следит за состоянием• Гарантируетправильный порядокдоставки• Ничего не теряет• Ограничиваетколичество пакетовПросто посылает пакеты по адресу :)
WebRTCpeer-to-peer over UDP
Простой случай: 2 участникаnew RTCPeerConnection(…)new RTCPeerConnection(…)
ICE Agent:1. Собирает кандидатов.2. Для каждой парыкандидатов поверяетвозможность соединения.trickle ICE: Постепеннособирает кандидатов.Сигналим о том кого нашли.
new RTCPeerConnection(…)new RTCPeerConnection(…)
БезопасностьИспользовать TLS поверх UDP не получится• UDP не гарантирует доставку пакетов• UDP не гарантирует порядок доставкиDTLS: TLS для UDP• Нумерует пакеты• Повторно пересылает потерянное• Ограничивает размеры записи
Пересылаем данныеMedia: SRTP + SRTCP Data: SCTPШифрованиеРаботает поверх UDP→быстрееМожно терять пакеты, еслинужноНе гарантирует порядокBundling
Итого:Нам нужно придумать signalingНам нужен STUN и TURNDTLS, SCTP, SRTP, ICE gatheringсделает за нас browser
Encoding
Compression: intra & inter
Intraframe compression (AV1)
25
Какие кодеки поддерживает ваш браузер?
Simulcast – несколькопотоков разногокачества
29SVC: как Simulcast, только лучше
30SVC
Несколько участников
Fully connected
MCU – Multipoint Control Unit
SFU – Selective Forwarding Unit
На клиенте
Меняется layout
То же самое + 1000 зрителей
Добавляем скрытого участника🧟
То же самое + 1000 зрителей🧟…и франкенштейн!
Создаем 🧟
Итого:Если участников много, нам нужно продумать топологиюнашей сети.Хорошим начальным решением будет SFU: разруливает SVC иSimulcast, может быть нодой в сети
Готовые SFU
Отладка
Отладка костылем
chrome://webrtc-internals
about:webrtc (Firefox)
Чего-то не хватает….
WebCodecsconst decoder = new VideoDecoder({output: (frame) => {/* do something */},error: console.log});await videoDecoder.configure({codec: 'vp8'});decoder.decode(chunk);
WebTransportconst transport = new WebTransport('https://example.com');await transport.ready;const stream = await transport.createSendStream();const writer = sender.getWriter();writer.write(new Uint8Array([68, 69, 70]));
Insertable-streamsconst stream = await getUserMedia({ video: true });const track = stream.getVideoTracks()[0];const processor = new MediaStreamTrackProcessor({ track });const generator = new MediaStreamTrackGenerator({ kind: 'video' });const transformer = new TransformStream({async transform(frame, controller) {const newFrame = processFrameSomehow(frame);videoFrame.close();controller.enqueue(newFrame);},});trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);trackGenerator.readableControl.pipeTo(trackProcessor.writableControl);
ML чтобы генерировать смешные шапочки!Пересылать большие файлыА еще: СSP, Worker Support, raw media processing, GPU, streamtransformation, синхронизация аудио+видео c данными и большебезопасностиБудущее: WebRTC NV?
А что там под капотом?libwebrtclibyuvlibopuslibvpx…libwebrtclibyuvlibopuslibvpx…libyuvlibopuslibvpx…webrtc-rs
Если вам не нравитсябраузерная реализация, вывсегда можете использоватьсвою ;)
Примеры:
Фронтенду на заметкуНе забывайте обрабатывать случайотсутствия разрешений дляgetUserMedia / getDisplayMediaКамер и микрофонов может бытьнесколько. Выбор камер требуетразрешенияПридется писать очень многоасинхронной логики.Нужно использовать https дажелокальноawait navigator.mediaDevices.enumerateDevices()https://github.com/jfromaniello/selfsigned/pull/43
@polina_gurtovaya@pgurtovaya@evilmartians@evilmartians_ruevilmartians.comСпасибо![email protected]https://bit.ly/3eKfTZa