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

Доклад о RTC, WebRTC и проблемах с которыми сталкиваются наши пользователи пытаясь это все реализовать

Transcript

1. RTC почти RTC и 🧟
3. RTC почти RTC и 🧟
4. WebRTC: Скоростная доставка данных
5. WebRTC: Скоростная доставка данных
6. WebRTC больше 10 лет, зачем опять об этом рассказывать? RTC актуально в условиях повышенной изоляции На первый взгляд WebRTC сложная штука, но на самом деле это не так RTC и WebRTC активно развиваются • WebRTC теперь IETF стандарт 🎉 • Появляются новые интересные API (об этом позже)
7. Пересылаем: видео с веб-камеры аудио файлики скриншару Формулируем задачу Внешние условия: лагающий интернет любые устройства с браузером внутри пользователи за fi rewall Дополнительные требования: Используем самый «прямой» из доступных способов Пользователей может быть много У потоков может быть разный приоритет Все должно шифроваться 🧟 🧟
9. Транспорт: медленно и надежно или быстро и опасно? • Следит за состоянием • Гарантирует правильный порядок доставки • Ничего не теряет • Ограничивает количество пакетов Просто посылает пакеты по адресу :)
10. WebRTC peer-to-peer over UDP
11. Простой случай: 2 участника new RTCPeerConnection(…) new RTCPeerConnection(…)
13. ICE Agent: 1. Собирает кандидатов. 2. Для каждой пары кандидатов поверяет возможность соединения. trickle ICE: Постепенно собирает кандидатов. Сигналим о том кого нашли.
14. Простой случай: 2 участника new RTCPeerConnection(…) new RTCPeerConnection(…)
15. new RTCPeerConnection(…) new RTCPeerConnection(…)
16. new RTCPeerConnection(…) new RTCPeerConnection(…)
17. new RTCPeerConnection(…) new RTCPeerConnection(…)
19. Безопасность Использовать TLS поверх UDP не получится • UDP не гарантирует доставку пакетов • UDP не гарантирует порядок доставки DTLS: TLS для UDP • Нумерует пакеты • Повторно пересылает потерянное • Ограничивает размеры записи
20. Пересылаем данные Media: SRTP + SRTCP Data: SCTP Шифрование Работает поверх UDP→быстрее Можно терять пакеты, если нужно Не гарантирует порядок Bundling
21. Итого: Нам нужно придумать signaling Нам нужен STUN и TURN DTLS, SCTP, SRTP, ICE gathering сделает за нас browser
22. Encoding
23. Compression: intra & inter
24. Intraframe compression (AV1)
26. Какие кодеки поддерживает ваш браузер?
28. Simulcast – несколько потоков разного качества
29. 29 SVC: как Simulcast, только лучше
30. 30 SVC
31. Несколько участников
32. Fully connected
33. MCU – Multipoint Control Unit
34. SFU – Selective Forwarding Unit
35. На клиенте
36. Меняется layout
37. То же самое + 1000 зрителей
38. Добавляем скрытого участника 🧟
39. То же самое + 1000 зрителей 🧟 …и франкенштейн!
40. Создаем 🧟
41. Итого: Если участников много, нам нужно продумать топологию нашей сети. Хорошим начальным решением будет SFU: разруливает SVC и Simulcast, может быть нодой в сети
42. Готовые SFU
43. Отладка
44. Отладка костылем
45. chrome://webrtc-internals
46. about:webrtc (Firefox)
47. Чего-то не хватает….
49. WebCodecs const decoder = new VideoDecoder({ output: (frame) => {/* do something */}, error: console.log }); await videoDecoder.configure({codec: 'vp8'}); decoder.decode(chunk);
50. 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]));
51. 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);
52. ML чтобы генерировать смешные шапочки! Пересылать большие файлы А еще: СSP, Worker Support, raw media processing, GPU, stream transformation, синхронизация аудио+видео c данными и больше безопасности Будущее: WebRTC NV?
53. А что там под капотом? libwebrtc libyuv libopus libvpx… libwebrtc libyuv libopus libvpx… libyuv libopus libvpx… webrtc-rs
54. Если вам не нравится браузерная реализация, вы всегда можете использовать свою ;)
55. Примеры:
56. Фронтенду на заметку Не забывайте обрабатывать случай отсутствия разрешений для getUserMedia / getDisplayMedia Камер и микрофонов может быть несколько. Выбор камер требует разрешения Придется писать очень много асинхронной логики. Нужно использовать https даже локально await navigator.mediaDevices.enumerateDevices() https://github.com/jfromaniello/selfsigned/pull/43
57. @polina_gurtovaya @pgurtovaya @evilmartians @evilmartians_ru evilmartians.com Спасибо! hellsquirrel@evl.ms https://bit.ly/3eKfTZa