JAVASCRIPT

How to build your own Youtube – Part 1


YouTube is the largest and most popular Global video-sharing website. In its early stages, it began as a simple but highly innovative way users can upload, view, comment and share videos.

When YouTube started in 2005 they had to build their entire stack from scratch. Today you can make use of cutting edge services to greatly simplify the work of building a page like this.

Wouldn’t it be interesting to learn together how we can build our own YouTube clone?

There are many great choices for frameworks these days and sometimes I spend days just deciding which technology would be a good fit for any app I want to build. I have finally decided the technologies we’ll use for this app. So in this tutorial, we’ll be using Angular 1.4.33 and Node 5.2.0 . Essentially the MEAN Stack. A basic knowledge of AngularJS, NodeJS, Express and MongoDB is needed for this tutorial.

screen shot 2016-06-01 at 4 37 06 am

Introduction

Our goal through this series is to demonstrate how to efficiently build a personalized Youtube-like app. I’m excited about this series because we are going to focus on how to upload, transcode, manipulate, embed and deliver video content. These are functionalities that books and blogs rarely cover in their tutorials leaving it for the dark overlords to figure out.

There are several challenges developers face when trying to manage, optimize and deliver high quality video content to their users. I’ll mention some here:

  • Storing massive and endless amounts of user generated videos.
  • Transcoding and normalizing videos – converting the original file to a web and mobile friendly video format.
  • Supporting live streaming and automatic video adaptation to the viewers’ available bandwidth.
  • Optimizing the video file for fast delivery while reducing bandwidth and IT costs.

Seems like a lot to deal with right? As a developer, you just want to bang out a good looking, efficient and highly optimized app in the least amount of time possible. I’ll introduce you to a cloud service called Cloudinary that provides an end to end solution which takes away much of the associated headache and allows you more time to focus on your app’s business logic.  

Cloudinary started out with providing cloud storage and manipulation for images and text files and now provides an end-to-end video solution as well. In the project management app tutorial, I used Cloudinary extensively for storing all the files uploaded by users of the app.

Why Use Cloudinary?

Cloudinary is a cloud-based service that provides an end-to-end media management solution for images and videos, including upload, storage, administration, manipulation, optimization and delivery.

It enables developers to dynamically convert videos to all relevant formats suitable for web viewing, optimized for web browsers and mobile devices, normalized, and manipulated in real time to fit your graphic design. All this can be done using a rich set of dynamic on-the-fly video manipulation capabilities.

Cloudinary manages your web application’s resources in the cloud with a high-performance cloud-based storage solution. Highly available servers support fast upload and download rates, ensure your resources are secure, and scale for handling high load and bursts of traffic. Your resources are then delivered through fast Content Delivery Networks with advanced caching techniques, allowing you to efficiently deliver your content to visitors all around the world.

What To Expect

These are the features to expect during this tutorial series:

Conclusion

Stay calm, grab a cup of coffee or a bowl of coldstone and join me in subsequent posts as we figure out how to build our own Youtube. :smile:

Check out Part 2 here

If you have any questions or observations, please drop your thoughts in the comment section below.

 

PROSPER OTEMUYIWA

About PROSPER OTEMUYIWA

Food Ninja, Code Slinger, Technical Trainer, Accidental Writer, Open Source Advocate and Developer Evangelist.