HTML MediaRecorder 录制在 1080p 流上滞后

HTML MediaRecorder recording lags on 1080p stream

我正在使用以下配置通过 getUserMedia API 读取 1080p 和 720p 外部摄像机流

let c_constraints = {
        audio: false,
        video: {
            deviceId: { exact: videoValue },
            width: { min: 320, ideal: 1280, max: 1920 },
        height: { min: 144, ideal: 720, max: 1080 },
            framerate: { min: 15, ideal: 30, max: 60 }
        }
     }
     navigator.mediaDevices.getUserMedia(c_constraints)
        .then((stream) => c_handleStream(stream))
        .catch((e) => c_handleError(e));

并使用以下内容录制流

 try {
        c_recorder = new MediaRecorder(currentCameraStream);
     } catch (e) {
        throw e
     }

问题 -> 这在高端设备上运行良好,但在具有 4GB RAM、Intel core i3 的设备上,在以 1080p 和 720p 录制时我得到 lags 并且视频是前3秒卡顿,后面的视频还好。

另外,在VLC媒体播放器中播放这段录制的视频时,定时器直接从00:01跳到00:03,

如果这是一个 memory/buffer 问题,其他 blob 也会受到影响。我是否遗漏了什么,我应该以不同的方式或任何不同的选项使用 MediaRecorder。

PS:我曾尝试使用 Sir Muaz Khan 的 RecordRTC,但对于 CPU 来说似乎很重,因为 CPU 在上述机器上的使用率超过 70%使机器超级慢。

请说明一下。

终于成功了,如果这对任何人有帮助,如果您正在录制的机器处于省电模式,audio/video 不同步问题可以通过从控制面板启用性能模式来解决