Question

使用RecordRTC库，我正在使用网络摄像头视频录制，重放和保存功能来连接我的React Web应用程序。来自本机应用程序开发，我总是关注潜在的内存泄漏，通常可以通过检查系统内存或滞后的UI体验来轻松诊断。在Web应用程序中，您可以执行哪些诊断来查看是否正确创建和删除了JS对象而没有泄漏。

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

我可以在浏览器级别进行任何检查以诊断此问题吗？或者这是我在网络应用程序世界中根本不应该关注的事情？

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来撤销前一个。

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

1 个答案: