删除录制图标 MediaStreamRecorder.js 库？

Question

我正在使用 MediaStreamRecorder.js 库通过 Javascript 进行音频捕获。几乎一切正常。我发现的唯一问题是，当我单击停止以停止录制时，红色的录制图标仍然在那里，在选项卡上。 有谁知道当你点击停止时我如何删除这个图标？

jsFiddle 中的示例：https://jsfiddle.net/davidsadan/wazb1jks

这是我点击停止时的打印结果：

ps：它只适用于 https，对不起我的英语，我是巴西人......

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

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();
    });



});

Answer 2

你也可以这样做..

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

Answer 3

您必须知道红色记录点是通过getUserMedia 方法启动的。该方法开始捕获网络摄像头或麦克风，就像您的情况一样（仅限音频）。

您的代码发生的情况是，您停止了录制功能，mediaRecorder.stop()，但您并没有停止捕获请求。

因此，请保留对您要停止的曲目的引用并按需停止。

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

希望这会有所帮助！

已编辑

由于不推荐使用 stream.stop() 函数，您需要做的是选择特定的轨道并停止它。

Chrome 45 中弃用了三个 MediaStream：

MediaStream.ended
MediaStream.label
MediaStream.stop()

同时添加两个：

MediaStream.active
MediaStreamTrack.stop()

所以要阻止它，首先获取这些曲目（你应该只有一个）。

// ...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();
});

在此处查看有关此升级和相关资源的更多信息：https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active