Create your very own youtube downloader from scratch using js

Posted By : Nitish Devrani | 22-Dec-2020

 

Why you want to do it

 

Many peoples think about downloading youtube videos for various reasons. You can't download directly from youtube because it's an online platform surviving from ads. Just like other OTT Apps.

So why don't you create your own block of code, which gives you the video and its all desired formats?

 

Prerequisite

 

1. Nodejs already Installed in the system.

2. Internet Connectivity.

 

Lets Start

 

HTML5

If you are agreeing to have a YouTube downloader you necessitate HTML to build your components that we are going to handle to associate with our website. First, I have designed a simplistic HTML report that has a headline, data, and a key. So first create an HTML catalog named index.html. There is the HTML code below for our uncomplicated Webpage:

html

CSS3

Following that, we inclination to add remarkable styling to our webpage applying CSS. So let's write the CSS inside our style tag at the head section:

 

Then we can customize our page by below CSS code for an absolute simple styling:

css

 

Also Read: Using template engine in Nodejs

 

js OR Node.js

So now we require to establish up our js and our Node.js Server. First, let’s build a js data. Let’s term it script.js. Then we're performing to connect it to our HTML Data by adding script tags in the base.

 

Inside script.js data, we are going to address that tiny piece of code yield to the console the content of the input. We are ingesting to check that the whole code is working.

 

The function name send URL() will transfer the URL to our server. Then we're going to begin writing code to our Server utilizing Node.js. Primary, we are going to build a folder called Server then produce a data called index.js inside Server pocket. This resolution has the code for the server to operate. Later creating the data, we oblige to move this rule in the command line or terminal in the Server pocket:

js2

The terminal will ask a set of questions about the project. Everything default answers will be nice. Later, we're going to place some bags that we're going to work.

Write the command from down to your terminal & use the needed packages which are {express}, {ytdl -- core} and {cor's}

 

Then establish the 2000:server you require to type remarkable code into the index.js data. You need to expect the packages and set up the server:

js1

Here is a short Setup. You wanted the packages and initiated the server monitor on port 2000.

If you typewrite in the command block/terminal:

 

We'd view Server Works !! At port 2000.

 

so, if the person posts a GET request to the server at the pathway /dwnld then it will return with the inquiry entered with the request. Let’s go to the js and try to make js send a GET request to the 2000:server. Additionally, I applied the middleware_cors( ) therefore my 2000:server can receive requests. I applied to fetch( ) too to send the request from js:

 

So, we can perceive if we bang on the button, we get a reply back from the server with the URL that we send. Then we need to use ytdl-core which endure for YouTube Downloader which will download the video for us. Let’s go back to index.js. We are going to execute it download the video then send it:

 

What is it preparing is that when the user transfers a GET request it takes the query given in the URL then appends a header that says any attachment posted needs to be called {video.mp4}. then apply ytdl to download the video with format whatever you want and then pipe()-function to the person to download.

When you operate this and experiment with it, you will immediately find the response, and if not. Then try applying request wants to be in the URL preferably as compared to fetch. Therefore, you can substitute the fetch into a redirect to the site URL to download the video.

output

and that's it, your pleasure has your very personal YouTube Downloader. Y'all can likewise play throughout among the ytdl-core also attempt to add .mp3 or various formats. Y'all can likewise do is connecting the YouTube A.P.I with your own application. Mayhap Exploring for a video then download it.

 

We are a 360-degree software development company that provides complete web and mobile app development solutions for varied project requirements. Our end-to-end SaaS app development services address your mission-critical project requirements through scalable, responsive, and feature-rich software applications that are easy to scale. We carefully analyze your project requirements and formulate effective strategies to build enterprise-grade web and mobile applications for multiple platforms. For more info, contact us at [email protected]

About Author

Author Image
Nitish Devrani

Nitish is a passionate Full Stack Web Developer and always available to Learn and Teach new WEB Technologies. He is a Gadget geek and always wanted to acquire latest Gadgets.

Request for Proposal

Name is required

Comment is required

Sending message..