Stop device microphone input after MediaRecorder interface stopped

Question

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()).

Answer 1

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

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

Answer 2

The MediaRecorder interface takes a MediaStream object as an input. It is this stream object that maintains the state of the in-use inputs.

If you want to release your audio/video inputs after recording you'll want to ensure all the tracks of the stream have been stopped. Which will cause the MediaStream.active state to become false and immediately release hold of them.

You could do this by calling stop on each track after the recorder has stopped:

navigator.mediaDevices.getUserMedia({ audio: true })
.then((stream) => {
    const mediaRecorder = new MediaRecorder(stream);

    mediaRecorder.onstop = () => {
        const tracks = stream.getTracks();
        // When all tracks have been stopped the stream will
        // no longer be active and release any permissioned input
        tracks.forEach(track => track.stop());
    }

    // You'll want other recording event listeners defined here
})

Warning, you'll need to call navigator.mediaDevices.getUserMedia({ audio: true }) in order to start another stream and recording.