我担心 RecordRTC url 对象的内存泄漏

Question

使用 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
    })
}

Answer 1

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

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