$30 off During Our Annual Pro Sale. View Details »

InsertableStreams

Polina Gurtovaya
December 04, 2021
34

 InsertableStreams

Polina Gurtovaya

December 04, 2021
Tweet

Transcript

  1. Смешные шапочки на Insertable Streams

  2. Начнем с WebRTC…

  3. Пересылаем видео, аудио, файлики, скриншару Challenge В условиях Лагающего интернета

    Злых админов, настроивших fi rewall Между Большим количеством участников С разными приоритетами 🧟🧟🧟
  4. None
  5. Как работает WebRTC new RTCPeerConnection(…) new RTCPeerConnection(…) 🦄

  6. Media: SRTP + SRTCP Data: SCTP Шифрование Работает поверх UDP→быстрее

    Можно терять пакеты, если нужно Не гарантирует порядок Bundling DTLS: TLS для UDP
  7. Как выглядит пожатое видео?

  8. Compression: intra & inter

  9. Intraframe compression (AV1)

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

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

  12. None
  13. Streams 101

  14. None
  15. None
  16. None
  17. None
  18. 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);
  19. Как же нарисовать ?

  20. Нам нужна нейронка :)

  21. Находим точки одевания шапочки Выбираем бекенд •WebAssembly •WebGL •WebGPU Находим

    нужную модель или грузим свою • Лучше использовать Lite (Mobile) варианты Закидываем в модель пиксели •getImageData •VideoDecoder.decode Запускаем модель и получаем результат
  22. Рисуем const silhouette = predictions[0].annotations.silhouette const slice = [silhouette[silhouette.length -

    4], silhouette[0], silhouette[4]] const hatW = slice[2][0] - slice[0][0] const hatH = hatW * ratio ctx.drawImage(image, slice[0][0] + 0.2 * hatW, slice[0][1] - 0.8 * hatH, hatW, hatH)
  23. Крафтим новый поток const transformer = new TransformStream({ async transform(frame,

    controller) { // ... const newFrame = new VideoFrame(canvas, { timestamp: frame.timestamp }) controller.enqueue(newFrame) frame.close() }}) trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable) const transformedStream = new MediaStream([trackGenerator])
  24. None
  25. Что еще можно делать? • Encryption • Analytics • Transcoding

    (VideoEncoder) • Frame rate change
  26. @polina_gurtovaya @pgurtovaya @evilmartians @evilmartians_ru evilmartians.com Спасибо! hellsquirrel@evl.ms