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

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

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. 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
    Спасибо!
    hellsquirrel@evl.ms
    https://bit.ly/3eKfTZa
    

    View Slide