Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Node.js Youtube-DL Express Example to Build Youtube Video Thumbnail Downloader in Browser Using JS

Posted on January 25, 2023

 

 

Welcome folks today in this blog post we will be using the youtube-dl library to build youtube video thumbnail downloader in browser using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to initialize a new node.js project using the below command as shown below

 

 

npm init -y

 

 

npm i express

 

 

Now we need to make the index.js file and copy paste the following code

 

 

index.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const express = require('express');
const bodyParser = require('body-parser');
const path = require("path");
 
const fs = require("fs");
const dirpath = path.join(__dirname);
  
const {exec} = require('child_process');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.get('/', (req, res) => {
    res.sendFile(__dirname + "/index.html")
})
 
app.listen(5000, () => {
    console.log('listening on port 5000')
})

 

 

As you can see we are importing the express library and then we are applying the bodyparser middleware and then we are loading the index.html file when user goes to the / home route.

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtube Video Thumbnail Downloader in Node.js</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">
            Youtube Video Thumbnail Downloader in Node.js
        </h1>
        <form action="/download" method="post">
            <div class="form-group">
                <label for="url">Enter Youtube URL:</label>
                <input type="text" name="url" required placeholder="Enter Youtube URL" class="form-control">
            </div>
            <div class="form-group">
                <button class="btn btn-danger btn-block">
                    Download Thumbnail
                </button>
            </div>
        </form>
    </div>
</body>
</html>

 

 

 

 

As you can see we are importing the bootstrap library cdn and then we have the simple html5 form where we allow the user to enter the youtube video url and then we have the button to download the thumbnail. Here we are making the post request to the /download route. Now we need to define this route inside the index.js file as shown below

 

 

index.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
app.post('/download', (req, res) => {
    var url = req.body.url
    exec(`youtube-dl --write-all-thumbnails ${url} --skip-download`, (err, stdout, stderr) => {
        if (err) {
            console.log(err)
        }
        else {
            // download the thumbnail as a attachment
            fs.readdir(dirpath, function (err, files) {
              const imagefiles = files.filter(
                (el) => path.extname(el) === ".jpg" || ".webp"
              );
              // do something with your files, by the way they are just filenames...
                console.log(imagefiles)
            });
        }
    })
})

 

 

As you can see we are getting the url of the youtube video and then we are executing the command using the exec() method and inside that we are using the youtube-dl library to download all the thumbnails of the video.

 

Recent Posts

  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme