Console error Uncaught (in promise) Error: There is already an encoder stored which handles exactly the same mime types. at Worker.<anonymous> (module.ts:49:1)

[gwhizoftv]

Hi, Thank you for making this package! It gives this error when using the basic wrapper code:

import './App.css';
import { ReactMediaRecorder } from 'react-media-recorder'
 
function App() {
 return (
    <ReactMediaRecorder
       video
       render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
         <div>
          <p>{status}\</p>
          <button onClick={startRecording}>Start Recording</button>
          <button onClick={stopRecording}>Stop Recording</button>
          <video src={mediaBlobUrl} controls autoPlay loop />
         </div>
        )}
     />
   );
 }
 
 export default App;

My environment is:

• Macos Monterey,
• Chrome 103,
• the project was created using npx create-react-app,
• the package was installed with npm
• dependencies from Package.json:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-media-recorder": "^1.6.6",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"`

As you can see in the above code, I'm not setting any of the options available, especially the mimetype.

[CodeFox1119]

I'm also facing same issue.

[jaeyoungheo8697]

same issue here... using next.js 12 version.

I resolved it, by removing some lines for wav codec support. (Of course, it is not a good way when you are to use wav codec)

useEffect(() => {
    const setup = async () => {
      await register(await connect());
    };
    setup();
  }, []);

Please refer to below issues. https://github.com/chrisguttandin/extendable-media-recorder/issues/645

It seems that an error occured as I call register() multiples times with the same encoder.

[merttyilmaz]

I'm also having this issue. The issue happens when I'm navigating between different pages in my application. I'm using hooks.

[pavlonsp]

Hi, me too have this issue. The issue happens when I'm navigating between different pages in my application. I'm using hooks.

[charlesjavelona]

Same here using Nextjs

Component page:

  const RecordEventCreation = dynamic(
    () => import("../../components/Record/RecordEventCreation")
  );

Record component

  import { useReactMediaRecorder, StatusMessages} from 'react-media-recorder';

[freeday]

i have this error when i use react-router and use history.push inside onRedirectCommand

[JackCompass]

Hello everyone, I was facing the same issue. The most straightforward way to solve this is to remove the strict mode from your project.

[jessejamesrich]

I have the same issue when using react-router. Removing strict does not work for those in CRA. At the moment, I imagine something is going on with a re-rendering. EDIT: I found indeed there was some excessive re-rendering in my app and that is something I have to look at as an aside, but a quick fix was moving it higher up the tree and the problem disappeared.

[drummerjolev]

Having the same issue as I'm re-using the hook multiple times on the same page. I don't want to drop strict mode and it doesn't solve the issue anyway for CRA, as @jessejamesrich pointed out.

I tried switching blobPropertyBag to {type: 'audio/mp3'} (from the default {type: 'audio/wav'}), though that had the same error. @0x006F would you be open to make the logic running in the useEffect optional? See https://github.com/0x006F/react-media-recorder/issues/105#issuecomment-1195057490

Related issue https://github.com/0x006F/react-media-recorder/issues/98

[jessejamesrich]

I found this issue returned just recently as well. So I will be back to look at it here.

[tochukwu19]

I too am experiencing this issue

[kalib-code]

Same issue though mine I'm calling it inside a modal.

[bashtblrkin]

Hi, me too have this issue. I'm using hooks. The issue happens when I'm navigating between different pages in my application and reload page.

[treyholt]

Same issue here as well. Called in a modal, using hooks (also Next)

[treyholt]

The encoder error went away for me on NextJS by downgrading to 1.6.5 npm i [email protected]

[DeltaCircuit]

Hey everyone,

I'm sorry, I've been away for a while and couldn't keep up on this. I really appreciate everyone's involvement in this, and of course your patience.

Read through the comments and related issues, and it feels like it's specific to NextJS or am I plain wrong? (or SSR in general).

If anyone has an open PR to solve, this, I'd really appreciate it. It'd take another week or two for me to settle down everything.

Once again, I appreciate everyone's patience. Thanks!

[Faridmurzone]

The same thing happened to me today with nextjs13. As some comments previously said removing the 'strict mode' can make the error disappear. The problem occurs because the useEffect on line 84 (https://github.com/0x006F/react-media-recorder/blob/master/src/index.ts#L84) register the wav encoders every time the component is mounted. On some occasions (it can be with strict mode but also for other reasons such as re-rendering the parent component in the tree) the render ocurs 2 or more times and this causes an error. The problem is that it's not enough to interrupt the execution of the function in the unmount behavior, because under the hood it is registering the encoders with workers. I didn't find a simple way to call the worker and interrupt it. So i just wrapped the useEffect function in a try catch to work bypassing that problem. Also for those people who doesn't need audio maybe you can avoid to register the encoders. Here is my code with both things (try catch wrapper and audio verification before register encoders)

  useEffect(() => {
    const setup = async () => {
      try {
        audio && await register(await connect());
      } catch (error) {
        console.error(error)
      }
    };
    setup();
  }, []);

[MarioArriaga92]

Any update on this? It'd be nice to get a patch version out hehe

[pedrosimao]

@Faridmurzone , thanks a lot for this, it fixed for me

[gameveloster]

Anyone mind opening a PR to patch this? Thanks

[AliverdiSultanli]

Change version to 1.4.0

[christopher-kapic]

It seems that there might be a conflict with the npm versioning. Note: I'm not terribly familiar with publishing npm packages, so forgive me if I have this wrong. On npmjs.com, the package is on version 1.6.6, but on Github, the package is on version 1.4.0. It also looks like there is a different owner on npmjs.com, or @0x006F changed their username.

[marefati110]

I have forked this project and I am doing the bug fixes, you can use this package

https://www.npmjs.com/package/react-media-recorder-2

[holyMolyTolli]

I have forked this project and I am doing the bug fixes, you can use this package

https://www.npmjs.com/package/react-media-recorder-2

That works like a charm :) <3

[AtleMichaelSelberg]

I'm also having this issue

[maktoobgar]

I have forked this project and I am doing the bug fixes, you can use this package

https://www.npmjs.com/package/react-media-recorder-2

That's why you're the goat. ❤️

[Marconoyet]

How to download video from it as mp4 react media recorder

[TomerBu]

How to download video from it as mp4 react media recorder

  <a
        href={mediaBlobUrl}
        download
      >
        Download
  </a>

or you can set the file name to something else (for example - demo.mp4):

 <a
       href={mediaBlobUrl}
       download = 'demo.mp4'
     >
       Download
 </a>

[ijas-aslam]

https://www.npmjs.com/package/react-media-recorder-2 Yes, this is working well 😍

[abhijeetvinkare]

@treyholt The encoder error went away for me on NextJS by downgrading to 1.6.5 npm i [email protected] ... this solution worked, also worked for me in ReactJS ... Thanks!