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) #105

gwhizoftv · 2022-07-18T17:32:57Z

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.

The text was updated successfully, but these errors were encountered:

CodeFox1119 · 2022-07-25T01:57:39Z

I'm also facing same issue.

jaeyoungheo8697 · 2022-07-26T06:25:16Z

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.
chrisguttandin/extendable-media-recorder#645

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

merttyilmaz · 2022-07-26T09:03:49Z

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

pavlonsp · 2022-08-01T09:39:22Z

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

charlesjavelona · 2022-08-01T15:43:51Z

Same here using Nextjs

Component page:

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

Record component

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

freeday · 2022-08-02T17:09:12Z

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

JackCompass · 2022-08-08T07:33:25Z

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 · 2022-08-22T21:04:03Z

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 · 2022-09-28T17:19:49Z

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 #105 (comment)

Related issue #98

jessejamesrich · 2022-09-28T17:35:13Z

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

tochukwu19 · 2022-10-11T20:32:54Z

I too am experiencing this issue

kalib-code · 2022-10-13T09:24:11Z

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

bashtblrkin · 2022-11-15T08:56:04Z

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 · 2022-11-16T01:05:52Z

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

treyholt · 2022-11-16T01:33:31Z

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

DeltaCircuit · 2022-11-19T11:27:54Z

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 · 2022-11-27T22:43:42Z

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 · 2022-12-02T20:26:28Z

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

pedrosimao · 2023-01-08T22:02:28Z

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

gameveloster · 2023-02-02T03:52:54Z

Anyone mind opening a PR to patch this? Thanks

AliverdiSultanli · 2023-02-10T15:35:28Z

Change version to 1.4.0

christopher-kapic · 2023-02-21T17:52:56Z

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 · 2023-03-18T16:49:51Z

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 · 2023-04-10T22:18:43Z

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 · 2023-04-19T00:42:43Z

I'm also having this issue

maktoobgar · 2023-05-10T12:56:39Z

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 · 2023-07-16T16:35:10Z

How to download video from it as mp4 react media recorder

TomerBu · 2023-07-26T13:44:15Z

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 · 2023-07-29T17:17:19Z

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

abhijeetvinkare · 2023-08-29T02:52:40Z

@treyholt The encoder error went away for me on NextJS by downgrading to 1.6.5
npm i react-media-recorder@1.6.5 ... this solution worked, also worked for me in ReactJS ... Thanks!

fkadeal · 2023-09-06T06:26:06Z

The encoder error went away for me on NextJS by downgrading to 1.6.5 npm i react-media-recorder@1.6.5
#105 (comment)
thanks this work perfectly

jasondainter · 2023-09-28T13:58:00Z

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?

JonhZono · 2023-11-05T14:45:14Z

@marefati110 it worked for me as well, you are a goat bro

amitthk · 2024-05-21T06:28:44Z

Same issue still.

MAT0PE mentioned this issue Nov 3, 2023

Added cleanup #130

Closed

Codigo-Fuentes mentioned this issue Mar 7, 2024

previewAudioStream doesn't have any data #134

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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) #105

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) #105

gwhizoftv commented Jul 18, 2022 •

edited

CodeFox1119 commented Jul 25, 2022

jaeyoungheo8697 commented Jul 26, 2022 •

edited

merttyilmaz commented Jul 26, 2022

pavlonsp commented Aug 1, 2022

charlesjavelona commented Aug 1, 2022 •

edited

freeday commented Aug 2, 2022

JackCompass commented Aug 8, 2022

jessejamesrich commented Aug 22, 2022 •

edited

drummerjolev commented Sep 28, 2022 •

edited

jessejamesrich commented Sep 28, 2022

tochukwu19 commented Oct 11, 2022

kalib-code commented Oct 13, 2022

bashtblrkin commented Nov 15, 2022

treyholt commented Nov 16, 2022

treyholt commented Nov 16, 2022 •

edited

DeltaCircuit commented Nov 19, 2022

Faridmurzone commented Nov 27, 2022 •

edited

MarioArriaga92 commented Dec 2, 2022

pedrosimao commented Jan 8, 2023

gameveloster commented Feb 2, 2023

AliverdiSultanli commented Feb 10, 2023

christopher-kapic commented Feb 21, 2023

marefati110 commented Mar 18, 2023

holyMolyTolli commented Apr 10, 2023 •

edited

AtleMichaelSelberg commented Apr 19, 2023

maktoobgar commented May 10, 2023

Marconoyet commented Jul 16, 2023

TomerBu commented Jul 26, 2023 •

edited

ijas-aslam commented Jul 29, 2023 •

edited

abhijeetvinkare commented Aug 29, 2023

fkadeal commented Sep 6, 2023

jasondainter commented Sep 28, 2023

JonhZono commented Nov 5, 2023

amitthk commented May 21, 2024

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) #105

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) #105

Comments

gwhizoftv commented Jul 18, 2022 • edited

CodeFox1119 commented Jul 25, 2022

jaeyoungheo8697 commented Jul 26, 2022 • edited

merttyilmaz commented Jul 26, 2022

pavlonsp commented Aug 1, 2022

charlesjavelona commented Aug 1, 2022 • edited

freeday commented Aug 2, 2022

JackCompass commented Aug 8, 2022

jessejamesrich commented Aug 22, 2022 • edited

drummerjolev commented Sep 28, 2022 • edited

jessejamesrich commented Sep 28, 2022

tochukwu19 commented Oct 11, 2022

kalib-code commented Oct 13, 2022

bashtblrkin commented Nov 15, 2022

treyholt commented Nov 16, 2022

treyholt commented Nov 16, 2022 • edited

DeltaCircuit commented Nov 19, 2022

Faridmurzone commented Nov 27, 2022 • edited

MarioArriaga92 commented Dec 2, 2022

pedrosimao commented Jan 8, 2023

gameveloster commented Feb 2, 2023

AliverdiSultanli commented Feb 10, 2023

christopher-kapic commented Feb 21, 2023

marefati110 commented Mar 18, 2023

holyMolyTolli commented Apr 10, 2023 • edited

AtleMichaelSelberg commented Apr 19, 2023

maktoobgar commented May 10, 2023

Marconoyet commented Jul 16, 2023

TomerBu commented Jul 26, 2023 • edited

ijas-aslam commented Jul 29, 2023 • edited

abhijeetvinkare commented Aug 29, 2023

fkadeal commented Sep 6, 2023

jasondainter commented Sep 28, 2023

JonhZono commented Nov 5, 2023

amitthk commented May 21, 2024

gwhizoftv commented Jul 18, 2022 •

edited

jaeyoungheo8697 commented Jul 26, 2022 •

edited

charlesjavelona commented Aug 1, 2022 •

edited

jessejamesrich commented Aug 22, 2022 •

edited

drummerjolev commented Sep 28, 2022 •

edited

treyholt commented Nov 16, 2022 •

edited

Faridmurzone commented Nov 27, 2022 •

edited

holyMolyTolli commented Apr 10, 2023 •

edited

TomerBu commented Jul 26, 2023 •

edited

ijas-aslam commented Jul 29, 2023 •

edited