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

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.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 28
Comments: 33 (1 by maintainers)

Most upvoted comments

The encoder error went away for me on NextJS by downgrading to 1.6.5 npm i react-media-recorder@1.6.5

+55

treyholt on Nov 16, 2022

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

+27

marefati110 on Mar 18, 2023

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

+19

JackCompass on Aug 8, 2022

Had the same issue was driving me nuts.

Downgrade to 1.6.5 fixes it.

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

Wouldnt it make sense to update the original react-media-recorder with a fix? Is anyone still maintaining that or is react-media-recorder-2 where its at now?

jasondainter on Sep 28, 2023

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();
  }, []);

Faridmurzone on Nov 27, 2022

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.

jessejamesrich on Aug 22, 2022

Anyone mind opening a PR to patch this? Thanks

gameveloster on Feb 2, 2023

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

drummerjolev on Sep 28, 2022

The encoder error went away for me on NextJS by downgrading to 1.6.5 npm i react-media-recorder@1.6.5 https://github.com/DeltaCircuit/react-media-recorder/issues/105#issuecomment-1316148883 thanks this work perfectly

fkadeal on Sep 6, 2023

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. ❤️

maktoobgar on May 10, 2023

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 😃 ❤️

holyMolyTolli on Apr 20, 2023

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!

DeltaCircuit on Nov 19, 2022

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.

bashtblrkin on Nov 15, 2022

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

jessejamesrich on Sep 28, 2022

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

merttyilmaz on Jul 26, 2022

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.

jaeyoungheo8697 on Aug 2, 2022