Oh Snap!

Please turnoff your ad blocking mode for viewing your site content

Hit enter after type your search item

Build a Video Converter Application in Node.js Using Fluent-FFmpeg Library Full Example

/
/
/
220 Views

 

 

Hello friends today in this tutorial I will be telling you about how to create a video converter kind of a application in node JS using fluent-ffmpeg library. So you can see the screenshot of the application that is given above.

 

Requirements

So now inside this I will tell you the requirements of building this application so the first requirement will be node JS. So node.js is pretty much important for building out this application so you can just check out if node.js is installed on your machine or not by just printing out on the console that is npm -v. This will tell you the version number of node.js installed on your machine. So after that we will come to the dependency section so the first dependency that he will need is Express so basically Express will be required to build out our server.We will also need bodyparser dependency in order to to request data from a post request. Second dependency that we will need is fluent ffmpeg. So fluent ffmpeg is a library which interacts with ffmpeg library which is which must be installed on to your system before proceeding this tutorial. The next dependency is Express – fileupload dependency. So this dependency use to upload files which needs to be converted in this app. At the last dependency will be nodemon dependency which will be used to restart the server at any moment of time when you need to make any kind of changes to our application.

READ  JSPDF IMAGE TO PDF - JSPDF Tutorial

1) npm init -y

So after you execute this to your console this will create a empty package dot JSON file inside your project

2) npm install express,body-parser,express-fileupload,fluent-ffmpeg,nodemon

After you execute the above command this will install all the dependencies inside the dependencies section inside the package JSON file of your project

3) Now your package.json file will look something like this

 

4) Configure Nodemon in App

So now to configure nodemon inside your application you need to make the changes that are made inside the picture that you can see below

 

5) Making index.js file for your project

Now we will make the starting point of a application that is the index for JS file this will contain all the server side code possible for this application so first of all in this file will initialise the express server and will be starting that server on port 5000

const express = require('express')
const app = express()

app.get("/",(req,res) => {

res.send("Hello world")

})
app.listen(5000,() =>{
console.log("App is listening on Port 5000")
})

6) Running the express Server

Now to run this index.JS express file the command is very simple and it is given below

command: npm start

 

7) Loading simple HTML Template in Express

So now we just need to make a simple HTML file so that we can just get that HTML file inside Express server

READ  [LIVE CODING] jsPDF Autotable Documentation with Source Code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Online Video Converter</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container">
      <br /><br />
      <h1 style="text-align: center;">Online Video Converter</h1>
      <form action="/convert" method="post" enctype="multipart/form-data">
        <div class="form-group">
          <input type="file" name="file"/>
        </div>
        <div class="form-group">
          <label for="to">To:</label>
          <select class="form-control" name="to">
            <option>mp4</option>
            <option>flv</option>
            <option>avi</option>
            <option>webm</option>
            <option>mov</option>
          </select>
        </div>
        <br />
        <div class="form-group">
          <button class="btn btn-danger btn-block">
            Convert
          </button>
        </div>
      </form>
    </div>
  </body>
</html>

Inside the HTML file you can see that we have used some bootstrap for styling purposes so this is not mandatory

 

8) Including index.html file inside express server

const express = require('express')
 const app = express() 

app.get("/",(req,res) => {
 res.sendFile(__dirname + "/index.html");
 })

 app.listen(5000,() =>{
 console.log("App is listening on Port 5000")
 })

 

9) Configuring ffmpeg library inside Express Server

Now will configure fluent-ffmpeg library inside our Express application so copy paste all the code that you see written below

const express = require("express");

const ffmpeg = require("fluent-ffmpeg");

const app = express();

ffmpeg.setFfmpegPath("C:/ffmpeg/bin/ffmpeg.exe");

ffmpeg.setFfprobePath("C:/ffmpeg/bin");

ffmpeg.setFlvtoolPath("C:/flvtool");

console.log(ffmpeg);

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

app.listen(5000);

In this tutorial I am assuming that ffmpeg library is installed on your computer so if you haven’t install this libraries just go to their official website and install it on to your computer and you will find the path in your C directory if you install Ffmpeg

READ  Auto Resize Textarea When Typing - Auto-Resize.js

 

10) Configuring bodyParser Middleware inside Express

   const bodyParser = require(“body-parser”);


const app = express();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));

// parse application/json
app.use(bodyParser.json());

 

11) Configuring express-fileUpload Middleware in Express

const fileUpload = require("express-fileupload");

const app = express();

app.use(
  fileUpload({
    useTempFiles: true,
    tempFileDir: "/tmp/",
  })
);

So in this code we are initialising the express file upload middlewares which will allow you to upload your files inside the temp directory so. First fall create a temp directory inside your root level of your application

 

12) Making POST Route to Handle Video Conversion Process

In this code we will actually be handling the post request which will be coming from the HTML form so then and actually you will upload the file successfully and this post request will be responsible for carrying out the conversion process

app.post("/convert", (req, res) => {

  let to = req.body.to;
  let file = req.files.file;
  let fileName = `output.${to}`;
  console.log(to);
  console.log(file);

  file.mv("tmp/" + file.name, function (err) {
    if (err) return res.sendStatus(500).send(err);
    console.log("File Uploaded successfully");
  });

  ffmpeg("tmp/" + file.name)
    .withOutputFormat(to)
    .on("end", function (stdout, stderr) {
      console.log("Finished");
      res.download(__dirname + fileName, function (err) {
        if (err) throw err;

        fs.unlink(__dirname + fileName, function (err) {
          if (err) throw err;
          console.log("File deleted");
        });
      });
      fs.unlink("tmp/" + file.name, function (err) {
        if (err) throw err;
        console.log("File deleted");
      });
    })
    .on("error", function (err) {
      console.log("an error happened: " + err.message);
      fs.unlink("tmp/" + file.name, function (err) {
        if (err) throw err;
        console.log("File deleted");
      });
    })
    .saveToFile(__dirname + fileName);
});

 

DOWNLOAD SOURCE CODE

Leave a Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :