Node.js Express Fluent-FFMPEG Project to Encode MP4 Video and Stream it Using DASH in Browser

uh hello guys welcome to this live stream so in this live stream I will basically talk about how to actually uh encode your video Whatever video that you upload inside your server how to encode it inside fluent fmpg library in nodejs and express and then you can live stream it using Dash protocol Dash protocol stands for dynamic if you just write here Dash protocol it is used whenever you are building let's suppose live streaming website you want to stream your content let's suppose you're building a course website so whenever you want to host videos inside the server this is called as mpeg-h so what is dash protocol Dynamic adaptive streaming over HTTP also known as MP Dash is an Adaptive bit rate streaming technique that enables high quality streaming of media content over the Internet so this simply means that if your internet connection is very low then it will automatically encode your video into different bit rates and quality P so it will automatically switch to in YouTube also you have various qualities available 1080p 2 240p so in in the in in our code guys basically we'll use fluent fmpg library and we will actually build out encode our video files to our different qualities 1080p 640 1920 full HD 854 and after encoding it to different qualities and bit rates we will basically use this Dash protocol to actually switch back to these uh bit rates and qualities whenever the device connection is little bit weak or if the user internet connection is strong then we will show the user full HD video so similar to YouTube so I will basically build out this complete application in fluent fmpg using nodejs and express all the source code guys is given in the description of the video if you want the final structure of the source code you can buy the full source code from PayPal in United State dollar or stripe in Indian rupees so let's start the video so first of all let me just uh make a new directory here uh I will call this as in encode video I will CD into this and uh open it inside V vs code you will basically see the uh directory is empty now we just need to initialize our package.json file so npm in- y so this will initialize our package.json file F and we need to install some packages guys so for now installing the packages we need the first package to be fluent fmpg and uh which makes easy for developers to use fmpg and then FF MPG Das static this is actual module guys which comes with the fmpg binaries user don't need fmpg installed it will automatically install fmpg in the local environment so these two packages are required for this application and uh just install this and also we will need Express web server guys in order to host that video in the hash Dash video player so npmi Express also install this also so now we will actually use this uh encoder guys I will show you step by step how you can write this encoder to actually encode your files into different qualities and bit rates so here first of all you need to make app.js file and you just need to transfer Whatever video that you are streaming let me stream this video I copy this video you can take any video for example and uh let me paste it inside my directory so this video file we are taking it as example guys you will see that and we need to convert this into different qualities so for doing that we will actually need fmpg so we will include the FF MPG static module that we installed and then we also need the fmpg fluent fmpg module fluent fmpg and then we will actually set the path set fmpg path and we will set it to fmpg static so these are basically the binaries guys which makes it easy for accessing fmpg without having to install if the user doesn't contain fmpg then this a very useful module and then we will actually provide the inut path which video we need to encode we will be encoding this video which we call this as video. MP4 if you see sorry this is input. MP4 and uh after that we will actually say the output path and here we will actually create a directory guys which is output Dash SL output. MPD MPD is a very special file guys which contains information about all the if you just search what is MPD file it's a media representation description file which is used to hold the information on the various streams and bandwidths they are associated with in your video Source attribute you point to the MPD file instead to the instead to the media file so whenever we play the file guys inside Express we will actually point to this file which will actually contain all the information about different bit rates and quality so now this file will be automatically created by fmpg so so this process happens guys whenever you upload any video to YouTube or Facebook Twitter any social media Network they basically do this process they encode your video to into different bit rates and qualities and then basically they store inside the server and then they serve your video in the video player so here we will Define the scale options inside square bracket so you can basically uh encode your video into different qualities so we'll scale it to first of all 1280 into 720 colon and 640 different qualities are there guys which is scale this is full HD 1920 by 18 180 then it's uh 854 by 480 you can add more qualities and then we will simply check which video Codec we will use here we will use the lib x264 which is software coder in FF MPG and here we will provide the options 264 options and here this options will be key int 24 and uh m- keyint 24 no scenario these are the options that you need to pass to this command guys scene cut sorry scene cut you can pause the video and write this which is key in 24 Min ke no scene cut and then we need to provide the video bit rates in which bit rates the video will be encoded there various bit rates are there guys inside the square brackets which is 500 which controls the quality of the video guys bit rate as you all know 500k 100K then we have 2,000 K and then we have 4,000k so as the bit rate increases the size of the video increases as well the quality of the video increases so you can provide more bit rates and now we will basically call The Base Library of fmpg and then we will provide the input file which is input path which is our file here which is uh this one input. MP4 and after that guys it contains a function called as video filters we will call this function and basically provide our scale options you're basically providing the scale options that we defined right here you can encode this video and then we will use this this codec video Codec which is uh the video Codec that we defined and then we will basically add a option by using this function add option we will Define this option here x- x264 opts and then this is actually the options that we so this options will be there and then we will say the output options what will be the output options here we will basically provide this output option-b V and this is the video bit rates we will provide the first bit rate here like this and then we have various format which format you need to convert this video to we need to convert this into Dash format which will basically be able to stream this video into different bit rates and qualities for live streaming it you need to put here Dash and then output will be the output path which we created and so when this ends this call back function will execute and in the call back function we can simply say that Dash encoding complete that's all so now your encoding is complete guys basically after this now we simply need to run this by calling the run method so that's all that you need to do inside this file so now once you run this file guys a output folder you need to create this output folder first of all output under _ Dash before running the script and if you now run the script guys basically node app.js and now if you see basically it will encode your video file and it will take some time and uh after that encoding complete you will see that Dash encoding complete if you check the folder it will basically segment your video guys into different parts it will basically Chun chunk your videos into different segments different qual ities and basically this file output. MPD file which contain manifest file which will contain all this information inside this now we just need to play this file in the browser using Dash protocol and for this we need to create Express server so you will see it contains a XML code right here and it contains information about various qualities bit rates and it will tell you uh when the browser will execute this they will automatically detect the browse uh internet speed of the user and depending upon that they will serve the video file it in which quality as well so this is actual Dash output. MPD file and uh now to serve this file we will actually create a index.js file and here we will initialize our Express server and uh we will start our Express app we will listen this app on 5,000 or we can say 3,000 and then we will simply make this folder as static so express. static public we will make a folder called as public guys and uh just make a public folder right here and just shift this to this public folder this output undor Dash that's all so this public folder is static and now inside this public folder we need to make a index.html file which will be served and this will be a simple HTML file basically which will be actually be showing up so here we will actually be playing this Dash file MPD file so for doing this we need to include the CDN first of all of Dash so you can basically copy this and paste it so we can call this as Dash video player so Dash you can search this Dash men CDN so basically DJs you can copy this CDM from here this is I think it's their official website is this -. JS it's a MPG Das protocol reliable implementation so dash. JS we are using this to actually stream our video so now to stream the video guys it's very simple we will call a heading and it will call as Dash video player and now we will simply have a video tag and inside the video tag we will actually have a attribute which is data dhjs player we will autop play this video file whenever user loads the page and uh we will show the controls as well and basically in the source tab Source tag we will have a source so Source will be output underscore Dash and this file will be output. MPD this file we need to play and this type will be application slash Dash plus XML this is the actual type of the file that's all so if you now play this uh if you start the server guys first of all just just say nodeb index.js so your server will be started on this port number which is 3,000 if I try to play the file the file will play guys you will not notice a huge amount of difference the file will automatically play but this makes it very much easy guys if you are developing a live streaming website and this technique is very much necessary whenever you receive uploads from videos from users you first of all need to encode that by using the script that I provided you by fluent. fmpg into different qualities bit rates and qualities and then serve it using this file which is uh output. mppd file so this makes sure that your uh bandwidth is preserved you're hosting but wherever you are hosting your B bandwidth is preserved and uh unnecessarily you are not basic basically wasting your bandwidth you are basically serving the video based upon the user internet connection so this was a tutorial guys on which we built a video encoder inside fmpg and uh thank you very much for watching this video and I will be seeing you guys in the next video

Channel: Coding Shiksha

Views: 364

Keywords: coding shiksha

Id: EV1lzCjB7PI

Length: 15min 13sec (913 seconds)

Published: Fri Feb 02 2024