Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

C27317d1ebe4e4a01504acab9d87fe61?s=128

Polina Gurtovaya

May 13, 2021
Tweet

Transcript

  1. RTC почти RTC и 🧟

  2. None
  3. RTC почти RTC и 🧟

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

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

  6. WebRTC больше 10 лет, зачем опять об этом рассказывать? RTC

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

    условия: лагающий интернет любые устройства с браузером внутри пользователи за fi rewall Дополнительные требования: Используем самый «прямой» из доступных способов Пользователей может быть много У потоков может быть разный приоритет Все должно шифроваться 🧟 🧟
  8. None
  9. Транспорт: медленно и надежно или быстро и опасно? • Следит

    за состоянием • Гарантирует правильный порядок доставки • Ничего не теряет • Ограничивает количество пакетов Просто посылает пакеты по адресу :)
  10. WebRTC peer-to-peer over UDP

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

  12. None
  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(…)

  18. None
  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)

  25. 25

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

  27. None
  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. Чего-то не хватает….

  48. None
  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