Video Streaming Platform on Flutter
Our Client is a producer of online content. The company creates top-rated digital projects, as well as projects for TV and movie theaters. They also arrange world-class comedy festivals, collaborate with popular artists.
They have launched top-class shows on YouTube reaching a total audience of over 20 million viewers.
The Client wanted to create their own video streaming platform successful enough to compete with YouTube.
His ambition was to have a video streaming service with a wide variety of content way beyond the format we are used to on YouTube. Also the client was planning to launch interactive trivia shows and series where viewers could make an impact on the storyline. The plan was to attract the YouTube audience with this extraordinary content and gain new subscribers, thus expanding their own audience.
At the start of the project the Client had 36 shows scattered all over YouTube: some of them were uploaded to large channels, others — to the personal channels of the participants. Therefore, there had to be a single service to bring together all the shows and provide the company with accurate statistics on each project.
- We had to develop a mobile app with UX of such high quality and tools so convenient that users would choose it over Youtube. The service had to be able to defy competition with Youtube and enable our client to transfer a significant part of their audience to their own platform.
- We needed to develop the infrastructure required for the service to function: backend that supports service providing under peak load; customized CDN with low maintenance requirements for fast data flow; an admin web interface to manage content and monitor statistics.
We have created and successfully launched the MVP version of the app and have been upgrading the product for a few months together with the Client. We are currently working on the retention rate, carrying out A/B testing, and looking for efficient ways to monetize the content.
The app is a success. The users are extremely happy with the UX, quality of the video player, it’s response and download speed. The app supports dynamic resolution change depending on the connection quality, video pre-caching, and streaming to a TV. All these functions are accessed via a user-friendly interface.
The mobile app was built with Flutter. Thanks to that we managed to reduce time to market and launch the product as soon as possible, cutting development time by 30%.
Surf has created a platform along with the whole infrastructure: backend, CDN, administrative web interface enabling the client to manage the content and monitor statistics.
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 on our platform?
- How do we promote the app? 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 product 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 app. One of them is paid previews, i.e. users can pay to watch a show a week before its official release on Youtube.
The choice of Flutter
The client set high standards for user experience: the 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.
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 platform 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 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.
Moving forward, the Client decided to use their own service as a backend and an admin dashboard since it perfectly caters to the needs of both their content makers and users.
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.
As a result when you open the app it looks like this:
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 service 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.
Videos tagged as “premiere” are preceded by pre-rolls, i.e. short ads. Such videos integrated into the content are run in background and PiP modes. They can be configured using flexible settings in the custom admin dashboard.
Intro at the first launch
When the app is first installed, users are shown an intro, which is an image-building video incorporating highlights from several shows on the app. Viewers can skip it, watch it again, or enter the app once the video is over. In fact, this intro has its own fans: they not only don’t wait for it to end but watch it over and over again.
New interactive features
We added reactions. Viewers can now send reactions to specific parts of the videos they enjoyed the most, choosing from a set of four reactions. All they have to do is tap the icon at the side of the screen, and the app will show the four most popular emojis. This relatively small and dynamic interaction is a way of collecting user feedback.
The idea behind this redesign belongs to the client. We tweaked the elements of the signature style by altering fonts and replacing the icons with their rounder versions that we have all gotten accustomed to on social media.
We also redesigned the mini player:
- added more contrast to configuration buttons and icons,
- added a standard range of playback speed to sound configurations: 0.5—1—1.25—1.5—2.5,
- added a rewind button: until recently, viewers could only rewind with a gesture, and now they can do it with one long tap or two quick ones,
- added the Full HD option.
As a copyright watermark, we used the symbol of the app. Since viewers can share a 30-second snippet of any video with their friends, we had to make sure the watermark couldn’t be clipped off. Videos are dynamic entities. With that in mind, we wrote an algorithm that moves the watermark around the screen as the video goes along. That way, it’s harder to overlook or crop.
We added three types of support:
- feedback form,
- internal messages (sent by the Client tech support),
- Telegram bot, where we gathered all of the frequently asked questions and added the means to contact a customer support operator.
Switching between the smartphone and the TV
This is the feature the fans keep thanking us for. While the videos are now available in Full HD, and fresh content is added weekly, users are more interested in watching it on a screen larger than their smartphones. Users can now watch series on any device that has a browser, whether it’s a smart TV or a computer. Viewers can pause an episode and resume watching it on a big screen, having followed a couple of easy steps in the instructions.