Video Streaming Platform in Flutter

Comprehensive product concept

We had to answer the following questions:

• What extra capabilities can we offer users (what features should the app have) so that the fans choose to watch their favorite shows in our video streaming app?
• How do we promote this app similar to YouTube? Where will the users learn about our app and download it?
• How do we retain the users after they download the app and what further ways to monetize the app can we use?

To answer these questions we determined user characteristics and together with the Client’s team built a Customer Journey Map for their audience.

Each touchpoint included the respective actions of the customers, the things they like the most as well as constraints and ways to get around them.

As a result we have designed a video streaming app the users like so much they choose it over YouTube. It is easy to use and provides many extra options Youtube doesn’t have.

We even found ways to monetize the mobile streaming app. One of them is paid previews, i.e. users can pay to watch a show a week before its official release on Youtube.

Flutter streaming app

The client set high standards for user experience: the mobile streaming app had to feature a smooth UI and animation in screen transitions. We suggested developing the app with Flutter, a cross-platfrom technology that not only provides smoth UI and animations but also saves 40% of the budget over native development.

The only thing we were concerned about was whether Flutter would do justice to the video player. Within two days, we built a demo version for iOS and Android, checked its playback speed and how quickly users could fast forward or rewind an HLS-video. In addition to that, we checked if we could wrap a custom UI around the plugin’s navigation capabilities.

Meanwhile, we kept digging into cross-platform development, honing our skills, and contributing to one of the most popular video packages on Flutter — video_player. Surf maintains it as an internal project and occasionally updates the open-source plugin whenever a feature is completed. For example, we fixed several bugs that had to do with handling HLS videos, suggested ways to improve playback in background and PiP modes, wrote detailed descriptions of errors, and improved interactions with the OS and its lifecycle.

We are actively adjusting buffering customization, switching tracks, video quality, and playlist generation. Besides hundreds of lines of Kotlin and Swift code, it takes a lot of business logic in Dart — the native language of Flutter.

Learn more about Surf experience in Flutter mobile app development >>

Latest tech stack for the back end

The backend was built with Kotlin, Spring Boot, and Kubernetes. It’s a modern stack that we use for most of our backend systems. To that, we added the following services: K8s, PostgreSql, ClickHouse, ELK stack.

Web servers and CDNs (content delivery networks) are hosted in the country our Client’s team is located, and it gives us maximum response rate. The closer content is to its consumer, the faster a product works.

Backend optimized for expected load

According to our calculations, the Client’s servers should be able to process several thousand requests per second in order to cope with the expected load. We carried out load testing and measured how the performance of microservices deteriorated under load. Thanks to that, we managed to identify and eliminate some “bottlenecks” even before the project was launched. One such issue was the CDN.

In order to predict the load in the ever-changing circumstances, the backend team monitors Prometheus and Grafana, while operation speed is monitored on the client side. The app  itself makes use of Firebase Performance Monitoring to track the amount of time spent on each API request. That way, we can pinpoint some issues in production and get an understanding of what to optimize.

The following aspects posed real challenges for our team of backend experts:

• selecting a suitable format for transmitting videos to clients;
• creating a logic to process the initial videos;
• ensuring that all processed files are stored and transmitted.

Load testing: safety buffer

According to our estimates, the servers of the video streaming app should be able to process 25 thousand requests per second in order to cope with the expected load. To check the platform for stability, identify areas of concern, and build a robust infrastructure we used phantom — a load generator. The choice fell on phantom because it managed to provide the number of requests per second we needed without consuming too much of the hardware resources.

We carried out load testing and measured how performance of microservices deteriorated under load. Thanks to that we managed to detect and eliminate several “bottlenecks” even before the project was launched.
In order to estimate an expected load under varying conditions, we also monitor back-end response time on the client side. The mobile streaming app utilizes Firebase Performance Monitoring to measure response time of each API request.

The result: the back end did an excellent job of processing a routine load of 25 thousand and had no trouble handling a load of 50 thousand requests, which is twice as much as planned. The client is always aware of any areas of concern within the app and of ways to optimize it.

Powerful admin panel

We’ve developed a web app to manage content using React + Ant Design. In it, the client can publish videos and send user notifications, add meta data and gather viewer stats in real time.

Design and animation

In the beginning, the project didn’t have a name or branding. So first off, we created a general design concept. Later on, the project got its name and branding. To reference the name we used animation.

Before getting started on our own user experience, we examined the UX of existing video players. We looked at best user practices, common patterns, and quality standards; examined the way users interact with the timeline; and optimized interactions with the OS’s native navigation to avoid it accidentally interfering with video navigation. Right now, we are focused on providing a smooth viewing experience even when the Internet connection is shaky.

A player that’s easy to use

We were particularly focused on the player functionality. It had to be at least as good as the Youtube player. In Flutter we had no trouble integrating a video player SDK. 

The new Flutter streaming app now offers a player that supports extremely high download speed and response rate which allows changing the resolution dynamically based on the Internet connection and pre-caching the videos. Users enjoy high download speed, can easily jump back and forward, and are pretty pleased with how HLS videos are streamed. What’s more, we created a custom UI for the player.

The video navigation we implemented is fast and smooth. We added a “skip forward” button set to 30 seconds and a “skip back” button set to 10. The reason behind the timing is users skip forward when they’re bored and skip back to look at something again or listen to a phrase that could have come up a few seconds ago.

Comprehensive data for user analytics

In order for user analytics to be fully comprehensive, we’ve integrated three analytics systems, each with its own unique features and strengths, instead of one:

• Amplitude Mobile Analytics is a service with a user-friendly interface and a wide range of options to plot charts based on enormous amounts of data analyzed.
• Special metrica helps identify traffic sources to understand where your users come from — Instagram blogs, ad integration or descriptions under the YouTube videos.

We paid a lot of attention to A/B testing of the product and also used Firebase Analytics for this. We always tested several hypotheses to improve the UX and user retention.