Remove red icon after recording has stopped

Question

I am using recording.js. The functionality is working fine but after I stop recording the red icon still appears in chrome's tab(near title). Please suggest what to do. Sorry if it is damn easy.. :P

This is my code:

window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var recorder;
    var savedSrc = '';
    var audio = document.querySelector('audio');

var onFail = function(e)
    {
        console.log('Rejected!', e);
    };

    var onSuccess = function(s)
    {
        var context = new AudioContext();
        var mediaStreamSource = context.createMediaStreamSource(s);
        recorder = new Recorder(mediaStreamSource);
        recorder.record();
        $('#recordText').html('Recording...');
        // audio loopback
        // mediaStreamSource.connect(context.destination);
    };



    function startRecording()
    {
        if (navigator.getUserMedia)
        {
            navigator.getUserMedia(
            {
                video : false,
                audio : true,
                toString : function()
                {
                    return "audio";
                }
            }, onSuccess, onFail);
        }
        else
        {
            console.log('navigator.getUserMedia not present');
        }

    };

    function stopRecording()
    {
        $('#recordText').html('Record');
        recorder.stop();
        recorder.exportWAV(function(s)
        {

            audio.src = window.URL.createObjectURL(s);
        });
    }

Answer 1

To remove red icon after using Recorder.js:

var audioStream;    
var onSuccess = function(s) {
    ...
    audioStream = s;
}

function stopRecording() {
   ...
   audioStream.getTracks()[0].stop();
}

getTracks() returns only one element since you use only audio in your config.

I hope it will help someone.

Answer 2

You can end the stream directly using the stream object returned in the success handler to getUserMedia. Example

 localMediaStream.stop()

Answer 3

It means that your browser is holding the active instance of mic stream. The solution given below can be a food for your thoughts. Solution: While assigning an audio stream ensure that you assigned reference to it to windows variable and control it (stop) from wherever you need it.

See if my code can make sense to you, its working in my case. Ensure that you reassign the stream once you stopped otherwise you ll get an exception as stop completely destroy the existing instance. (please adapt the code accordingly)

// Excerpt from my reactjs code
async function requestRecorder() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  window.localStream=stream;
  return new MediaRecorder(stream);
}

  const stopRecording = () => 
  {
    //release mic resource and hence red icon is removed
    window.localStream.getTracks()[0].stop();

  };

Answer 4

It's a browser feature, not a site feature. It will be there until you close the tab, indicates that "This tab has access to or using microphone or webcam".

At the time of writing the answer there were no way to remove that icon. You may now can remove it after the recording has stopped. Check @akaravashkin 's answer, I haven't tested it.