Developing an SPA frontend and a universal backend for an online cinema

ShowJet is an online cinema with series. The Evrone team developed its first version — a web interface and a core that controlled the cinema and video streams.

The ShowJet team had contracts with different studios, as well as their own voice acting studio, so they could release content with Russian dubbing almost immediately after the episodes aired abroad. These advantages allowed the OTT-TV service to attract many users, and, due to the fact that some TV shows run for years, get good product metrics in areas like lifetime value (LTV).

The task: develop an online cinema and link it with internal services

Cinema web development can be complicated, since video streaming of legal content has a complex business logic. For example, copyright holders require owners of OTT media services to have their own powerful servers with limited access. The received content must be kept literally under lock and key, and the data stream must be transmitted using a special secure protocol. In addition, the owner of the cinema must have a digital rights management (DRM) system for copyright protection.

ShowJet was working to resolve these mandatory requirements of the owner studios when Evrone took over the development of the first version of the online cinema management software.

The solution: SPA frontend and universal backend

We created the initial version of the ShowJet TV and movie streaming application, which consisted of a web interface and a backend in Ruby, with all the necessary functions: content management, users and subscriptions, billing, video streaming, etc.

On the frontend, we implemented two versions of the player, so that the service would work across all platforms and browsers. With the help of the backend, we connected the secure storage with the user interface. It was universal and fed information, not only to the web version, but also to mobile applications on iOS and Android.

Developing a platform for managing an online cinema

The backend of the online cinema that we developed was in-between a web application for viewers and a deep backend with licensed content on the client-side. Since ShowJet had mobile applications that also had to work with this backend, we made the ShowJet core universal. They could control almost everything through it, and they could also connect any platform to it. To make it easy for the client's team to work with the core, we developed a convenient interface as a separate SPA.

To connect different versions of the cinema (web, mobile), we created an authentication module for applications. All external applications communicated with the backend through a token, and we stored user sessions and implemented the ability to log out applications, so that they must request new sessions and tokens. This solved the issue with security (if the user forgot their login info, for example) and tariffs (if the user forgot to pay for the next period of use). The authentication and data access worked through the API.

Thus, we got two levels of data protection: controlling access to video content at the admin panel level (checking a specific user's token) and checking licenses at the DRM level.

In addition to working on the “outside” aspect of the online cinema system design, we also had to get involved in the internal part, where the content was stored and checked. To meet security requirements, ShowJet gave us an API for all protected parts, so that only our backend was accessible from the outside. If we had not taken the time to figure out how all of the internal processes worked, including the DRM and adaptive bitrate system (ABR), then it would have been much more difficult for us to work with these subsystems.

Content protection and adaptive bitrate

In order for the content to reach the viewer, it first traveled from the provider to the secure server of the online cinema, where it underwent a DRM system check. DRM for protecting online videos is often an expensive corporate solution, but, thanks to its complexity, the system does an effective job of protecting the content. We implemented the verification of user rights to content through the API provided by the ShowJet team.

We worked with the ABR in the same way. The ABR adjusted the video quality to match the speed of the Internet connection, delivering video content without interruption. So, if the user had a slow Internet connection, then the video would load in a lower 360p quality, to prevent pauses or long download times and improve customer experience. However, if the channel was wide, the system would automatically select HD quality.

Integrating two versions of the player

To avoid the time and cost of developing a video player from scratch, we decided to use a ready-made solution. First, we chose an open-source player, which needed to be modified for our tasks. We tied the DRM and ABR systems to it, connected it to our backend, then built it into the web interface.

But, over time, the task list grew and improvements to media services took more and more time. So, the client assessed the potential costs of their options and bought a proprietary, but more reliable, solution that we successfully integrated.

However, we did not abandon the first version of the player, since, on some platforms, it was much more convenient to use it than the proprietary one. Thus, we ended up with two versions of the player, which improved cross-browser and cross-platform compatibility.

The result

Ultimately, we were able to create a working MVP with a client-developed design and full functionality. At the time of use, this version of the online cinema fully suited the client's needs. Later, however, the ShowJet team rewrote the solution, due to product changes, and also changed the monetization model.

If you are looking for a team to provide custom software solutions for online cinemas or you need help with movie app development, feel free to check out our other projects or send us a message using the form below.