javascript - 删除录制图标 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

你必须知道，红色记录点是通过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() 函数，您需要做的是选择特定的轨道并停止它。

There are three MediaStream deprecations in Chrome 45:

MediaStream.ended
MediaStream.label
MediaStream.stop()

In parallel are two additions:

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