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

WebRTC-404

Polina Gurtovaya
September 26, 2021
300

 WebRTC-404

Доклад о WebRTC на фестивале 404

Polina Gurtovaya

September 26, 2021
Tweet

Transcript

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

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

  4. WebRTC больше 10 лет, что изменилось и зачем об этом

    говорить? Изоляция бустит технологию RTC и WebRTC активно развиваются • WebRTC теперь IETF стандарт 🎉 • Появляются новые API Хочется чтобы все понимали как это работает
  5. Пересылаем видео, аудио, файлики, скриншару Challenge В условиях Лагающего интернета

    Злых админов, настроивших fi rewall Между Большим количеством участников С разными приоритетами 🧟🧟🧟
  6. None
  7. Транспорт: медленно и надежно или быстро и опасно? • Следит

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

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

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

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

  12. new RTCPeerConnection(…) new RTCPeerConnection(…)

  13. new RTCPeerConnection(…) new RTCPeerConnection(…)

  14. new RTCPeerConnection(…) new RTCPeerConnection(…)

  15. ICE Agent: 1. Собирает кандидатов. 2. Для каждой пары кандидатов

    поверяет возможность соединения. trickle ICE: Постепенно собирает кандидатов. Сигналим о том кого нашли.
  16. None
  17. Media: SRTP + SRTCP Data: SCTP Шифрование Работает поверх UDP→быстрее

    Можно терять пакеты, если нужно Не гарантирует порядок Bundling DTLS: TLS для UDP
  18. Итого: Нам нужно придумать signaling Нам нужен STUN и TURN

    DTLS, SCTP, SRTP, ICE gathering сделает за нас browser
  19. Optimal encoding: latency vs quality

  20. 20

  21. Compression: intra & inter

  22. Intraframe compression (AV1)

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

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

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

  27. 27 SVC

  28. 28 Экзотические кодеки и всякий ML Lyra Satin

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

  30. Fully connected

  31. MCU – Multipoint Control Unit

  32. SFU – Selective Forwarding Unit

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

  34. На клиенте

  35. Меняется layout

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

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

  38. Создаем

  39. Готовые решения

  40. А что там под капотом? libwebrtc libyuv libopus libvpx… libwebrtc

    libyuv libopus libvpx… libyuv libopus libvpx… webrtc-rs
  41. Отладка

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

  43. chrome://webrtc-internals

  44. about:webrtc (Firefox)

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

  46. None
  47. WebCodecs const decoder = new VideoDecoder({ output: (frame) => {/*

    do something */}, error: console.log }); await videoDecoder.configure({codec: 'vp8'}); decoder.decode(chunk);
  48. 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]));
  49. 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);
  50. Если вам не нравится браузерная реализация, вы всегда можете использовать

    свою ;)
  51. Примеры:

  52. Фронтенду на заметку Не забывайте обрабатывать случай отсутствия разрешений для

    getUserMedia / getDisplayMedia Камер и микрофонов может быть несколько. Выбор камер требует разрешения Придется писать очень много асинхронной логики. Нужно использовать https даже локально await navigator.mediaDevices.enumerateDevices() https://github.com/jfromaniello/selfsigned/pull/43
  53. @polina_gurtovaya @pgurtovaya @evilmartians @evilmartians_ru evilmartians.com Спасибо! hellsquirrel@evl.ms https://bit.ly/3eKfTZa