React で画面とビデオを同時に録画するにはどうすればよいですか?

Question

react-media-recorder を使用して画面と録画対象のカメラビデオを録画し、それを再生用のビデオに変換したいと考えています。

録画しましたが、表示と再生に 2 つのビデオ要素を使用しました。でも、それらを組み合わせたい。すべての画面録画と同様に、ユーザーのカメラビデオ用のボックスがあります。別の video 要素の上に video 要素を使用しています。

Answer 1

ビデオを結合するには、ビデオ処理を実行する必要があります。ビデオ処理には、ビデオ データを処理し、新しい結合ビデオ映像を作成する一連の手順が含まれます。

たとえば、https://github.com/Kagami/ffmpeg.js/

を使用できます。

ただし、フロントエンドでビデオ処理を実行することはお勧めしません。これは、大量のコンピューティング能力を必要とし、バックエンドよりもはるかに遅い可能性があるためです。ただし、この決定は目標と対象ユーザーによって異なります。