基于Next.js+MediaRecorder的浏览器录屏工具导出时摄像头视频闪烁、不同步或黑屏问题求助

各位好，我正在用Next.js开发一款浏览器端的录屏工具，核心需求是同时录制屏幕画面和摄像头画面。目前的实现逻辑是：用canvas.captureStream()来合并渲染屏幕与摄像头的画面，再通过MediaRecorder完成视频导出；音频部分也是借助captureStream()同时捕获系统屏幕音频和背景音乐。

现在遇到了一个棘手的问题：预览阶段，屏幕和摄像头的画面都能流畅播放，一切正常；但到了导出视频环节，摄像头画面要么频繁闪烁，要么直接黑屏，完全达不到预期的录制效果。

我已经检查过canvas的渲染循环、MediaRecorder的配置参数，但还是没找到问题根源。有没有朋友遇到过类似的情况？或者在使用canvas.captureStream()和MediaRecorder做画面合并录制时，有什么容易忽略的细节或避坑点可以分享的？

内容来源于stack exchange