TypeError: Cannot set property navigator of # which has only a getter

[giulianopenido]

I am facing an issue to build an nextjs project using RecordRTC. Just importing the package I receive this error below

TypeError: Cannot set property navigator of # which has only a getter

Looking into the source code, the problem seems to be from this snippet:

// RecordRTC.js at 1586 line
global.navigator = {
  userAgent: browserFakeUserAgent,
  getUserMedia: function() {}
};

[noutijo]

I am facing the same issue.

[giulianopenido]

I found a workaround which is not ideal but will make the build work while the bug is not fixed.

I used a lazy import of the recordrtc module that is only executed right before the place I instantiate the recorder. Make sure this import runs clientside and after hydration.

const RecordRTC = require("recordrtc");

[lagupa]

I found a workaround which is not ideal but will make the build work while the bug is not fixed.

I used a lazy import of the recordrtc module that is only executed right before the place I instantiate the recorder. Make sure this import runs clientside and after hydration.

const RecordRTC = require("recordrtc");

How do you support typescript then if you import it this way?

[fbn776]

Hello.. I'm using this lib with nextjs 14 and facing the same issue. I tried the workaround and still facing the same issue. Any fixes?

[NikhilDangiAcademy]

Facing issue
const recorder = new RecordRTC.RecordRTCPromisesHandler(
stream, { type: "video" }
);
TypeError: Cannot set property navigator of # which has only a getter

Technology : Next.js with Typescript

[RaiaN]

The same issue

[NikhilDangiAcademy]

The same issue

use const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: 430, height: 430, facingMode: "user" },
});
streamRef.current = stream;

  if (videoRef.current) {
    videoRef.current.srcObject = stream;
    videoRef.current.play();
  }

  const mimeType = "video/webm;codecs=vp8";
  if (!MediaRecorder.isTypeSupported(mimeType)) {
    console.warn(`${mimeType} is not supported. Using default MIME type.`);
  }

  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: MediaRecorder.isTypeSupported(mimeType)
      ? mimeType
      : undefined,
  });

  mediaRecorderRef.current = mediaRecorder;