前端-点击stop()后删除录制图标

我正在使用MediaStreamRecorder.js库进行Java音频捕获。我发现的唯一问题是，当我单击“停止”以停止录制时，该选项卡上的红色录制图标仍在那里。

解决：

navigator.getUserMedia(mediaConstraints, function(stream) {
    window.streamReference = stream;
    onMediaSuccess(stream);
}, onMediaError);

function stopStream() {
    if (!window.streamReference) return;

    window.streamReference.getAudioTracks().forEach(function(track) {
        track.stop();
    });

    window.streamReference.getVideoTracks().forEach(function(track) {
        track.stop();
    });

    window.streamReference = null;
}

完整代码：

 <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>

var mediaConstraints = {
    audio: true
};

var mediaRecorder;
var blobURL;

function onMediaSuccess(stream) {
    window.streamReference = 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();

        if (window.streamReference) {
            window.streamReference.getAudioTracks().forEach(function(track) {
                track.stop();
            });

            window.streamReference.getVideoTracks().forEach(function(track) {
                track.stop();
            });

            window.streamReference = null;
        }
    });

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

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



});

前端-点击stop()后删除录制图标

原文：https://www.cnblogs.com/xym4869/p/13570481.html