即使在录制停止后,Chrome 录制图标也会一直亮着

Posted

技术标签:

【中文标题】即使在录制停止后,Chrome 录制图标也会一直亮着【英文标题】:Chrome recording icon stays on even after recording has stopped 【发布时间】:2022-01-02 03:30:00 【问题描述】:

我正在使用 getUserMedia 使用用户的浏览器进行录制:

stream.current = await navigator.mediaDevices.getUserMedia(
    audio: 
        echoCancellation: exact: true
    ,
    video: 
        width:  ideal: 240 , height:  ideal: 160 
    
);

window.stream = stream.current;

let options = mimeType: 'video/webm;codecs=vp9,opus';
try 
    mediaRecorder.current = new MediaRecorder(window.stream, options);
 catch (e) 
    console.error('Exception while creating MediaRecorder:', e);
    
    return;


mediaRecorder.current.ondataavailable = (event:BlobEvent) => 
    recordedBlobs.current.push(event.data);
    uploadRecordedAnswer(recordedBlobs, mutationAddAttemptAnswer)


mediaRecorder.current.start();

但是,即使在我停止录制后,chrome 录制图标也不会消失,如下所示:

// All these does not get rid of the red icon
stream.current!.getTracks().forEach((track:MediaStreamTrack) => track.stop());
console.log(window.stream,window.stream.getTracks())
mediaRecorder.current!.stop()

window.stream.getTracks().forEach((track:MediaStreamTrack) => track.stop());

根据其他帖子,红色图标应该在 stream.getTracks().forEach((track:MediaStreamTrack) => track.stop()); 之后消失,但是它仍然留在那里。我知道录制已经停止,因为当我检查录制的视频时,单击停止录制后它会停止,但红色图标仍然没有消失

仅供参考,我使用的是 react useRef,因此是 stream.current

【问题讨论】:

你确定你只调用一次 getUserMedia 吗? 是的,我搜索了整个代码库以确保这是我唯一一次调用 getUserMedia。 而且您还确保这个 sn-p 所在的任何函数都只被调用一次? (您可以在其中添加一个 console.log 并检查有多少消息) 是的,它只被调用一次,只有一条 console.log 消息 【参考方案1】:

我认为您只需释放媒体流上的所有引用即可丢失网站上的媒体指示器(因此它被垃圾收集)。 MediaRecorder 也对它进行了引用。 所以windows.stream = undefined 应该完成这项工作,对于记录器也是如此。 该指标将在一段时间后消失。 例如:


var medias = null;
var rc = null;
navigator.mediaDevices.getUserMedia(audio: true).then((res)=> 
  medias = res
  rc = new MediaRecorder(res, mimeType: 'video/webm;codecs=vp9,opus');
  rc.start();
  setTimeout(() => 
        console.log("end");
        medias = null; // the indicator will disapear.
        rc.stop();
        rc = null;
      , 5000);
 );

【讨论】:

这在 Chrome 中是否有效(与 Firefox 不同)不会垃圾收集 MediaStreamTracks? 是的。这就是我在电话网络应用程序中的做法。我测试了一点,如果您直接在 chrome 上的开发控制台中测试上述代码,似乎行为会发生变化,如果触发了权限弹出窗口,则指示器未释放,如果授予是自动的,则它可以工作,这是一个奇怪的情况。使用 html 脚本标签中的普通脚本,它似乎在任何情况下都可以工作。我会检查垃圾和媒体流,不知道。 我试过这个:stream.current = null window.stream = null mediaRecorder.current = undefined 但它仍然不会消失 您是否也清理了 mediaRecorder?我更新我的答案【参考方案2】:

peerConnection.close(),调用该方法会终止RTCPeerConnection的ICE代理,结束所有正在进行的ICE处理和所有活动流。

【讨论】:

但是我从来没有初始化过任何 peerConnection 对象,我可以知道我应该在哪个对象上使用这个 close() 方法吗?

以上是关于即使在录制停止后,Chrome 录制图标也会一直亮着的主要内容,如果未能解决你的问题,请参考以下文章

Chrome免费录屏插件:Loom!

脚本精灵怎么用?

即使录制意外中断(例如电源断开),如何在 gstreamer 中录制可播放的视频文件?

用BlazeMeter录制JMeter测试脚本

用BlazeMeter录制JMeter测试脚本

AVAudioRecorder - 用户通过离开应用程序停止录制后继续录制到文件,然后重新打开它