Since entering the streaming space, we’ve always been intrigued to understand the effort it would take and what it would be like to build out something similar to YouTube that would allow users to view and upload their own videos. As our product teams conduct frequent hackathons, this was a perfect opportunity to dive into it.
To achieve this, we decided to use Bitmovin’s latest solution, Streams, with NextJS 13 and Tailwind CSS. Being a junior developer on the Streams team and Mihael being the product manager, this was also a good way to see its capabilities firsthand and experience what many platforms have already experienced when implementing it in a real streaming environment. When we launched Streams, we built it to give teams a feature-rich end-to-end solution they could quickly deploy or integrate into their existing streaming workflow. We also set our objective to make it a robust solution anyone could use, no matter their level of experience, to get up, launch, and stream quickly.
In this blog post, we will provide an overview of the tools we used and share our experience implementing the various products in combination to develop this YouTube-like app in less than a day.
Overview of the Tools and How They Were Used
Streams
As we mentioned before, Streams is the latest offering that Bitmovin has brought to market. It’s a powerful out-of-the-box live and on-demand video streaming solution that provides an end-to-end workflow and integrates Bitmovin’s industry-leading Live and VOD Encoding, Video Player, and Analytics. With Streams, platforms are able to host, manage, and stream high-quality video anywhere in the world with a unified and seamless workflow. With regards to the specific features, to make content available, simply upload your video library or connect your live source to start encoding. Our proprietary Per-Title encoding will make your content available in the highest quality with lower bitrates so viewers can have the best streaming experience in low bandwidth environments.
Per-Title encoding will also help you save tremendously on storage and delivery costs due to the lower bitrates. For video playback, Streams enables you to brand the Bitmovin Player to your company and customize the Player skin, giving your users a unique and personalized viewing experience. Additionally, with support for client-side ad insertion, you can monetize content with VAST, VMAP, and VPAID ads that can be added in pre-roll, mid-roll, and post-roll. Then, to monitor and track each view session, Streams provides in-depth metrics with its direct integration with Bitmovin’s Analytics, giving you the ability to analyze the user experience and content quality and performance. Lastly, Streams is integrated with multiple global CDN providers, ensuring your content has a global reach and can be viewed in the highest quality anywhere in the world.
Tailwind CSS
We chose Tailwind CSS for this project because it offers a highly efficient and intuitive approach to styling web interfaces. With its extensive collection of utility classes, you can easily create beautiful, responsive designs without the need to write custom CSS code. Tailwind CSS allows you to save time and effort by providing pre-defined classes that can be combined to achieve desired design outcomes. Its focus on responsiveness and customization options ensures that you can easily create interfaces that perfectly fit your needs. By leveraging Tailwind CSS, we can streamline the front-end development process and deliver visually impressive user interfaces in a more efficient manner.
Next.js
Next.js is the perfect choice for you if you want to build fast and scalable web applications. It is a popular open-source framework for building server-side rendered (SSR) React applications. It simplifies development and ensures optimal performance by providing a powerful set of features such as automatic code splitting, server-side rendering, and dynamic imports. Additionally, its seamless integration with popular tools and supportive community make it an ideal framework for creating robust and efficient applications.
How I Built the YouTube-Like Platform
Now, let’s move on to how we used these tools to create our YouTube-like platform.
Our first step was to create a basic Next.js application with a homepage that could display a list of videos. We used the Bitmovin Streams API to fetch the list from our Bitmovin account and display them on the homepage using React components.
Once done, we added a video player component that allows users to view individual videos. We used the Bitmovin Player for this piece to stream the videos and were able to use its out-of-the-box Player controls, such as play, pause, volume control, speed choice, audio track selection, and video quality. We could have also implemented styling options for the Player for branding purposes, but we wanted to focus solely on the core capabilities of the platform. Next, we embedded the Player into the app, which was very easy as we only had to import the JS library and utilize the web component. Alternatively, we could have used the iFrame option to embed the video, but this would have made it harder to customize the experience in the future.
After that, we added a video upload page, allowing users to upload their own videos to our platform. We used the Bitmovin Upload API for this so users could create a new video asset, upload the video file, and encode it into multiple formats for playback on different devices. We also added a basic form that allows users to enter metadata such as the video title and description.
Finally, to style our application, we used Tailwind CSS. We used the pre-defined Tailwind classes in our React components to style our user interface.
Our Thoughts Looking Back
Creating a video streaming platform is a complex task, but with the right tools and frameworks, it can be achieved efficiently and effectively. By using Bitmovin Streams, Next.js, and Tailwind CSS, we were easily able to create a YouTube-like platform that was powerful, fast, and user-friendly. The combination of these powerful tools allowed me to handle complex tasks with ease, such as video encoding, playback, and streaming, while also allowing for rapid UI development and responsive design.
Along with the front and backend implementation, we were also able to gather clear insights into the user experience and quality and performance of the content streamed through the integration with Bitmovin’s Analytics. With this integration, we are able to leverage in-depth audience data on overall views, unique users, browser sessions, regions where the video has been viewed, and much more.
As a follow-up to this project for our next hackathon, we are also thinking of extending our Youtube-like platform to showcase how live streaming can be implemented, as Bitmovin’s Streams also supports this capability. Below find the link to a short video of the results from this project and our GitHub repository, which can be used by others as inspiration or a foundation to get started with the above-mentioned technologies.
Video:
Github Repo: https://github.com/bitmovin/streams-examples
If you’d like to test out Streams, Sign up for our free 30-day trial today and gain access to all of our solutions.
