Removing the recording icon MediaStreamRecorder.js library?

Question

I am using the MediaStreamRecorder.js library for audio capture with Javascript. Almost everything is ok. The only problem I am finding is that when I click on Stop to stop recording the red recording icon is still up there, on the tab. Anyone know how I remove this icon when you click Stop?

Example in jsFiddle:https://jsfiddle.net/davidsadan/wazb1jks

Here is the print of how it is when I click Stop:

ps: It only works with https, Sorry my english, im brazilian...

var mediaConstraints = {
    audio: true
};

var mediaRecorder;
var blobURL;
function onMediaSuccess(stream) {
 $(function(){


 mediaRecorder = new MediaStreamRecorder(stream);    
    mediaRecorder.mimeType = 'audio/wav';
    mediaRecorder.audioChannels = 1;
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2
        blobURL = URL.createObjectURL(blob);
        $("#result").append('<audio controls src="' + blobURL + '"></audio><br><a href="' + blobURL + '" target="_blank">' + blobURL + '</a>');
    };
    mediaRecorder.start(5000*5000);
    setTimeout(function(){
     mediaRecorder.stop();
    }, 120 * 1000);//Se não clicar em parar, a gravação para automaticamente em 2 minutos.

    });
}

function onMediaError(e) {
    console.error('media error', e);
}

function onStop(){
 mediaRecorder.stop();
 mediaRecorder.stream.stop();
}

var interval;
function contadorIncremento(){
  var count = 1;
  interval = setInterval(function() { 
      if(count > 1)
        $('.contador').html("setInterval: Ja passou "+ count++ +" segundos!");
      else
        $('.contador').html("setInterval: Ja passou "+ count++ +" segundo!");
     }, 1000);
}

function stopContadorIncremento(){
    clearTimeout(interval);
    $('.contador').html("");
}

$(function(){
  
 $(".play").on("click", function(){ 
    navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
       contadorIncremento();

   });

   $(".stop").on("click", function(){
    mediaRecorder.stop();
      stopContadorIncremento();
   });

   $(".resume").on("click", function(){
    mediaRecorder.resume();
   });

   $(".salvar").on("click", function(){
    mediaRecorder.save();
   });

 

});

<script src="https://webrtcexperiment-webrtc.netdna-ssl.com/MediaStreamRecorder.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div id="result"></div> 
<button class="play">Start</button>
<button class="stop">Stop</button>
<button class="resume">Resume</button>
<button class="salvar">Salvar</button>
  
 <div class="contador"></div>

Answer 1

You must aware that the red recording point is launched by the getUserMedia method. That method starts capturing the webcam or microphone as in your case (audio-only).

What happens with your code, is that you stops the recording feature, mediaRecorder.stop() but you are not stopping the capturing request.

So keep the reference to the track that you want to stop and stop it on demand.

var localStream;
// ...keep track onSuccess
function onMediaSuccess(stream) {
    localStream = stream;
    // ...
}

// ...close it when requested (TIP: add req status variables)
$(".stop").on("click", function(){
    mediaRecorder.stop();
    localStream.stop();

Hope this helps!

EDITED

Due a dreprecation of the stream.stop() function, what you need to do is to select the specific track and stop it.

There are three MediaStream deprecations in Chrome 45:

MediaStream.ended
MediaStream.label
MediaStream.stop()

In parallel are two additions:

MediaStream.active
MediaStreamTrack.stop()

So to stop it, first get these tracks (you should have only one).

// ...close it when requested (TIP: add req status variables)
$(".stop").on("click", function(){
    mediaRecorder.stop();
    // can also use getAudioTracks() or getVideoTracks()
    var track = localStream.getTracks()[0];  // if only one media track
    // ...
    track.stop();
});

Check more info about this upgrade and related resources here: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

Answer 2

You can also do this..

var tracks = localStream.getTracks();
    tracks.forEach(function(track){
      track.stop();
});

Answer 3

var mediaConstraints = {
    audio: true
};

var mediaRecorder;
var blobURL;
function onMediaSuccess(stream) {
    $(function(){


    mediaRecorder = new MediaStreamRecorder(stream);    
    mediaRecorder.mimeType = 'audio/wav';
    mediaRecorder.audioChannels = 1;
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2
        blobURL = URL.createObjectURL(blob);
        $("#result").append('<audio controls src="' + blobURL + '"></audio><br><a href="' + blobURL + '" target="_blank">' + blobURL + '</a>');
    };
    mediaRecorder.start(5000*5000);
    setTimeout(function(){
        mediaRecorder.getTracks().forEach(track => track.stop());
    }, 120 * 1000);//Se não clicar em parar, a gravação para automaticamente em 2 minutos.

    });
}

function onMediaError(e) {
    console.error('media error', e);
}

function onStop(){
    mediaRecorder.getTracks().forEach(track => track.stop());
    mediaRecorder.stream.getTracks().forEach(track => track.stop());
}

var interval;
function contadorIncremento(){
  var count = 1;
  interval = setInterval(function() { 
      if(count > 1)
        $('.contador').html("setInterval: Ja passou "+ count++ +" segundos!");
      else
        $('.contador').html("setInterval: Ja passou "+ count++ +" segundo!");
     }, 1000);
}

function stopContadorIncremento(){
    clearTimeout(interval);
    $('.contador').html("");
}

$(function(){

    $(".play").on("click", function(){ 
        navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
       contadorIncremento();

    });

    $(".stop").on("click", function(){
        mediaRecorder.getTracks().forEach(track => track.stop());
      stopContadorIncremento();
    });

    $(".resume").on("click", function(){
        mediaRecorder.resume();
    });

    $(".salvar").on("click", function(){
        mediaRecorder.save();
    });



});