JAVASCRIPT

How to build your own Youtube – Part 3


Introduction: If you missed part 1 and 2, in this series we are covering how to build your own YouTube clone, Click here.

Note: You need to have at least some prior experience with client-side Javascript frameworks and Node.js to get the most out of this tutorial.

Step 1: Set Up Necessary Files

  1.  Create a new file upload.client.controller.js in public/js/controllers
  2.  Update your style.css file with style.css
  3.  Create a new file upload.client.view.html in public/views/pages
  4.  Create a new file upload.server.controller.js in server/controllers

Run this command below in your terminal to install these frontend modules

We are installing an angular file upload directive and Cloudinary angular SDK.

Run this command below also in your terminal to install these node modules

cloudinary – Nodejs module that provides simple API methods to upload to Cloudinary Storage.

multiparty – multipart-formdata parser which supports streaming for file uploads.

Open up your public/index.html file and reference the frontend files that has just been installed like so:

index.html

In the body of the index.html file, also add this:

This ensures a non-loggedin user can’t see the the upload link on the navbar.

Next, open up your public/js/routes.js file and add this to the route config like so:

Step 2: Setting Up Backend Upload Routes and Controllers

Open up your upload.server.controller.js file and add this:

upload.server.controller.js

Inside this controller, we have an uploadVideo function. This is where the actual uploading works. We are using multiparty to ensure the video is been uploaded in streams.

cloudinary.uploader.upload is a method from the Cloudinary Nodejs module that we installed. It masks the upload API route from Cloudinary which accepts several parameters like the file path of the video and resource_type. If we don’t specify the resource_type, it would assume that we are trying to upload an image file by default.

The second argument is a callback function that returns a response from Cloudinary. We’ll look into this in the later part of this post.

Open up your server/routes.js and add this:

routes.js

Once we hit that route, it invokes the uploadVideo functionality and uploads the video to Cloudinary.

Ohh, We have forgotten to add our api_secret, api_key and the necessary credentials to our project for Cloudinary to be able to authenticate this request.

Now, head over to your dashboard https://cloudinary.com/console . Under Account details, you will see your API Key, API Secret and Environment Variable.

Copy your Environment variable and add it to your .env file like so:

Open up your config/secrets.js and add this like so:

This URL will be loaded into the process memory once your application starts up. Cloudinary gets your credentials from the URL.

Step 3: Setting Up Frontend Upload Routes and Controllers

Open public/views/pages/upload.client.view.html and add this:

upload.client.view.html

Next, let’s set up the controller that is responsible for this page.

Open public/js/controllers/upload.client.controller.js and add this:

upload.client.controller.js

Here, we injected the Upload service from ng-file-upload angular plugin into the UploadController. The uploadFiles function loops through the files that are been dragged or dropped into the upload zone and makes a POST request to our backend Nodejs upload API that we wrote earlier. The backend API then uploads the video to Cloudinary.

The uploadFiles function has been tied to the upload button and the file upload drop zone through the ngf-drop and ngfselect attribute in the upload form.

Now, let’s register the ng-file-upload module in our app.js.

Open public/js/app.js and add ngFileUpload like so:

app.js

Now, when we load the application, it should load up our upload page successfully like so:

screen shot 2016-06-15 at 1 57 05 pm

Go ahead and upload a video now. It uploads the video successfully to Cloudinary.

Videos can be uploaded to Cloudinary in a variety of formats: mp4webmflvmovogv3gp3g2wmvmpegflvmkv or avi

Check out this video below:

Note: Currently, Cloudinary’s Free plan allows the following:

  1. The maximum video file size for uploading is 40MB
  2. The maximum online video manipulation size is 40MB

If your service requires more than the specs listed above, consider upgrading to their paid plans.

Step 4: Setting Up Video Preview

Let’s set up preview for our video even as it’s being uploaded.

Open up upload.client.view.html. Just after this piece of  code for the progress bar, add this below:

file.result.response.url contains the video URL returned from Cloudinary. If that’s not available, it defaults to the local file that’s being uploaded and displays that in the HTML5 video player.

Now, try uploading a video and see how cool the video preview works!

screen shot 2016-06-15 at 8 05 08 pm

screen shot 2016-06-15 at 8 04 47 pm

Step 5: Get all the Information

Let’s take a good look at the various information Cloudinary provides us with when we upload a video.

Open your upload.client.controller.js file and just within the success function inside the $scope.uploadFiles function, add console.log(data.response) like so:

Now upload a video, and checkout the console section of your browser.

screen shot 2016-06-15 at 3 30 00 pm

screen shot 2016-06-15 at 3 30 15 pm

screen shot 2016-06-15 at 3 30 27 pm

screen shot 2016-06-15 at 3 30 37 pm

A typical response in one glance is shown below:

screen shot 2016-06-15 at 4 26 32 pm

Just look at all that info! This is crazy! :smile:

public_id, signature, original filename, width & height of the video, bit_rate, duration, URL, secure_url, type, audio bit_rate, audio codec, video bit_rate, video codec,  frame rate, frequency, tags and several others.

Availability of this kind of information can help influence all sorts of decisions as to how the video service you are building will work, the types of video your audience uploads or whatever idea you have in mind that deals with video manipulation and delivery.

Wrapping Up

In this post, we have simply looked at uploading a video. This is one of the most basic operations you can perform using Cloudinary. In the next post, we’ll look at saving & displaying video details, chunked video upload & eager video transformations: assigning tags, removing audio, changing video dimensions on the fly, changing video background & video cropping.

The source code for this project is on github. Check here. 

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

 

PROSPER OTEMUYIWA

About PROSPER OTEMUYIWA

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