用于基于Web的视频编辑的数据模型

Question

我正在开发一个网络视频编辑器，用户可以通过时间线界面编辑视频，该界面类似于下图中的红色矩形部分。

为此，我认为服务器端应该有一个树形数据模型来维护用于编辑操作的所有数据，如下图所示。

以接口图片中的时间线为例，有一个TimeLine对象，其中有一个VideoGroup子对象和一个AudioGroup子对象。 VideoGroup对象具有2个Track对象的集合，即Video 1和Video 2 。 The AudioGroup对象具有1个名为Audio 1 Track对象。 Video 1是VideoGroup对象的第一个Track对象，它具有4个Media对象的集合，第二Track对象Video 2具有6个对象。而Audio 1是AudioGroup对象的唯一一个Track对象，没有任何对象。

对于我的应用程序，在后端，数据模型用于应用程序执行实际的编辑操作。 在前端，应该以图形化的方式将其显示在网页上，如界面图片中所示。 为了实现此目标，我想知道既然服务器端已经有一个数据模型，我是否需要在客户端创建一个对应的JavaScript数据模型？ 如果不是这样，则每次用户完成修改数据模型的编辑操作时，前端网页都需要从后端重新加载数据模型，以便向最终用户显示其更新版本。 这样行可以吗？

Answer 1

鸟瞰，高层答复：

听起来就像您在构建单页应用程序。 首先，您的应用程序将通过API加载所需的视频/音频/数据，该API代表数据结构的各种模型/类。 在浏览器中，您会将这些数据加载到前端框架（Angular，React，Ember或任何您喜欢的框架）中。

这些模型很可能会镜像您拥有服务器端的数据结构，但是可能会有变体来处理特定的前端问题。

前端框架将呈现您的时间轴并处理用户执行的各种操作。

通过保存操作或定期，您将通过API将（PUT）更新发送回服务器，记录用户对时间轴的更改。