InsertableStreams

Transcript

1. Смешные шапочки на Insertable Streams
2. Начнем с WebRTC…
3. Пересылаем видео, аудио, файлики, скриншару Challenge В условиях Лагающего интернета Злых админов, настроивших fi rewall Между Большим количеством участников С разными приоритетами 🧟🧟🧟
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. Чего-то не хватает….
13. Streams 101
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])
25. Что еще можно делать? • Encryption • Analytics • Transcoding (VideoEncoder) • Frame rate change
26. @polina_gurtovaya @pgurtovaya @evilmartians @evilmartians_ru evilmartians.com Спасибо! hellsquirrel@evl.ms