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

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

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

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

Polina Gurtovaya

May 13, 2021
Tweet

More Decks by Polina Gurtovaya

Other Decks in Programming

Transcript

  1. RTC


    почти RTC


    и 🧟

    View Slide

  2. View Slide

  3. RTC


    почти RTC


    и 🧟

    View Slide

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


    View Slide

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


    View Slide

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


    На первый взгляд WebRTC
    сложная штука, но на самом деле
    это не так


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


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


    • Появляются новые интересные
    API (об этом позже)

    View Slide

  7. Пересылаем:


    видео с веб-камеры


    аудио


    файлики


    скриншару
    Формулируем задачу
    Внешние условия:


    лагающий интернет


    любые устройства с
    браузером внутри


    пользователи за
    fi
    rewall
    Дополнительные
    требования:


    Используем самый
    «прямой» из доступных
    способов


    Пользователей может
    быть много


    У потоков может быть
    разный приоритет


    Все должно
    шифроваться
    🧟 🧟

    View Slide

  8. View Slide

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


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


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


    • Ограничивает
    количество пакетов
    Просто посылает пакеты по адресу :)

    View Slide

  10. WebRTC


    peer-to-peer over UDP

    View Slide

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

    View Slide

  12. View Slide

  13. ICE Agent:


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


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


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

    View Slide

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

    View Slide

  15. new RTCPeerConnection(…)
    new RTCPeerConnection(…)

    View Slide

  16. new RTCPeerConnection(…)
    new RTCPeerConnection(…)

    View Slide

  17. new RTCPeerConnection(…)
    new RTCPeerConnection(…)

    View Slide

  18. View Slide

  19. Безопасность
    Использовать TLS поверх UDP не получится


    • UDP не гарантирует доставку пакетов


    • UDP не гарантирует порядок доставки


    DTLS: TLS для UDP


    • Нумерует пакеты


    • Повторно пересылает потерянное


    • Ограничивает размеры записи


    View Slide

  20. Пересылаем данные
    Media: SRTP + SRTCP Data: SCTP
    Шифрование


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


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


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


    Bundling

    View Slide

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


    Нам нужен STUN и TURN


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

    View Slide

  22. Encoding

    View Slide

  23. Compression: intra & inter

    View Slide

  24. Intraframe compression (AV1)

    View Slide

  25. 25

    View Slide

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

    View Slide

  27. View Slide

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

    View Slide

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

    View Slide

  30. 30
    SVC

    View Slide

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

    View Slide

  32. Fully connected

    View Slide

  33. MCU – Multipoint Control Unit

    View Slide

  34. SFU – Selective Forwarding Unit

    View Slide

  35. На клиенте

    View Slide

  36. Меняется layout

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. Создаем 🧟

    View Slide

  41. Итого:
    Если участников много, нам нужно продумать топологию
    нашей сети.


    Хорошим начальным решением будет SFU: разруливает SVC и
    Simulcast, может быть нодой в сети

    View Slide

  42. Готовые SFU

    View Slide

  43. Отладка

    View Slide

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

    View Slide

  45. chrome://webrtc-internals

    View Slide

  46. about:webrtc (Firefox)

    View Slide

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

    View Slide

  48. View Slide

  49. WebCodecs
    const decoder = new VideoDecoder({


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


    error: console.log


    });


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


    decoder.decode(chunk);


    View Slide

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


    View Slide

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


    View Slide

  52. ML чтобы генерировать смешные шапочки!


    Пересылать большие файлы


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

    View Slide

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


    libyuv


    libopus


    libvpx…
    libwebrtc


    libyuv


    libopus


    libvpx…
    libyuv


    libopus


    libvpx…
    webrtc-rs

    View Slide

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

    View Slide

  55. Примеры:

    View Slide

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


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


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


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


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

    View Slide

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

    View Slide