Error: There is already an encoder stored which handles exactly the same mime types

[DeanVanGreunen]

I get the error 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

when loading the MediaRecorder for a second time without a page refresh.

[sahmed007]

Getting this same issue..

Digged around, apparently this is an active fork of this recorder. https://www.npmjs.com/package/react-media-recorder-2

Tried it out and I don't get that issue.

[DeanVanGreunen]

to solve this issue you need to unload the react-media-recorder by stopping the stream

On Mon, May 6, 2024 at 8:57 PM Samad Ahmed @.***> wrote:

Getting this same issue..

— Reply to this email directly, view it on GitHub https://github.com/DeltaCircuit/react-media-recorder/issues/136#issuecomment-2096701575, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFKDMC4P4MHSFYZVJEO7KOTZA7HAPAVCNFSM6AAAAABHBG5I5OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJWG4YDCNJXGU . You are receiving this because you authored the thread.Message ID: @.***>

--

Dean Van Greunen | Senior Software Engineer LinkedIn: deanvangreunen https://www.linkedin.com/in/deanvangreunen/ Mobile: +27663922868 | 0663922868

[JiteshVT]

@DeanVanGreunen how can we do that in the below code i am getting error .

import { FC, useEffect, useState } from 'react'; import { useReactMediaRecorder } from 'react-media-recorder'; interface Media2RecorderProps { videoBlob: Blob | null; setVideoBlob: React.Dispatch<React.SetStateAction<Blob | null>>; } const Media2RecorderVideo: FC = ({ videoBlob, setVideoBlob, }) => { const [localVideoBlob, setLocalVideoBlob] = useState<Blob | null>(null); const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({ video: true });

useEffect(() => {
    if (status === 'stopped' && mediaBlobUrl) {
        fetch(mediaBlobUrl)
            .then((response) => response.blob())
            .then((blob) => {
                setVideoBlob(blob);
            });
    }
}, [status, mediaBlobUrl]);

useEffect(() => {
    console.log(status, startRecording, stopRecording, mediaBlobUrl);
    console.log('videoBlob', videoBlob);
    if (videoBlob) {
        setLocalVideoBlob(videoBlob);
    }
}, [videoBlob]);
return (
    <div>
        <p>Status: {status}</p>
        <button onClick={startRecording}>Start Recording</button>
        <button onClick={stopRecording}>Stop Recording</button>
        {videoBlob && (
            <div>
                <h3>Preview</h3>
                <video
                    src={
                        videoBlob != null
                            ? URL.createObjectURL(videoBlob)
                            : ''
                    }
                    controls
                />
            </div>
        )}
    </div>
);

};

export default Media2RecorderVideo;

[DeanVanGreunen]

when you pass the stream object to react-media-recorder component, when you are done and have your recording or if you choose to close the recorder, simply stop the stream

its a simple fix, also you will only get this error, when in development mode, if you release your code under production mode, it will be ignored. but do stop the stream, as its also stops the browser from showing the red dot on desktop and also the green icon on android mobile, (not sure about IOS, as I dont use it)

stream is what is returned from navigator.mediaDevices.getUserMedia({ video: true, audio: true })

let tracks = stream.getTracks();
tracks.forEach(track => {
     track.stop();
});