JAVASCRIPT

How to build your own Youtube – Part 4


Introduction: If you missed the earlier parts, 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.

We now have the ability to upload videos to Cloudinary as shown in the previous blog post. Next, we are going to save the details of those videos and also display them on the homepage.

Step 1: Set up Video Model

Create a new file video.server.model.js in server/models directory. Open up the file and add this:

video.server.model.js

We intend to store the title, unique identifier of the video on Cloudinary which is represented as public_id, description, video Url, duration, format  and the time the video was uploaded. 

Step 2: Set Up Video Controller

Create a new file video.server.controller.js in server/controllers directory. Open up the file and add this:

video.server.controller.js

We have two methods called create and retrieveAll to save the details of the video to the database and also retrieve all videos respectively.

Step 3: Configure Server Route

We need to add two API routes like so /api/videos/create and /api/videos to enable us to send information about the video from the frontend to the backend. The first route will enable us to save the video details, the second route will enable us retrieve the video details.

Open up server/routes.js and add this:

Great! That’s all we need for our backend right now. Next, let’s fix some things on our frontend.

Step 4: Set up Video Service

Create a new file video.client.service.js in public/js/services directory. Open up the file and add this:

We created our Video Service using the AngularJS factory method. You can learn more about that here. The create method makes a post request to the api/videos/create API route we created earlier and returns a response. The retrieveAll method makes a get request to the api/videos route and returns a promise. Read more about promises here.

Step 5: Set up Home Controller

Create a new file home.client.controller.js in public/js/controllers directory. Open up the file and add this:

home.client.controller.js

We created a listVideos function that calls the Video Service, thus invoking the retrieveAll method that returns all the video details in the response. We are storing the response in the allVideos scope variable. We’ll make use of that variable on the home page to display a list of all the videos.

Step 6: Tweak Upload Controller

We have figured out how to retrieve all videos that have been uploaded. Next, we need to be able to send video details like title, description, duration and the rest once the video is selected on the upload page. So, we’ll take advantage of the callback in the success method of the Upload service present in the UploadController  and send all the video details to be stored in the database like so:

So, update your upload.client.controller.js to have this below:

Step 7: Reference the new files in index.html

We created home.client.controller.js , video.client.service.js on the frontend. So, let’s reference the link to those files in the index.html file like so:

Step 8: Update the homepage to display and render uploaded Videos

Update the home.client.view.html to contain this:

The major section of this code block above is this:

allVideos is a scope variable. We assigned the video response to it in the HomeController. It contains an array of objects, So we are using ng-repeat to loop through all the values and display them.

We are displaying them using the HTML5 Video tag. Now, you must have noticed the trustUrl filter. Why do we have that? Chill, let me explain!

AngularJS is not comfortable with displaying videos within the source tag of HTML5 Video element especially when the Url has not been certified as trusted. The solution to this is creating a filter that tells AngularJS that the Url is indeed a trusted resource Url.

Step 9: Set up Url Filter

Create a folder filters in the public/js directory. Next, create a file trustUrl.filter.js inside the filters folder and add this to it like so:

trustUrl.filter.js

If you don’t know about the AngularJS $sce service. Please read more about it here.

Now, try to upload a video! You should have something like this:

When you just uploaded a video..

screen shot 2016-06-22 at 5 54 16 pm

On the homepage, after you have uploaded a video…

screen shot 2016-06-23 at 4 56 04 am

Aside: Direct Uploading From the Browser

We have been uploading to a NodeJs backend that uploads to Cloudinary. It’s also possible for us to bypass our server and upload a video from our frontend straight to Cloudinary. Imagine a case where you just want to use only AngularJS and firebase, or Jquery, or EmberJs, stripping out the headache of including a backend.

In our case, all you need to do is this:

Step 1: Update your UploadController

Update your upload.client.controller.js like so:

Look at the section critically below:

We are sending a post request directly to Cloudinary’s API instead of our Nodejs API. Take note of the the following: cloudinary.config().upload_preset and cloudinary.config().cloud_name + “/upload”.

First, you need to enable unsigned uploading for your Cloudinary account from the Upload Settings page. Enabling unsigned uploading creates an upload preset with a unique name, which explicitly allows uploading of videos without the API secret. The preset also defines which upload options will be applied to videos that are uploaded unsigned. You can edit the preset at any point in time, to define the parameters that will be used for all videos that are uploaded unsigned from user browsers or mobile apps.

We injected cloudinary into our UploadController and we need to configure the upload_preset and cloud_name. Open up your public/js/app.js and update it like so:

app.js

Here, the cloudinaryProvider has been injected, then the cloud_name and upload_preset set here. You can get those details from your Cloudinary console.

In a real live environment, I won’t expose my cloud_name and upload_preset like this, I’ll rather load them from an environment/config file for security reasons.

With this setup, you can upload videos directly from your browser! Yaay!

Conclusion

In this post, we have looked at uploading a video, saving the details and also displaying the videos. We have also looked at performing a direct upload operation from the browser to Cloudinary.  In the next post, we’ll look at 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.  The source code for direct upload is here . I put the code in a different branch.

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.