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

希望这有帮助！

<强> EDITED

由于对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

Answer 2

您也可以这样做..

＆＃13;

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

＆＃13;

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



});

删除录制图标MediaStreamRecorder.js库？

3 个答案: