Reactjs I'；我担心RecordRTC url对象的内存泄漏

使用RecordRTC库，我将React web应用程序与网络摄像头视频录制、回放和保存功能挂钩。来自本机应用程序开发，我一直担心潜在的内存泄漏，通常可以通过检查系统内存或滞后的UI体验轻松诊断。在web应用程序中，您可以执行哪些诊断来查看JS对象的创建和删除是否正确且没有泄漏

当我开始集成重播功能时，我的担忧出现了，如下所示。requestusermedia方法在安装React组件时实例化网络摄像头流。事实上，src状态与视频流的url一起分配。之后，只要单击停止按钮，就会创建一个新的url，表示录制视频的webm文件，并将其分配给相同的src状态。流式播放和重播功能按计划工作。但是，我担心继续创建和重放视频，本质上创建一个新的url包装webm文件只会导致内存泄漏，除非浏览器刷新

我是否可以在浏览器级别执行任何检查来诊断此问题？或者这是我在web应用程序世界中根本不应该关心的事情

requestUserMedia() {
    captureUserMedia((stream) => {
        this.setState({ src: window.URL.createObjectURL(stream)}); 
    });
}

handleRecord(){

    if (!this.state.record) {
        captureUserMedia((stream) => {
            var recorder = RecordRTC(stream, {
                type: 'video'
            });
            recorder.startRecording();
            this.state.recordVideo = recorder;
        });
    } else {
        var recorder = this.state.recordVideo
        recorder.stopRecording(() => {
            var blob = recorder.getBlob();
            var url = window.URL.createObjectURL(blob);
            this.setState({ src: url })
        });
    }
    let newRecordState = !this.state.record
    this.setState({
        record: newRecordState
    })
}

---

因此，不推荐将视频src设置为使用URL.createObjectURL创建的字符串。改为设置video.srcObject=stream

---

对于第二个createObjectURL，使用URL.revokeObjectURL来撤销前一个。

Javascript具有垃圾收集功能。一个不再被引用的对象将被垃圾收集，如果这是您关心的问题。如果对对象保留不必要的引用，那么这当然是一个实现问题。Chrome在检查工具栏中有一个性能选项卡，可以记录内存使用情况。