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

WebRTC-404

Polina Gurtovaya
September 26, 2021
370

 WebRTC-404

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

Polina Gurtovaya

September 26, 2021
Tweet

Transcript

  1. View Slide

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


    View Slide

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


    View Slide

  4. WebRTC больше 10 лет, что изменилось и
    зачем об этом говорить?
    Изоляция бустит технологию


    RTC и WebRTC активно
    развиваются


    • WebRTC теперь IETF стандарт 🎉


    • Появляются новые API


    Хочется чтобы все понимали как
    это работает

    View Slide

  5. Пересылаем


    видео, аудио, файлики,
    скриншару
    Challenge
    В условиях


    Лагающего интернета


    Злых админов,
    настроивших
    fi
    rewall
    Между


    Большим количеством
    участников


    С разными
    приоритетами
    🧟🧟🧟

    View Slide

  6. View Slide

  7. Транспорт: медленно и
    надежно или быстро и
    опасно?
    • Следит за состоянием


    • Гарантирует правильный
    порядок доставки


    • Ничего не теряет


    • Ограничивает количество
    пакетов


    • Огромный header (до 60 байт)
    Просто посылает пакеты по адресу :)

    View Slide

  8. WebRTC


    peer-to-peer over UDP

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. ICE Agent:


    1. Собирает кандидатов.


    2. Для каждой пары
    кандидатов поверяет
    возможность соединения.


    trickle ICE: Постепенно
    собирает кандидатов.
    Сигналим о том кого нашли.

    View Slide

  16. View Slide

  17. Media: SRTP + SRTCP
    Data: SCTP
    Шифрование


    Работает поверх UDP→быстрее


    Можно терять пакеты, если
    нужно


    Не гарантирует порядок


    Bundling
    DTLS: TLS для UDP

    View Slide

  18. Итого:
    Нам нужно придумать signaling


    Нам нужен STUN и TURN


    DTLS, SCTP, SRTP, ICE gathering
    сделает за нас browser

    View Slide

  19. Optimal encoding: latency vs quality

    View Slide

  20. 20

    View Slide

  21. Compression: intra & inter

    View Slide

  22. Intraframe compression (AV1)

    View Slide

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

    View Slide

  24. View Slide

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

    View Slide

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

    View Slide

  27. 27
    SVC

    View Slide

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


    Satin

    View Slide

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

    View Slide

  30. Fully connected

    View Slide

  31. MCU – Multipoint Control Unit

    View Slide

  32. SFU – Selective Forwarding Unit

    View Slide

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

    View Slide

  34. На клиенте

    View Slide

  35. Меняется layout

    View Slide

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

    View Slide

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

    View Slide

  38. Создаем

    View Slide

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

    View Slide

  40. А что там под капотом?
    libwebrtc


    libyuv


    libopus


    libvpx…
    libwebrtc


    libyuv


    libopus


    libvpx…
    libyuv


    libopus


    libvpx…
    webrtc-rs

    View Slide

  41. Отладка

    View Slide

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

    View Slide

  43. chrome://webrtc-internals

    View Slide

  44. about:webrtc (Firefox)

    View Slide

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

    View Slide

  46. View Slide

  47. WebCodecs
    const decoder = new VideoDecoder({


    output: (frame) => {/* do something */},


    error: console.log


    });


    await videoDecoder.configure({codec: 'vp8'});


    decoder.decode(chunk);


    View Slide

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


    View Slide

  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);


    View Slide

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

    View Slide

  51. Примеры:

    View Slide

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


    Камер и микрофонов может быть
    несколько. Выбор камер требует
    разрешения


    Придется писать очень много
    асинхронной логики.


    Нужно использовать https даже
    локально
    await navigator.mediaDevices.enumerateDevices()


    https://github.com/jfromaniello/selfsigned/pull/43

    View Slide

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

    View Slide