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

WebRTC-404

Polina Gurtovaya
September 26, 2021
420

 WebRTC-404

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

Polina Gurtovaya

September 26, 2021
Tweet

Transcript

  1. WebRTC больше 10 лет, что изменилось и зачем об этом

    говорить? Изоляция бустит технологию RTC и WebRTC активно развиваются • WebRTC теперь IETF стандарт 🎉 • Появляются новые API Хочется чтобы все понимали как это работает
  2. Пересылаем видео, аудио, файлики, скриншару Challenge В условиях Лагающего интернета

    Злых админов, настроивших fi rewall Между Большим количеством участников С разными приоритетами 🧟🧟🧟
  3. Транспорт: медленно и надежно или быстро и опасно? • Следит

    за состоянием • Гарантирует правильный порядок доставки • Ничего не теряет • Ограничивает количество пакетов • Огромный header (до 60 байт) Просто посылает пакеты по адресу :)
  4. ICE Agent: 1. Собирает кандидатов. 2. Для каждой пары кандидатов

    поверяет возможность соединения. trickle ICE: Постепенно собирает кандидатов. Сигналим о том кого нашли.
  5. Media: SRTP + SRTCP Data: SCTP Шифрование Работает поверх UDP→быстрее

    Можно терять пакеты, если нужно Не гарантирует порядок Bundling DTLS: TLS для UDP
  6. Итого: Нам нужно придумать signaling Нам нужен STUN и TURN

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

  8. А что там под капотом? libwebrtc libyuv libopus libvpx… libwebrtc

    libyuv libopus libvpx… libyuv libopus libvpx… webrtc-rs
  9. WebCodecs const decoder = new VideoDecoder({ output: (frame) => {/*

    do something */}, error: console.log }); await videoDecoder.configure({codec: 'vp8'}); decoder.decode(chunk);
  10. 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]));
  11. 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);
  12. Фронтенду на заметку Не забывайте обрабатывать случай отсутствия разрешений для

    getUserMedia / getDisplayMedia Камер и микрофонов может быть несколько. Выбор камер требует разрешения Придется писать очень много асинхронной логики. Нужно использовать https даже локально await navigator.mediaDevices.enumerateDevices() https://github.com/jfromaniello/selfsigned/pull/43