HTML MediaRecorder recording lags on 1080p stream

Question

I am reading a 1080p and 720p external video camera stream through getUserMedia API with the following config

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));

And recording the stream using following

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

Issue -> this works fine on high end devices, but on a device with 4GB RAM, Intel core i3 while recording in 1080p and 720p i get lags and the video is choppy only for first 3 seconds, but the remaining video is just fine.

also, on playing this recorded video in VLC media player, the timer directly jumps from 00:01 to 00:03,

if this was a memory/buffer issue, the other blobs would be affected too. am i missing something , should i use MediaRecorder in a different way, or with any different options.

PS: i have tried to use RecordRTC by Sir Muaz Khan, but it seems heavy for the CPU as CPU usage surges past 70% on the above mentioned machine which makes the machine super slow.

Please shed some light on this.

Answer 1

Finally got it working, in case if this helps anyone, if the machine you are recording is on a power saving mode, the audio/video not in sync issue can be resolved by enabling performance mode from control panel