GetStream / stream-video-js

GetStream JavaScript Video SDK
https://getstream.io/video/sdk/
Other
57 stars 19 forks source link

fix: synchronize background filter canvas capturing #1334

Closed oliverlaz closed 2 months ago

oliverlaz commented 2 months ago

Overview

Fixes a race condition in canvas.captureStream() and resolveFilter().

We were resolving the filter too early and discarding the <canvas> element too aggressively whenever the track dimensions changed (key prop). Upon discarding, the already captured stream was muted and hence, streaming nothing.

Now, these races are fixed by properly synchronizing the order of operations:

  1. Obtain the original video stream
  2. Render the stream inside a video element
  3. Take the correct stream dimensions once playback starts
  4. Render the element with correct size
  5. Resolve the filter promise and let the SDK publish the filtered video stream