Stop device microphone input after MediaRecorder interface stopped

After stopping a MediaRecorder instance recording audio, the device often shows that the browser tab is still "recording" for a variable amount of time after. This can be observed on both desktop and mobile browsers, even when the MediaRecorder.state reports inactive.

This interferes with other apps on mobile devices. Despite the recording being stopped, the device still showed the input in use by the browser and was unable to record audio in another app, Whatsapp. This was replicated with both Android Chrome and Brave browsers.

Is there a way to force the browser or device to stop using the audio input immediately after stopping? (Stopping is in reference to calling MediaRecorder.stop()).

>Solution :

You need to stop the stream tracks that use the recorder.

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