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

InsertableStreams

Polina Gurtovaya
December 04, 2021
48

 InsertableStreams

Polina Gurtovaya

December 04, 2021
Tweet

Transcript

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

    Злых админов, настроивших fi rewall Между Большим количеством участников С разными приоритетами 🧟🧟🧟
  2. Media: SRTP + SRTCP Data: SCTP Шифрование Работает поверх UDP→быстрее

    Можно терять пакеты, если нужно Не гарантирует порядок Bundling DTLS: TLS для UDP
  3. 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);
  4. Находим точки одевания шапочки Выбираем бекенд •WebAssembly •WebGL •WebGPU Находим

    нужную модель или грузим свою • Лучше использовать Lite (Mobile) варианты Закидываем в модель пиксели •getImageData •VideoDecoder.decode Запускаем модель и получаем результат
  5. Рисуем 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)
  6. Крафтим новый поток 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])