WebRTC-404

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

Transcript

2. WebRTC: Скоростная доставка данных
3. WebRTC: Скоростная доставка данных
4. WebRTC больше 10 лет, что изменилось и зачем об этом говорить? Изоляция бустит технологию RTC и WebRTC активно развиваются • WebRTC теперь IETF стандарт 🎉 • Появляются новые API Хочется чтобы все понимали как это работает
5. Пересылаем видео, аудио, файлики, скриншару Challenge В условиях Лагающего интернета Злых админов, настроивших fi rewall Между Большим количеством участников С разными приоритетами 🧟🧟🧟
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: Постепенно собирает кандидатов. Сигналим о том кого нашли.
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
21. Compression: intra & inter
22. Intraframe compression (AV1)
23. Какие кодеки поддерживает ваш браузер?
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. Чего-то не хватает….
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