3

Javascript を使用したオーディオ キャプチャに MediaStreamRecorder.js ライブラリを使用しています。ほとんどすべて問題ありません。私が見つけた唯一の問題は、[停止] をクリックして記録を停止したときに、赤い記録アイコンがまだタブに表示されていることです。[停止] をクリックしたときにこのアイコンを削除する方法を知っている人はいますか?

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>

4

3 に答える 3

6

メソッドによって赤い記録ポイントが起動されることに注意する必要があり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()

並行して、2 つの追加があります。

MediaStream.active
MediaStreamTrack.stop()

したがって、それを止めるには、まずこれらのトラックを取得します (1 つだけを取得する必要があります)。

// ...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 をご覧ください。

于 2016-06-17T12:56:48.037 に答える