
videocam_off
This livestream is currently offline
Check back later when the stream goes live
Build a Node.js Express Project to Split GIF into Multiple Images Using Fluent-FFMPEG in Browser
Jan 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-node-js-express-project-to-split-gif-into-multiple-images-using-fluent-ffmpeg-in-browser/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so in this video we will try to build out
0:06
an application inside fluent fmpg which allows you to extract the frames inside
0:12
a gif animation and we will be saving it as a image file PNG image file of each
0:19
frame of a gif animation so this is actually a application which runs in the browser Local Host
0:26
3000 and I actually also deployed this application on my website free mediat
0:31
tools.com so here you can check out this tool deployed live so if I go to my
0:38
website free mediat tools.com the latest tool that I added which is this split
0:44
GIF into images so what this tool does you can access the tool right here try
0:51
the live demo so what this tool does it actually allows you to upload any GIF
0:56
animation let me choose this GIF animation you can just see it's a gif animation I will select this file and
1:04
simply click on upload GIF so what I will do so once I upload GIF first of
1:09
all the upload GIF animation will be uploaded now you can see in in the uploads directory it will be it will
1:17
exactly tell you the starting time here you can manipulate in which time frame you want
1:24
to split the GIF animation or you can split the entire GIF so if I click
1:30
extract images so you can see each frame inside GIF animation is will be captured
1:35
and it will be converted to a PNG image file so we can click download image and
1:41
now you can see each frame inside the GIF animation has been converted to a image file and you can save an image
1:49
file by clicking on download image you can pick your uh frame inside GIF
1:56
animation and save the image file like this so the in this way I'm just basically having this in my
2:05
you can try this demo now let me show you this application is running on Local
2:10
Host 3000 if I do the same thing let's suppose if I pick a different animation let me pick this
2:18
animation click on upload GI so first of all you can see as this animation is
2:24
uploaded in the uploads directory so after this we can even provide a we can
2:32
change the starting time and the ending time as well so let's suppose I only want to capture the frames between the
2:38
second second and the sixth second I can put put this timing so in between those
2:45
it will capture each and every screenshot of this GIF animation and it will convert split all the frames so now
2:52
you can click download image so this is really useful application because in a gif animation you want to extract all
2:58
the frames or particular frames inside GIF animation so this fluent fmpg application makes it really easy it runs
3:05
in the browser and it is actually using this package fluent fmpg which is actually a package which allows you to
3:13
perform fmpg commands relatively easy it has almost 7 lakh weekly downloads you
3:19
will see that we are using this apart from that we are using the express backend server for actually hosting this
3:27
application 29 million down Downs for file uploads we are using molter which
3:33
is a really famous library for actually handling file uploads then we are using
3:39
ejs which is actually a template engine to actually write the HTML dynamically
3:45
yeah using this 16 week million weekly download so now let's get started all
3:51
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
3:57
structure and documentation as well you can get the source code from Google Drive after you make the payment you
4:02
will be redirected to Google Drive where you can actually get the source code before purchasing it you can try the
4:07
live demo just use this tool and if you are interested you can purchase the full
4:14
source code so now let's get started so what I will do I will simply uh make a
4:19
new directory
4:31
open it inside vs code so you can just see it is currently empty now we need to initialize the empty package.json file
4:38
so it will be created now we need to install Express for backend server molter for file upload fluent fmpg and
4:47
ejs these are the four modules Express is for backend server molter is for file
4:52
upload fluent fmpg for EGS so these are the four dependencies simply install
4:58
this so after this we just need to make our
5:03
index rojs file we also need to make a public folder and inside make a folder called
5:09
as images so here all your output images will be stored apart from that we will also be having a uploads directory where
5:16
we'll be storing the input GI file using molter now we need to get started by
5:23
invoking a very basic instance of Express server so we need to require
5:28
this so we need to require Express we need to make this uh listen
5:43
on you can say server is listening on 5,000 and then we will be setting the
5:48
view engine by using this method app set view engine and we are using ejs
5:54
template engine and we will be actually be having a simple get request so once
6:00
someone goes to the we will be rendering out uh index
6:08
route so index ejs file so for this we need to create a views directory and
6:13
here we need to create index. ejs file so here you'll be writing the HTML code
6:20
which will be shown to the user you simply say give to
6:27
images so we will also be using the body passer middleware which is required so we need
6:33
to use it by the use function in order to use the body pass middle we express
6:39
URL encoded extended to
6:44
false and express. Json so this is these two lines are required because we are working with HTML forms form data that's
6:52
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
7:00
write the basic form so inside this form what we will be doing uh we will also be
7:06
including Tailwind CSS so simply include the CDN after the title of Tailwind CSS
7:13
so after this right here we'll be giving some Tailwind classes to it of BG gray
7:21
100 padding 4 so container MX Auto this will make it
7:27
in the center and we will be having a head simple heading so these are all Tailwind
7:34
classes GI to image converter so if you want to run this application you can simply type uh nodon
7:42
index.js this will start the application on port number 5,000 if I just
7:49
type now you can see the application is perfectly running and
7:56
uh after this we now need to
8:03
after this heading we will have a simple form and this
8:11
form first of all allow the user to actually upload we making a post
8:19
request to this/ upload route encoding type multiart form data so here you will
8:24
be allowing the user to select a file name parameter will'll be giving GIF and
8:32
we will only be accepting gif file so dot GIF and it should be required and we will be giving
8:39
mb4 so we also be giving some Tailwind classes to this form tag which is margin
8:44
bottom 8 text
8:52
Center and then we will also be having a simple button to submit the form button
8:57
type submit BG blue 500 text
9:03
white padding 4 in the X Direction padding Y 2 in the y direction and the
9:09
button will be rounded and the button will simply say upload GIF so if you
9:16
refresh the application you will actually see a choose file button and a
9:21
button just make sure that you put a brake tag to have some spacing right
9:27
here so this is actually the interface which is ready now we now need to
9:36
actually go to index.js and first of all we need to configure the molter package which we
9:44
installed for file upload so right here you will require this package require
9:51
uh molter and now to actually configure
9:57
this package we need to make a storage object so storage and we'll be using
10:02
molter dick storage we will be storing the files in the physical storage so it
10:08
come basically have destination property it will be a call back function request
10:13
file call back here we actually tell where to store it we need to store it in the
10:19
uploads directory that we created and the second property is
10:25
actually the file name so what file name it will be having again it will be a call back
10:31
function so here you can give uh a unique name date. now it will
10:39
return unique name every time using this date function and just concatenate the
10:45
original name of the file file. original name so now this storage object we have
10:53
created this is just a St setup process for molter every time this will be the
10:58
St so we need to pass the storage object now this middle wear is ready now
11:04
we can actually make that request the post request SL
11:09
upload request response so now we can basically pass
11:15
this as a middleware just in between this upload do single we need to upload a single
11:21
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
11:29
provide this name parameter which is necessary so just make sure that you provide the same name
11:35
parameter after this after it get uploaded it will return a file path like
11:41
this request. file. paath we can console log it so if I just cross check if I refresh
11:50
try to select a GI file click on upload and if you see it
11:56
returns undefined
12:02
uh but if you see guys uh the file has been successfully uploaded in the
12:09
directory but it is returning undefined request. file sorry request. file. paath
12:15
sorry this is if you see now it is actually printing out the full path so
12:21
now the code is working perfectly up till now now we need to get act actually
12:26
the file name of it we can do it using PA dot for this we do
12:32
need to actually include a built-in package path which is a built-in package
12:38
and right here we will use the parts method request. file do file name do
12:45
name and similarly to get the extension we will use the same method
12:52
request. file. file name do extension so
13:00
now why we are uh basically extracting this information file name extension we need to get actually the duration of the
13:08
gif file so now to get the duration we will
13:14
be using a tool called a method called as FF probe FF probe if you know first
13:20
of all we do need to include the package fluent fmpg so we need to require the fluent
13:27
fmpg package and it actually contains a method called as
13:32
ffpr which actually Returns the metadata of the media file we'll be providing the
13:38
GIF animation file and it returns a call back function and inside this function
13:44
it returns metadata about the media file so if any sort of error take place we
13:49
can actually console log it and if no error take place then we
13:57
can actually pass the duration using this object metadata
14:04
format. duration it will return the basically
14:10
how much long the GIF animation is in seconds then we need to basically format
14:16
this by using a new new date duration in seconds we need to
14:22
multiply this by 1,00 and then we need to convert this into ioso string
14:33
and we need to use the substring and we only need
14:42
the so here we are actually changing it to this
14:53
format so we are actually changing this time to be in this format our minute
14:59
second this is actually it will return
15:18
this we don't need to like this so after we get this formatted duration now what we need to do
15:31
so after this now we need to render this information in the HTML or ejs so how we
15:38
can do that we can again render the template response. render index and here
15:44
we can provide this uh parameters duration will be the formatted duration
15:49
images will be null give file name will be the actual gif file name that we have
15:56
and the extension so these four things that we are passing
16:02
right here as variables to this index. EGS template so now we just need to make
16:08
sure we initialize these all these things to null also
16:13
right here whenever we are in initializing it so these will be null now we are actually rendering this
16:20
template this is actually the advantage of using EGS because you can rerender the template at at any time so we are
16:28
passing this information information to the directly to this template index. EGS
16:33
now we can show this information so how we can show this we can use some conditional
16:39
rendering so that's why it is called as embedded JavaScript template because you
16:45
can use JavaScript directly right here so how we can do this we can conditionally render the form so we can
16:53
put a if condition if the duration is not if the duration is not
17:02
null in that
17:10
case I need to close the bracket right here so it is exactly telling that if
17:16
the duration has some property then in that case this form will have some
17:23
properties it is telling us that if the duration is not defined in that case show this form
17:29
and uh in the else Pro in the else
17:35
block like this if the duration is has some value
17:43
in that case we need to define a second form which will actually be having a
17:49
property we'll be making a simple post request to this route to
17:55
actually extract the images from the GIF animation we giving a margin bottom a text
18:05
Center so right here we'll be showing uh we will having some input Fields will
18:11
which will be hidden it will not be displayed in the UI but it will contain this information which is the value give
18:19
file name so what is actually the file name of so we can dynamically put these
18:25
variables like this using the syntax of ejs this is actually the variable name that
18:32
you are getting so similarly uh we can have a
18:39
second input field which will also be hidden this time this will be holding
18:44
the GIF
18:53
extension and uh after we put these two things now we will also be having
19:02
this will be for the start time so here we'll be showing the input
19:08
field where the user can select the start time and the end time based upon how much long is the GI animation this
19:16
one for the start time so here it'll be having input type
19:24
text and give basically be giving a name parameter to it
19:30
it start time and the here the value will start from the zero 0 0 Z this is a
19:37
format it will be incremented by 1 second and the class will be px2
19:45
py1 round
19:57
it and also one more attribute we will be giving to
20:03
it we will be repeating it for the next one which will be having the end
20:11
time so here the user can select the end time of the GIF
20:18
animation this will be equal to the variable that we are getting which is the duration so instead of this
20:24
hardcoded value we will put it dynamically which is
20:31
duration so if you try to actually run this
20:37
now let me pick a gif animation click on upload GIF now if you see it will
20:43
rerender the template and now if you see it will show the total duration of the GIF animation automatically all these
20:50
values are hardcoded in the input field so we actually showing all this data that we are sending it from the nodejs
20:58
to this EGS template we are showing all this data rendering it so now we also
21:03
need to have a button after these two input fields to actually this button will
21:09
actually say extract images so what we will be doing uh we'll
21:15
be having button type
21:21
submit so it will have a basically a Tailwind class text will be white PX4
21:30
py2 rounded so right here I was studying
21:36
guys in both these input fields we do need to attach a event which will on
21:42
blur event you can attach it on blur so whenever you you change the
21:49
value of this you'll actually need to execute a function right here valid
21:54
validate time format
22:00
this so we need to attach to both these input
22:16
Fields so right at the top we can Define this
22:21
function so this will make sure it is showing the time in a correct manner so
22:27
we can Define find this function using some regular
22:36
expression let me just paste the function and then explain to you what is it is actually
22:43
doing this is actually the overall function it is taking the input time and it is converting to the time that is
22:50
required hour minute and second so basically whatever if you type
22:57
this you have this button if you change the value if you try to write like this you
23:04
will get error this error invalid time format please use this format so if you
23:09
don't actually provide this function then the user can submit a text value so
23:14
the which is not required that's why we are adding this function to actually validate the input which is filled by
23:20
the user so now after this we now need to Define this SL extract post request
23:26
to actually use fluent FM to actually convert the GIF animation to images so
23:33
right here what this function will do it will
23:41
first of all need to extract all the details which is the gif file
23:47
name the start time the end time and the GIF
23:53
extension from this request. body we are destructuring it all these four entries
24:00
and now we need to actually construct the path path. join using the name we perfectly know it
24:08
is present in the uploads trory give file name plus GIF extension so in this
24:15
way we actually construct the path of the input field that's why we pass these
24:20
two these things file name and extension to the index EGS route EGS
24:28
file now we need to actually tell the output where where should be the output
24:35
should be stored so we need to actually constructed a
24:41
public inside the public directory we have constructed a
24:47
folder called as images so inside this the output will be shown so here you can
24:53
just provide the location GI file name
25:00
it will create this directory and here we'll be checking if the directory doesn't exist and for this we do need to
25:05
use the file system module to actually do the file system in nodejs we
25:12
do need to require the buil-in module so here you'll be simply be checking that
25:17
if this directory doesn't
25:23
exist then in that case we do need to create a directory Now to create the directory we use the make directory
25:28
sting function in nodejs using the file system module and you can provide an
25:34
option right here recursive to
25:40
true so after you do this now we need to extract the
25:46
frames from gif as images so now to extract those frames fluent fmpg has a
25:55
we need to pass the GIF path first of all now we can change the
26:01
methods one by one so it has this method called as set start
26:08
time you can provide the start time it also has a method set
26:16
duration you can provide here the end time then it has a various events that
26:21
you can listen for one such event is on sorry this is file names event so
26:28
here inside this it actually returns all the file names as an inside the call
26:34
back function so here you can simply say console log generating
26:44
images and then we also has event for when the function is ended when the
26:49
process is ended this call back function will be executed and here we can say GIF
26:55
conversion finished
27:00
so now here uh we can
27:06
just call the save method and this will actually be triggering the process here we can provide the file name that needs
27:13
to be there the structure output directory
27:20
slash slash frame so here we are simply using some
27:26
regular expression for the images which will be constructed 03
27:33
d.png so in this way in the output directory all these images will be constructed once the process is
27:40
finished this method GIF conversion finished will be printed out in the
27:45
console now let me just uh execute this and see if it is working let me pick my
27:52
GIF animation click on upload GIF click on extract images and if you now see it
27:58
is saying to me that no such file or directory error opening input
28:19
file uh let me see guys if we are getting all these things correctly or not I think
28:51
let me pick the GIF animation if you now see uh the file is uploaded in the upload
28:58
sory but when I click this button extract
29:05
images so these things if you see uh the extension is coming but the file name is
29:12
not coming I think I some inside my right
29:20
here give file name we have given this property
29:30
uh let me check so here we are passing this variable is give file
29:44
name in the index. ejs route if you see
30:01
uh let me paste the code guys
30:06
uh just to save save some time the you will basically find all the source code
30:12
in the description you can purchase it I think I've just made some kind of
30:18
typo mistake right here me delete this part
30:33
and uh this is my extract request let me also paste
30:46
this sometimes in coding guys typo mistake does happen and if I refresh it
30:53
now if I choose my GIF animation
31:14
just wait let me just
31:41
uh let me rerun this
32:00
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
32:07
if you see all the frames that were there all the frames which are there in
32:14
the GIF animation has been converted to images PNG images and now the task is
32:19
really simple we need to show these images in the browser with a download button so what we need to do uh if you
32:26
see we were there basically in the last
32:34
section so after we get all these images we need to read the directory by using
32:39
the file system read method so you'll simply use the file system.
32:47
read directory and this directory is output
32:54
directory this will have the call back function error files if any sort of error take place then we
33:02
can show this error if no error take place then we can
33:08
simply construct image
33:23
paths you can just see here uh for each file
33:29
present it will be present in the images folder and it will be coming give file
33:36
name slash the actual
33:43
file so in this way you can construct the image paths now we can rerender this
33:49
uh bypass rerender the index template by passing this images to be image paths
33:56
and we can make this duration to be give file name give file name give extension give extension
34:03
so so now if I go back to index. ejs so now this duration property will
34:10
become null and now this will not be shown so conditionally it will change
34:16
and now we will be adding a new property new if condition just after
34:24
this if the images are there in that that
34:33
case just close this so we basically will be looping
34:40
through all the images
34:58
so you'll be having a grid where you'll be
35:07
showing four Images per
35:18
grid so now you'll be using simple for each Loop for each image we'll be using
35:23
a image tag we'll be showing this image we have given some t classes right
35:34
here and also we'll be having a anchor
35:40
tag so that when we click the download button the image will
35:50
download giving a download attribute to it and also a class of BG green
35:58
500 text white PX4
36:04
py2 rounded block the text here will be simply
36:11
download image so that's complete this application and if you
36:22
see I think I need to shift this button on the next
36:33
W full mb4 sorry W4
36:48
mb4 so we do need to actually make it a div tag just surrounding this so div BG
36:56
White padding you also need to add the padding
37:03
as well rounded
37:08
Shadow so we need to surround both these elements with this D
37:18
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
37:25
this button the image will be downloaded you can basically try this with any GIF animation let's suppose this one that
37:31
you are you can even get the full duration this this GIF animation is 7 Seconds
37:37
long so let's suppose you can even pick your time here time period you can
37:42
manipulate this I only want the screenshots to be in between this four
37:48
to six click on extract images and now you can see all your screenshots have been
37:54
taken and you can save this as a PNG file this is really useful application guys the full source code is given in
38:01
the description you can try this full demo which is hosted on my website free mediat tools.com before purchasing the
38:07
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
38:15
subscribe the channel as well and I will be seeing you guys in the next video
#Flash-Based Entertainment
#Online Goodies
#Clip Art & Animated GIFs
#Animated Films
#Other
