RecordRTC URLオブジェクトからメモリリークが心配しています

Question

RecordRTCライブラリを使用して、私はReact Webアプリケーションをウェブカメラのビデオ録画、再生、および保存機能に接続しています。ネイティブアプリケーションの開発から来て、私はいつもシステムメモリを調べたり、UIの経験が遅れたりすることで簡単に診断できる潜在的なメモリリークを懸念しています。 Webアプリケーションでは、JSオブジェクトが作成され、漏れなく適切に削除されているかどうかを確認するために、何を診断することができます。

以下に示すようにリプレイ機能を統合し始めたときに心配していました。 requestusermediaメソッドは、ReactコンポーネントがマウントされたときにWebカメラストリームをインスタンス化します。実際には、srcステートはurlでビデオストリームに割り当てられます。その後、停止ボタンがクリックされると、記録されたビデオのwebmファイルを表す新しいURLが作成され、同じsrc状態に割り当てられます。ストリーミングと再生の機能は、計画どおりに機能します。しかし、私は、ビデオの作成と再生の継続は、ブラウザが更新されない限り、webmファイルをラップする新しいURLを作成するだけでメモリリークが発生することに懸念しています。

これを診断するために実行できるブラウザレベルのチェックはありますか？あるいは、これは私が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を設定してください。

2番目のcreateObjectURLでは、URL.revokeObjectURLを使用して前のURLを取り消します。