RTC почти RTC и 🧟‍♂️

Slide 1

Slide 1 text

RTC почти RTC и 🧟

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

RTC почти RTC и 🧟

Slide 4

Slide 4 text

WebRTC: Скоростная доставка данных

Slide 5

Slide 5 text

WebRTC: Скоростная доставка данных

Slide 6

Slide 6 text

WebRTC больше 10 лет, зачем опять об этом рассказывать? RTC актуально в условиях повышенной изоляции На первый взгляд WebRTC сложная штука, но на самом деле это не так RTC и WebRTC активно развиваются • WebRTC теперь IETF стандарт 🎉 • Появляются новые интересные API (об этом позже)

Slide 7

Slide 7 text

Пересылаем: видео с веб-камеры аудио файлики скриншару Формулируем задачу Внешние условия: лагающий интернет любые устройства с браузером внутри пользователи за fi rewall Дополнительные требования: Используем самый «прямой» из доступных способов Пользователей может быть много У потоков может быть разный приоритет Все должно шифроваться 🧟 🧟

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Транспорт: медленно и надежно или быстро и опасно? • Следит за состоянием • Гарантирует правильный порядок доставки • Ничего не теряет • Ограничивает количество пакетов Просто посылает пакеты по адресу :)

Slide 10

Slide 10 text

WebRTC peer-to-peer over UDP

Slide 11

Slide 11 text

Простой случай: 2 участника new RTCPeerConnection(…) new RTCPeerConnection(…)

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

ICE Agent: 1. Собирает кандидатов. 2. Для каждой пары кандидатов поверяет возможность соединения. trickle ICE: Постепенно собирает кандидатов. Сигналим о том кого нашли.

Slide 14

Slide 14 text

Простой случай: 2 участника new RTCPeerConnection(…) new RTCPeerConnection(…)

Slide 15

Slide 15 text

new RTCPeerConnection(…) new RTCPeerConnection(…)

Slide 16

Slide 16 text

new RTCPeerConnection(…) new RTCPeerConnection(…)

Slide 17

Slide 17 text

new RTCPeerConnection(…) new RTCPeerConnection(…)

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Безопасность Использовать TLS поверх UDP не получится • UDP не гарантирует доставку пакетов • UDP не гарантирует порядок доставки DTLS: TLS для UDP • Нумерует пакеты • Повторно пересылает потерянное • Ограничивает размеры записи

Slide 20

Slide 20 text

Пересылаем данные Media: SRTP + SRTCP Data: SCTP Шифрование Работает поверх UDP→быстрее Можно терять пакеты, если нужно Не гарантирует порядок Bundling

Slide 21

Slide 21 text

Итого: Нам нужно придумать signaling Нам нужен STUN и TURN DTLS, SCTP, SRTP, ICE gathering сделает за нас browser

Slide 22

Slide 22 text

Encoding

Slide 23

Slide 23 text

Compression: intra & inter

Slide 24

Slide 24 text

Intraframe compression (AV1)

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Какие кодеки поддерживает ваш браузер?

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Simulcast – несколько потоков разного качества

Slide 29

Slide 29 text

29 SVC: как Simulcast, только лучше

Slide 30

Slide 30 text

30 SVC

Slide 31

Slide 31 text

Несколько участников

Slide 32

Slide 32 text

Fully connected

Slide 33

Slide 33 text

MCU – Multipoint Control Unit

Slide 34

Slide 34 text

SFU – Selective Forwarding Unit

Slide 35

Slide 35 text

На клиенте

Slide 36

Slide 36 text

Меняется layout

Slide 37

Slide 37 text

То же самое + 1000 зрителей

Slide 38

Slide 38 text

Добавляем скрытого участника 🧟

Slide 39

Slide 39 text

То же самое + 1000 зрителей 🧟 …и франкенштейн!

Slide 40

Slide 40 text

Создаем 🧟

Slide 41

Slide 41 text

Итого: Если участников много, нам нужно продумать топологию нашей сети. Хорошим начальным решением будет SFU: разруливает SVC и Simulcast, может быть нодой в сети

Slide 42

Slide 42 text

Готовые SFU

Slide 43

Slide 43 text

Отладка

Slide 44

Slide 44 text

Отладка костылем

Slide 45

Slide 45 text

chrome://webrtc-internals

Slide 46

Slide 46 text

about:webrtc (Firefox)

Slide 47

Slide 47 text

Чего-то не хватает….

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

WebCodecs const decoder = new VideoDecoder({ output: (frame) => {/* do something */}, error: console.log }); await videoDecoder.configure({codec: 'vp8'}); decoder.decode(chunk);

Slide 50

Slide 50 text

WebTransport const 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]));

Slide 51

Slide 51 text

Insertable-streams const 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);

Slide 52

Slide 52 text

ML чтобы генерировать смешные шапочки! Пересылать большие файлы А еще: СSP, Worker Support, raw media processing, GPU, stream transformation, синхронизация аудио+видео c данными и больше безопасности Будущее: WebRTC NV?

Slide 53

Slide 53 text

А что там под капотом? libwebrtc libyuv libopus libvpx… libwebrtc libyuv libopus libvpx… libyuv libopus libvpx… webrtc-rs

Slide 54

Slide 54 text

Если вам не нравится браузерная реализация, вы всегда можете использовать свою ;)

Slide 55

Slide 55 text

Примеры:

Slide 56

Slide 56 text

Фронтенду на заметку Не забывайте обрабатывать случай отсутствия разрешений для getUserMedia / getDisplayMedia Камер и микрофонов может быть несколько. Выбор камер требует разрешения Придется писать очень много асинхронной логики. Нужно использовать https даже локально await navigator.mediaDevices.enumerateDevices() https://github.com/jfromaniello/selfsigned/pull/43

Slide 57

Slide 57 text

@polina_gurtovaya @pgurtovaya @evilmartians @evilmartians_ru evilmartians.com Спасибо! [email protected] https://bit.ly/3eKfTZa