WebRTC-404

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

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

    View Slide