Compatibility with Angular universal and material

[nishkarsh]

Is RecordRTC compatible with Angular universal and Material? I have been working on an Angular 5 project that uses server side rendering and material. However, when I use RecordRTC for video recording, the server side rendering fails. For some reason, using recordRTC makes CDK to error out.

I understand that recordRTC uses a lot of things that would only be supported on browser, but then there should be a way to make other pages render on the server. I added a conditional check isPlatformBrowser(platformId) for initializing recordRTC, but it seems the error occurs due to the import.

I have posted a similar issue at the material repository here as I am not even sure who should handle this.

Thanks!

[Polyterative]

I have used RecordRTC in production succesfully. I used Angular 5 with Material (not universal) with AOT enabled. No particular issues were encountred in that particular configuration

[rajibhalder]

Is RecordRTC compatible with Angular universal and Material? I have been working on an Angular 5 project that uses server side rendering and material. However, when I use RecordRTC for video recording, the server side rendering fails. For some reason, using recordRTC makes CDK to error out.

I understand that recordRTC uses a lot of things that would only be supported on browser, but then there should be a way to make other pages render on the server. I added a conditional check isPlatformBrowser(platformId) for initializing recordRTC, but it seems the error occurs due to the import.

I have posted a similar issue at the material repository here as I am not even sure who should handle this.

Thanks!

Any solution we got??? I am facing same issue and help less to integrate voice recorder with my angular app having angular material and universal (SSR) enabled.

[hiepxanh]

tested with angular 14 SSR, you should lazy load it to prevent it leak to override global namespace URL of nodejs (mention here https://github.com/muaz-khan/RecordRTC/issues/666)

        let RecordRTC;
        let moduleRecord;
        await this.ngZone.run(async () => {
          // https://stackoverflow.com/a/58859327/5748537
          moduleRecord = await import('recordrtc');
          RecordRTC = (moduleRecord as any).default;
        });

        this.record = new RecordRTC(this.stream, {
          mimeType: 'audio/wav',
          type: 'audio',
          numberOfAudioChannels: 1,
          disableLogs: true,
          desiredSampRate: 12000,
          recorderType: RecordRTC.StereoAudioRecorder,
        }); 

do you love me?