Webベースのビデオ編集のデータモデル

Question

ユーザーは、次の画像の赤い矩形部分に似たタイムラインインターフェイスでビデオを編集できるWebビデオエディタを開発しています。

これを達成するために、私は次の図に示すように、編集操作のために使用されるすべてのデータを維持するために、サーバー側のツリー構造のデータモデルがあるはずだと思います。例として、インタフェース画面にタイムラインを取る

一VideoGroupサブオブジェクトと一つAudioGroupサブオブジェクトを有するものTimeLine目的があります。 VideoGroupオブジェクトには、2つのTrackオブジェクトのコレクション、つまりVideo 1とVideo 2があります。 The AudioGroupオブジェクトには、Audio 1という1つのトラックオブジェクトがあります。 Video 1の場合、VideoGroupオブジェクトの最初のTrackオブジェクトは4つのMediaオブジェクトのコレクションを持ち、2番目のTrackオブジェクトVideo 2は6を持ちます。Audio 1の間は、AudioGroupオブジェクトのTrackオブジェクトは1つしかありません。

私のアプリケーションに関しては、バックエンドでは、実際の編集操作を実行するためにアプリケーションでデータモデルが使用されます。フロントエンドでは、インターフェイスの画像に表示されているようなグラフィカルな方法でWebページに表示する必要があります。この目標を達成するために、サーバー側に既にデータモデルがあるので、クライアント側に対応するJavaScriptデータモデルを作成する必要があるのだろうかと思います。そうでない場合、更新されたバージョンをエンドユーザに表示するために、ユーザが編集操作を行うたびに、フロントWebページはバックエンドからデータモデルをリロードする必要があります。そんなに行くのはいいですか？

Answer 1

鳥瞰図、ハイレベルの答え：

は、あなたが単一ページのアプリケーションを構築するような音。まず、アプリケーションは、データ構造のさまざまなモデル/クラスを表すAPIを介して、必要なビデオ/オーディオ/データをロードします。ブラウザでは、このデータをフロントエンドフレームワーク（Angular、React、Emberなど）にロードします。

モデルはサーバー側のデータ構造を反映している可能性がありますが、特定のフロントエンドの問題を処理するバリエーションがある可能性があります。

フロントエンドフレームワークはタイムラインをレンダリングし、ユーザーが行うさまざまな操作を処理します。

セーブアクションを使用するか、定期的に、ユーザーの変更をタイムラインに記録して、 をAPI経由でサーバーに送信（PUT）します。