Architecture for designing interactive video

Started by Bravoman1, Aug 23, 2022, 03:07 AM

Previous topic - Next topic

Bravoman1Topic starter

Interactive video content allows its viewers to interact with the content and influence its further storytelling. This is a unique direction of video content, which has been actively developing recently in various fields.
In this topic, we want to share our experience in creating a platform for designing interactive video content.


Use-case diagrams are used to formalize functional requirements. It makes sense to build a use case draft during the study of the terms of reference, it consists of a graphic diagram that describes the actors and use cases (use cases are services that our system provides to actors), as well as a specification, which is a textual description of specific sequences of actions (the flow of events ) that the client performs when working with the system.

Our user use cases:

    Basic for any system (registration, authorization, logout)

    Custom (create a project and watch an interactive video)

When creating a project, the client describes the project and uploads a preview for the video.
Next, the user enters the project editing panel. In it, he can add scenes and see the preliminary result.
The added scene can be edited or deleted by the user.
When editing a scene, the client enters the scene name, description, uploads the video and adds a button if this scene is one of the video branching options.
On the graph, you can easily understand the script of the video. If the user clicks on the "Vacuum Cleaner" button, then at the end of the video he will see a cat on a vacuum cleaner. Or a cat on the couch, if he presses the "sofa" button.

Technology stack

To implement the project, we needed the following technology stack:

Front end: React

Back-end: Docker, mssql, C#, postman, swagger


The client part of the service is implemented in the TypeScript language (a typed version of the JavaScript language developed by Microsoft), which allows you to write typed code, which makes it easier to maintain and refine, since at each stage of development and in each line of code the compiler (respectively, the developer ) knows what type of data is contained in a particular variable or returned by a function. React was chosen as the framework.

To increase the speed of the service, the application is built through webpack, using the configuration for development and for combat hosting, depending on the needs at different stages of development. Webpack builds only the necessary files by importing the specified dependencies, which makes the build result minimal, which, in turn, increases the speed of the service and page loading.

To automate routine development processes and to simplify code writing, ESLint was installed and configured, and Prettier was configured for code style uniformity. Together, Prettier and ESLint allow you to see stylistic deviations or errors even at the stage of writing code, in the IDE (by the way, VS Code was used for development, as it has many useful extensions, including ESLint).

The client part of the application is designed in accordance with the KISS (Keep it simple, stupid) principle, which is manifested in the simplicity of a particular component and the structure of the project as a whole. This principle makes it faster and more efficient for newcomers to create and refine functionality, and lowers the threshold for developers to make small improvements to specific features or application components.

Business logic, work with the global state and all interaction with the server part was moved to a separate directory and implemented using the redux state manager and redux-saga, which allows you to debug and fix possible errors many times faster, and also simplifies the logic of the components by making them easier to understand and extend (components are only responsible for external interaction seen by the user).

Material-UI from Google was chosen as the starting UI-kit, as it meets the requirements of the utilization and contains most of the basic components used in the project.

To develop registration forms, create a project and edit the scene, the React Final Form plugin was used, which supports typing form fields and allows you to get rid of unnecessary code and simplify the creation of client forms.

When implementing the scene editor, the module in which the user spends the most time, React Flow was used, a plugin that allows you to create visual editors using links and a canvas, as well as interactive diagrams.

To interact with the server part via the API, a self-signed security certificate was issued and installed for the service, which made it possible to work with secure Cookies sent by the server part of the service.

Total. As part of the development of the MVP, the main client path for creating interactive cinema was fully implemented, including registration; authorization; creating a project with preview loading; creating, modifying, deleting and linking scenes, as well as watching a movie. Also, in order to familiarize users with the service, a Landing-page was created with readable information about the service.

UML class diagrams

The class draft is central to the design of an object-oriented system. Class notation is used at different design stages and is built with varying degrees of detail.

The class diagram uses special characters to display program data types and relationships between them, although in some cases some other elements can be used - packages and even class instances (objects).

Our draft shows 3 classes (objects):

    User - user;

The user class contains the following attributes:

    Unique user identifier (id)

    First name and last name (firstName, lastName)

    Contact information (email)

    User data (bitrhDate)


    Avatar file (avatar)

    Profile creation date (createdAt)

    Information about the last login (lastLoginedAt)

    User projects (projects)

And the following set of operations:

    Removing a user (remove)

    Updating client data (update)

    Update Avatar (updateAvatar)

A class draft allows for various kinds of relationships. In our diagram, we used the relationship between classes - inclusion, in object-oriented programming, two types of this relationship are distinguished - composition and aggregation. We used composition - this is a kind of inclusion, when objects are inextricably linked with each other (their lifetime is the same). The composition relationship is indicated by a filled diamond, which is drawn from the side of the enclosing class - for example, the Projects class includes the User class, because the project always has one author (i.e. User-a).

    Projects - project;

The projects class contains the following attributes:

    Unique user identifier (id)

    Project creation date (createdAt)

    Project update date (updatedAt)

    Project name (name)

    Short description of the project (shortDescription)

    Full description of the project (fullDescription)

    Project preview (overview)


    User (author)

And the following set of operations:

    Removing a project (remove)

    Project update (update)

 The Projects class includes the Scene class, a project can have multiple scenes.

    Scene - scene;

The scene class contains the following attributes:

    Unique client identifier (id)

    Scene creation date (createdAt)

    Scene update date (updatedAt)

    Scene name (name)

    Select button name (buttonName)

    Video for the stage (video)

    Scene coordinates in graph (x, y)


    Parent scene (parent)

    Child scene (children)

And the following set of operations:

    Deleting a scene (remove)

    Scene update (update)

    Parent assignment (setParent)

    Adding a child scene (addChild)

    Removing a child scene (removeChild)

    Changing the video scene (updateVideo)

    Moving the scene in the graph (move)

 The Scene class includes the Projects class, as a scene always has one project.


Back-end: Docker, mssql, C#

The back part is implemented in C# on the core 3.1 platform, since it is an LTS version. LTS stands for Long-Term Support or Long Term Support. This means that an utilization or operating system will receive security updates and sometimes even feature updates for a longer period of time than usual.

LTS versions of distributions and programs are considered very stable, as they are thoroughly tested before being released. It is important to note that the LTS version will not necessarily receive feature updates, but you will receive security updates and bug fixes.
These systems are recommended for production, business and enterprises because they will be supported for several years and will not be subject to breaking changes.

Advantages of LTS releases:

    Programs receive security updates for a long time (for example, for Ubuntu it is five years);

    Thorough testing;

    There are no major changes that break compatibility in updates;

    You will have enough time to prepare for the transition to the next LTS release.

Disadvantages of LTS releases:

    Do not contain the latest features and capabilities;

    There is no support for the newest hardware;

    There are no latest software versions.

To establish contracts between the back and front parts, swagger was screwed. Swagger is a framework for the RESTful API specification. Its charm lies in the fact that it makes it possible not only to interactively view the specification, but also to send requests - the so-called Swagger UI, this is how the list of implemented methods looks like, which is automatically generated by swaggero.

The contract shows that a standard set of handles (controllers) for authorization and registration was implemented, the DB was immediately hosted in the cloud, which allowed us not to worry about it in the future. mssql database is used.
Connecting to the DB via the Microsoft.EntityFrameworkCore.SqlServer and Microsoft.AspNetCore.Identity.EntityFrameworkCore NuGet packages. A NuGet package is a single ZIP file with a .nupkg extension that contains compiled code (DLL), other files associated with that code, and a descriptive manifest that includes information such as the version number of the package.

Postman was used to test requests. Postman is an API platform that allows developers to design, build, test, and iterate their APIs. Requests through Postman were successful, and new records appeared in the database, but requests were rejected from the front until the CORS policy was configured. CORS policy is a mechanism that uses additional HTTP headers to allow the user agent to obtain permissions to access selected resources from a server on an origin (domain) other than what the site is currently using.

Big data problem

To work with the main functionality, it was necessary to solve the issue of storing large video files. To do this, a client directory is created on the disk, the project directories are in it, and the video files themselves are already there, and the relative path to the file is recorded in the database.

The problem was downloading video files, there are restrictions on downloading large files via http. The solution was to download via https protocol.

Also, the issue was storing an array of scenes in the DB, or rather their GUID. GUID is a 128-bit statistically unique identifier. The solution was to store one concatenated string with scene guids. Editing was carried out by editing this very line.


In general, this service is mostly known as a quality domain name registrar, licensed and offering favorable terms. The range of tariffs for both shared hosting and servers is quite diverse. Storage of 30 backup copies is available on all shared hosting plans, choice of control panel - ISPmanager, cPanel, Plesk, PHP 5.1–7.1, Perl 5.10, Python 2.6, MySQL without restrictions on the number of databases (except for the initial plan), double anti-virus scanning and automatic protection from DDoS. The hosting tariffs themselves are divided into economy, high-speed.


Deploy is the process of uploading a new version of a site to a server (or servers). This process can be quite complex and is highly dependent on the technologies used. For deployment, we used web deploy through visual studio.

Web Deploy is a tool from Microsoft that greatly simplifies the migration, management, and deployment of IIS web servers, web applications, and sites.

Here are two reasons why you should install Web Deploy on your server:

    Easy utilization publishing. Web developers coding in Visual Studio (the integrated development environment) and WebMatrix (the development tool) can use Web Deploy to publish their applications to the production server. If you would like to provide your customers with this efficient and easy way to publish, install Web Deploy on your webserver.

    A new market for your hosting services. WebMatrix helps users find the right hosting plan in the Microsoft Hosting Services Collection (a directory where hosting providers advertise their offerings). If you want to see your hosting plans in this collection, one of the requirements is that you have a Web Deploy tool.


When registering, a client creates an entry in the DB with his id and a directory on the disk is created for it, while creating projects, the corresponding entries in the database and directories are also created. Then the user, creating a scene in the project, creates a graph that is stored in the DB as a scene that has an array of child scenes and an array of parent scenes. Thus, it contains complete information about which ways you can get into it and which ways you can get out. Uploaded videos are stored in the project directory.


There is very little data for architecture in the topic. Not even a basic blueprint. The only thing I can say right away is that the User class needs refactoring. It combines both the user and personal data.
For many regions (GDPR, CPPA) this is problematic in itself. But in any case, it is worth understanding that not all users are people. Sooner or later there will be integrations with these services and so on.