Hi campers,
its been a few years but I’m back with a question.
I’m trying to create a simple frontend microphone using the MediaRecorder browser API that only requests user’s permissions once - the first time they click the “start recording” button.
To do this I never actually turn the microphone off, instead I toggle a flag when the user starts/stops recording and then call mediaRecorderRef.requestData(), which triggers an ondataavailable event handler, passing a blob parameter containing the audio data since the last ondataavailable call.
In theory this should allow me to have blobs that only contain the audio data since the flag was last toggled. I’ve seen someone correctly implement the behaviour I want but I cant get the code for it. see Online Mic Test – Record and Listen to Your Mic | Restream (notice how even when not recording, we can see the mic is still picking up audio - the animated bars are still moving behind the recording button)
here’s an example: React Starter Typescript (forked) - StackBlitz
the problem is that only the first audio gets created, when trying to create all others i get the following error:
DOMException: Failed to load because no supported source was found.