muaz-khan / RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
https://www.webrtc-experiment.com/RecordRTC/
MIT License
6.6k stars 1.76k forks source link

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

Open giulianopenido opened 3 months ago

giulianopenido commented 3 months ago

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 commented 3 months ago

I am facing the same issue.

giulianopenido commented 3 months ago

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 commented 3 months ago

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 commented 1 month ago

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 commented 1 week ago

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