At a Glance:
The requirement here was to create a platform that can handle any video file uploaded. The platform should convert it to appropriate formats supported by different browsers. The app should also optimize it for different screens and create multiple-bitrate variants for the video. So that a user can experience a seamless video streaming.
There were many challenges that we faced while building the app. The first one is that the client already had a database of 30k+ videos. He wanted it to convert them into various formats and sizes (240p, 480p, 720p, 1080p etc..). Another challenge was the budget constraint as the client could not afford a streaming server, he was looking for an alternate inexpensive solution. Our challenge here was to create world-class video management & sharing solution within the given budget.
We first understood the client’s requirement clearly. As he already had created wireframes in InvisionApp, it got easy for us to understand user interaction functionality. We then created a custom HTML based on the UI and then integrated it using ReactPWA. We created various components in React so that the code can be optimized and reused.
The real challenge was managing 30K+ videos and serving them at high availability. So we implemented a solution with serverless architecture to convert the videos. We implement DigitalOcean spaces to store the converted videos, thus serving them via the content delivery network
By adding 20 in-house computers to the cluster of microservice during non-working hours we were able to convert and upload all the videos within a few days.
Well, yes it took time as a single video was converted with FFMPEG into 5 resolutions ranging from 144p to 1080p and 3 web formats for each resolution, WebM, Mp4 & OGV with screenshots every 5 seconds for all the 15 generated videos. That is a huge amount of data. Spaces are not a concern anymore as they are available at a cheap price, a large amount of data was a good fit for the system.
We also uploaded all the conversions to DigitalOcean’s Spaces and served them via a content delivery network.
But this was not enough, so we created a smart video player. The player would detect the bandwidth & browser of the user & select the appropriate format & bitrate based on it. Thus creating a seamless streaming experience.
Besides this, it also had various features like user management, Commenting system, Review system, ability to follow a user, Favourite videos, Video Recommendation and much more.
The results were amazing, it improved the application and delivered videos with such ease, helping our client gain more traffic and delivering