Question

我正在使用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);
        });
    }

Answer 1

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

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

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

getTracks（）只返回一个元素，因为您在配置中只使用了音频。

我希望它会帮助别人。

Answer 2

它是browser feature，而不是网站功能。它会在那里关闭选项卡，指示＆＃34;此选项卡可以访问或使用麦克风或网络摄像头＆＃34;。

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

Answer 3

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

 localMediaStream.stop()

Answer 4

这意味着您的浏览器正在保存麦克风流的活动实例。下面给出的解决方案可以成为您思想的食粮。解决方案：在分配音频流时，请确保您将对其的引用分配给 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 个答案: