Build a Node.js Express Project to Split GIF into Multiple Images Using Fluent-FFMPEG in Browser

uh hello guys welcome to this video so in this video we will try to build out

an application inside fluent fmpg which allows you to extract the frames inside

a gif animation and we will be saving it as a image file PNG image file of each

frame of a gif animation so this is actually a application which runs in the browser Local Host

3000 and I actually also deployed this application on my website free mediat

tools.com so here you can check out this tool deployed live so if I go to my

website free mediat tools.com the latest tool that I added which is this split

GIF into images so what this tool does you can access the tool right here try

the live demo so what this tool does it actually allows you to upload any GIF

animation let me choose this GIF animation you can just see it's a gif animation I will select this file and

simply click on upload GIF so what I will do so once I upload GIF first of

all the upload GIF animation will be uploaded now you can see in in the uploads directory it will be it will

exactly tell you the starting time here you can manipulate in which time frame you want

to split the GIF animation or you can split the entire GIF so if I click

extract images so you can see each frame inside GIF animation is will be captured

and it will be converted to a PNG image file so we can click download image and

now you can see each frame inside the GIF animation has been converted to a image file and you can save an image

file by clicking on download image you can pick your uh frame inside GIF

animation and save the image file like this so the in this way I'm just basically having this in my

you can try this demo now let me show you this application is running on Local

Host 3000 if I do the same thing let's suppose if I pick a different animation let me pick this

animation click on upload GI so first of all you can see as this animation is

uploaded in the uploads directory so after this we can even provide a we can

change the starting time and the ending time as well so let's suppose I only want to capture the frames between the

second second and the sixth second I can put put this timing so in between those

it will capture each and every screenshot of this GIF animation and it will convert split all the frames so now

you can click download image so this is really useful application because in a gif animation you want to extract all

the frames or particular frames inside GIF animation so this fluent fmpg application makes it really easy it runs

in the browser and it is actually using this package fluent fmpg which is actually a package which allows you to

perform fmpg commands relatively easy it has almost 7 lakh weekly downloads you

will see that we are using this apart from that we are using the express backend server for actually hosting this

application 29 million down Downs for file uploads we are using molter which

is a really famous library for actually handling file uploads then we are using

ejs which is actually a template engine to actually write the HTML dynamically

yeah using this 16 week million weekly download so now let's get started all

the source code is given in the description of this video you can directly purchase it if you want the full source code with full directory

structure and documentation as well you can get the source code from Google Drive after you make the payment you

will be redirected to Google Drive where you can actually get the source code before purchasing it you can try the

live demo just use this tool and if you are interested you can purchase the full

source code so now let's get started so what I will do I will simply uh make a

new directory

open it inside vs code so you can just see it is currently empty now we need to initialize the empty package.json file

so it will be created now we need to install Express for backend server molter for file upload fluent fmpg and

ejs these are the four modules Express is for backend server molter is for file

upload fluent fmpg for EGS so these are the four dependencies simply install

this so after this we just need to make our

index rojs file we also need to make a public folder and inside make a folder called

as images so here all your output images will be stored apart from that we will also be having a uploads directory where

we'll be storing the input GI file using molter now we need to get started by

invoking a very basic instance of Express server so we need to require

this so we need to require Express we need to make this uh listen

on you can say server is listening on 5,000 and then we will be setting the

view engine by using this method app set view engine and we are using ejs

template engine and we will be actually be having a simple get request so once

someone goes to the we will be rendering out uh index

route so index ejs file so for this we need to create a views directory and

here we need to create index. ejs file so here you'll be writing the HTML code

which will be shown to the user you simply say give to

images so we will also be using the body passer middleware which is required so we need

to use it by the use function in order to use the body pass middle we express

URL encoded extended to

false and express. Json so this is these two lines are required because we are working with HTML forms form data that's

why these body pass middleware is we need to include by these two lines so after you do this we ALS o need to now

write the basic form so inside this form what we will be doing uh we will also be

including Tailwind CSS so simply include the CDN after the title of Tailwind CSS

so after this right here we'll be giving some Tailwind classes to it of BG gray

100 padding 4 so container MX Auto this will make it

in the center and we will be having a head simple heading so these are all Tailwind

classes GI to image converter so if you want to run this application you can simply type uh nodon

index.js this will start the application on port number 5,000 if I just

type now you can see the application is perfectly running and

uh after this we now need to

after this heading we will have a simple form and this

form first of all allow the user to actually upload we making a post

request to this/ upload route encoding type multiart form data so here you will

be allowing the user to select a file name parameter will'll be giving GIF and

we will only be accepting gif file so dot GIF and it should be required and we will be giving

mb4 so we also be giving some Tailwind classes to this form tag which is margin

bottom 8 text

Center and then we will also be having a simple button to submit the form button

type submit BG blue 500 text

white padding 4 in the X Direction padding Y 2 in the y direction and the

button will be rounded and the button will simply say upload GIF so if you

refresh the application you will actually see a choose file button and a

button just make sure that you put a brake tag to have some spacing right

here so this is actually the interface which is ready now we now need to

actually go to index.js and first of all we need to configure the molter package which we

installed for file upload so right here you will require this package require

uh molter and now to actually configure

this package we need to make a storage object so storage and we'll be using

molter dick storage we will be storing the files in the physical storage so it

come basically have destination property it will be a call back function request

file call back here we actually tell where to store it we need to store it in the

uploads directory that we created and the second property is

actually the file name so what file name it will be having again it will be a call back

function so here you can give uh a unique name date. now it will

return unique name every time using this date function and just concatenate the

original name of the file file. original name so now this storage object we have

created this is just a St setup process for molter every time this will be the

St so we need to pass the storage object now this middle wear is ready now

we can actually make that request the post request SL

upload request response so now we can basically pass

this as a middleware just in between this upload do single we need to upload a single

file so here we need to we are simply providing the name parameter that we have given in the HTML if you see we do

provide this name parameter which is necessary so just make sure that you provide the same name

parameter after this after it get uploaded it will return a file path like

this request. file. paath we can console log it so if I just cross check if I refresh

try to select a GI file click on upload and if you see it

returns undefined

uh but if you see guys uh the file has been successfully uploaded in the

directory but it is returning undefined request. file sorry request. file. paath

sorry this is if you see now it is actually printing out the full path so

now the code is working perfectly up till now now we need to get act actually

the file name of it we can do it using PA dot for this we do

need to actually include a built-in package path which is a built-in package

and right here we will use the parts method request. file do file name do

name and similarly to get the extension we will use the same method

request. file. file name do extension so

now why we are uh basically extracting this information file name extension we need to get actually the duration of the

gif file so now to get the duration we will

be using a tool called a method called as FF probe FF probe if you know first

of all we do need to include the package fluent fmpg so we need to require the fluent

fmpg package and it actually contains a method called as

ffpr which actually Returns the metadata of the media file we'll be providing the

GIF animation file and it returns a call back function and inside this function

it returns metadata about the media file so if any sort of error take place we

can actually console log it and if no error take place then we

can actually pass the duration using this object metadata

format. duration it will return the basically

how much long the GIF animation is in seconds then we need to basically format

this by using a new new date duration in seconds we need to

multiply this by 1,00 and then we need to convert this into ioso string

and we need to use the substring and we only need

the so here we are actually changing it to this

format so we are actually changing this time to be in this format our minute

second this is actually it will return

this we don't need to like this so after we get this formatted duration now what we need to do

so after this now we need to render this information in the HTML or ejs so how we

can do that we can again render the template response. render index and here

we can provide this uh parameters duration will be the formatted duration

images will be null give file name will be the actual gif file name that we have

and the extension so these four things that we are passing

right here as variables to this index. EGS template so now we just need to make

sure we initialize these all these things to null also

right here whenever we are in initializing it so these will be null now we are actually rendering this

template this is actually the advantage of using EGS because you can rerender the template at at any time so we are

passing this information information to the directly to this template index. EGS

now we can show this information so how we can show this we can use some conditional

rendering so that's why it is called as embedded JavaScript template because you

can use JavaScript directly right here so how we can do this we can conditionally render the form so we can

put a if condition if the duration is not if the duration is not

null in that

case I need to close the bracket right here so it is exactly telling that if

the duration has some property then in that case this form will have some

properties it is telling us that if the duration is not defined in that case show this form

and uh in the else Pro in the else

block like this if the duration is has some value

in that case we need to define a second form which will actually be having a

property we'll be making a simple post request to this route to

actually extract the images from the GIF animation we giving a margin bottom a text

Center so right here we'll be showing uh we will having some input Fields will

which will be hidden it will not be displayed in the UI but it will contain this information which is the value give

file name so what is actually the file name of so we can dynamically put these

variables like this using the syntax of ejs this is actually the variable name that

you are getting so similarly uh we can have a

second input field which will also be hidden this time this will be holding

the GIF

extension and uh after we put these two things now we will also be having

this will be for the start time so here we'll be showing the input

field where the user can select the start time and the end time based upon how much long is the GI animation this

one for the start time so here it'll be having input type

text and give basically be giving a name parameter to it

it start time and the here the value will start from the zero 0 0 Z this is a

format it will be incremented by 1 second and the class will be px2

py1 round

it and also one more attribute we will be giving to

it we will be repeating it for the next one which will be having the end

time so here the user can select the end time of the GIF

animation this will be equal to the variable that we are getting which is the duration so instead of this

hardcoded value we will put it dynamically which is

duration so if you try to actually run this

now let me pick a gif animation click on upload GIF now if you see it will

rerender the template and now if you see it will show the total duration of the GIF animation automatically all these

values are hardcoded in the input field so we actually showing all this data that we are sending it from the nodejs

to this EGS template we are showing all this data rendering it so now we also

need to have a button after these two input fields to actually this button will

actually say extract images so what we will be doing uh we'll

be having button type

submit so it will have a basically a Tailwind class text will be white PX4

py2 rounded so right here I was studying

guys in both these input fields we do need to attach a event which will on

blur event you can attach it on blur so whenever you you change the

value of this you'll actually need to execute a function right here valid

validate time format

this so we need to attach to both these input

Fields so right at the top we can Define this

function so this will make sure it is showing the time in a correct manner so

we can Define find this function using some regular

expression let me just paste the function and then explain to you what is it is actually

doing this is actually the overall function it is taking the input time and it is converting to the time that is

required hour minute and second so basically whatever if you type

this you have this button if you change the value if you try to write like this you

will get error this error invalid time format please use this format so if you

don't actually provide this function then the user can submit a text value so

the which is not required that's why we are adding this function to actually validate the input which is filled by

the user so now after this we now need to Define this SL extract post request

to actually use fluent FM to actually convert the GIF animation to images so

right here what this function will do it will

first of all need to extract all the details which is the gif file

name the start time the end time and the GIF

extension from this request. body we are destructuring it all these four entries

and now we need to actually construct the path path. join using the name we perfectly know it

is present in the uploads trory give file name plus GIF extension so in this

way we actually construct the path of the input field that's why we pass these

two these things file name and extension to the index EGS route EGS

file now we need to actually tell the output where where should be the output

should be stored so we need to actually constructed a

public inside the public directory we have constructed a

folder called as images so inside this the output will be shown so here you can

just provide the location GI file name

it will create this directory and here we'll be checking if the directory doesn't exist and for this we do need to

use the file system module to actually do the file system in nodejs we

do need to require the buil-in module so here you'll be simply be checking that

if this directory doesn't

exist then in that case we do need to create a directory Now to create the directory we use the make directory

sting function in nodejs using the file system module and you can provide an

option right here recursive to

true so after you do this now we need to extract the

frames from gif as images so now to extract those frames fluent fmpg has a

we need to pass the GIF path first of all now we can change the

methods one by one so it has this method called as set start

time you can provide the start time it also has a method set

duration you can provide here the end time then it has a various events that

you can listen for one such event is on sorry this is file names event so

here inside this it actually returns all the file names as an inside the call

back function so here you can simply say console log generating

images and then we also has event for when the function is ended when the

process is ended this call back function will be executed and here we can say GIF

conversion finished

so now here uh we can

just call the save method and this will actually be triggering the process here we can provide the file name that needs

to be there the structure output directory

slash slash frame so here we are simply using some

regular expression for the images which will be constructed 03

d.png so in this way in the output directory all these images will be constructed once the process is

finished this method GIF conversion finished will be printed out in the

console now let me just uh execute this and see if it is working let me pick my

GIF animation click on upload GIF click on extract images and if you now see it

is saying to me that no such file or directory error opening input

file uh let me see guys if we are getting all these things correctly or not I think

let me pick the GIF animation if you now see uh the file is uploaded in the upload

sory but when I click this button extract

images so these things if you see uh the extension is coming but the file name is

not coming I think I some inside my right

here give file name we have given this property

uh let me check so here we are passing this variable is give file

name in the index. ejs route if you see

uh let me paste the code guys

uh just to save save some time the you will basically find all the source code

in the description you can purchase it I think I've just made some kind of

typo mistake right here me delete this part

and uh this is my extract request let me also paste

this sometimes in coding guys typo mistake does happen and if I refresh it

now if I choose my GIF animation

just wait let me just

uh let me rerun this

so if you now see it is saying that GI conversion finished you got the message it was just a typo mistake guys and now

if you see all the frames that were there all the frames which are there in

the GIF animation has been converted to images PNG images and now the task is

really simple we need to show these images in the browser with a download button so what we need to do uh if you

see we were there basically in the last

section so after we get all these images we need to read the directory by using

the file system read method so you'll simply use the file system.

read directory and this directory is output

directory this will have the call back function error files if any sort of error take place then we

can show this error if no error take place then we can

simply construct image

paths you can just see here uh for each file

present it will be present in the images folder and it will be coming give file

name slash the actual

file so in this way you can construct the image paths now we can rerender this

uh bypass rerender the index template by passing this images to be image paths

and we can make this duration to be give file name give file name give extension give extension

so so now if I go back to index. ejs so now this duration property will

become null and now this will not be shown so conditionally it will change

and now we will be adding a new property new if condition just after

this if the images are there in that that

case just close this so we basically will be looping

through all the images

so you'll be having a grid where you'll be

showing four Images per

grid so now you'll be using simple for each Loop for each image we'll be using

a image tag we'll be showing this image we have given some t classes right

here and also we'll be having a anchor

tag so that when we click the download button the image will

download giving a download attribute to it and also a class of BG green

500 text white PX4

py2 rounded block the text here will be simply

download image so that's complete this application and if you

see I think I need to shift this button on the next

W full mb4 sorry W4

mb4 so we do need to actually make it a div tag just surrounding this so div BG

White padding you also need to add the padding

as well rounded

Shadow so we need to surround both these elements with this D

tag now it will look something like this so now you can see for each image there is a download button so if you click

this button the image will be downloaded you can basically try this with any GIF animation let's suppose this one that

you are you can even get the full duration this this GIF animation is 7 Seconds

long so let's suppose you can even pick your time here time period you can

manipulate this I only want the screenshots to be in between this four

to six click on extract images and now you can see all your screenshots have been

taken and you can save this as a PNG file this is really useful application guys the full source code is given in

the description you can try this full demo which is hosted on my website free mediat tools.com before purchasing the

full source code the link is given in the description to actually purchase the full source code from my website Pro cod.com please hit that like button

subscribe the channel as well and I will be seeing you guys in the next video