录制停止后删除红色图标答案

【问题标题】：Remove red icon after recording has stopped录制停止后删除红色图标
【发布时间】：2014-10-31 08:54:29
【问题描述】：

我正在使用recording.js。该功能工作正常，但在我停止录制后，红色图标仍出现在 chrome 的选项卡中（靠近标题）。请建议该怎么做。对不起，如果这该死的容易..：P

这是我的代码：

window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var recorder;
    var savedSrc = '';
    var audio = document.querySelector('audio');

var onFail = function(e)
    {
        console.log('Rejected!', e);
    };

    var onSuccess = function(s)
    {
        var context = new AudioContext();
        var mediaStreamSource = context.createMediaStreamSource(s);
        recorder = new Recorder(mediaStreamSource);
        recorder.record();
        $('#recordText').html('Recording...');
        // audio loopback
        // mediaStreamSource.connect(context.destination);
    };



    function startRecording()
    {
        if (navigator.getUserMedia)
        {
            navigator.getUserMedia(
            {
                video : false,
                audio : true,
                toString : function()
                {
                    return "audio";
                }
            }, onSuccess, onFail);
        }
        else
        {
            console.log('navigator.getUserMedia not present');
        }

    };

    function stopRecording()
    {
        $('#recordText').html('Record');
        recorder.stop();
        recorder.exportWAV(function(s)
        {

            audio.src = window.URL.createObjectURL(s);
        });
    }

【问题讨论】：

我对recording.js一无所知，但红色图标是一个chrome功能，表示标签使用麦克风，请确保您实际上正确停止它（阅读recording.js文档），你无法控制它自己的红色按钮。

标签： javascript jquery

【解决方案1】：

使用 Recorder.js 后移除红色图标：

var audioStream;    
var onSuccess = function(s) {
    ...
    audioStream = s;
}

function stopRecording() {
   ...
   audioStream.getTracks()[0].stop();
}

getTracks() 仅返回一个元素，因为您在配置中仅使用音频。

我希望它会对某人有所帮助。

【讨论】：

如何在用户点击“记录”按钮时再次显示？

【解决方案2】：

您可以使用成功处理程序中返回的流对象直接结束流到 getUserMedia。示例

 localMediaStream.stop()

【讨论】：

【解决方案3】：

这意味着您的浏览器正在保存麦克风流的活动实例。下面给出的解决方案可以满足您的想法。解决方案：在分配音频流时，请确保您将其引用分配给 windows 变量并从您需要的任何地方控制它（停止）。

看看我的代码是否对你有意义，它在我的情况下工作。确保在停止后重新分配流，否则您将收到异常，因为停止会完全破坏现有实例。（请相应地修改代码）

// Excerpt from my reactjs code
async function requestRecorder() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  window.localStream=stream;
  return new MediaRecorder(stream);
}

  const stopRecording = () => 
  {
    //release mic resource and hence red icon is removed
    window.localStream.getTracks()[0].stop();

  };

【讨论】：

【解决方案4】：

这是browser feature，而不是网站功能。它会一直存在，直到您关闭选项卡，表示“此选项卡可以访问或使用麦克风或网络摄像头”。

在撰写答案时，无法删除该图标。您现在可以在录制停止后将其删除。检查@akaravashkin 的答案，我还没有测试过。

【讨论】：

但是一旦我停止录制，它应该会被删除。