Welcome folks today in this blog post we will be building a video converter app in node.js and express using fluent-ffmpeg library in 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
npm i fluent-ffmpeg
npm i express-fileupload
And after that you need to make an index.js file and copy paste the following code
index.js
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
const express = require("express"); const ffmpeg = require("fluent-ffmpeg"); const fileUpload = require("express-fileupload"); const app = express(); const bodyParser = require('body-parser') // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })); // parse application/json app.use(bodyParser.json()); app.use( fileUpload({ useTempFiles: true, tempFileDir: "/tmp/", }) ); 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.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); }); app.listen(5000); |
As you can see we are importing the fluent-ffmpeg library and also we are loading the index.html file when you go to the home page and then we have the /convert post route where we are converting the videos from one format to another. And then we need to define this index.html inside the root directory. And also we need to make the tmp directory where we are uploading the video files as shown below
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 29 30 31 32 33 34 35 36 37 38 39 |
<!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> |
