Webcam video blinks or desyncs during export in browser-based screen recorder

I know this is not the place to ask questions but the thing is I have tried different AI's and SubReddits. They didn't help me out so wanted some help with this .

I'm building a browser-based screen recorder using Next.js. It records the screen and webcam simultaneously. I use canvas.captureStream() for rendering and MediaRecorder to export the video. Audio from both the screen and background music is added using captureStream().

In the preview, everything works as expected — both screen and webcam play smoothly. But during export, the webcam video either blinks, goes black, or desyncs.

What I’ve tried so far:

Using MediaRecorder on a canvas that renders screen + webcam Syncing webcamVideo.currentTime with video.currentTime Using waitForSeek() and calling play() on the webcam element Rendering frame-by-frame using requestAnimationFrame A frame-by-frame processing approach (also failed) Here’s a simplified version of my export code: https://onecompiler.com/typescript/43k4htgng

What could be causing the webcam stream to behave like this only during export? Are there known limitations with MediaRecorder or captureStream() when combining multiple media sources?

Looking for insights from anyone who has handled browser-based video compositing or webcam stream export.