Up next in 10
Build a Angular Fluent-FFMPEG Video Editor & Generator in Browser Using Node.js & Express
Dec 22, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-angular-fluent-ffmpeg-video-editor-generator-in-browser-using-node-js-express/
Show More Show Less View Video Transcript
0:04
Uh hello guys, welcome to this uh live
0:06
stream. So in this live stream I will
0:08
basically talk about how I built
0:10
basically this uh angular uh video
0:13
editor in NodeJS express and we are
0:17
using basically fluent FMPG package
0:20
which allows you to generate a video
0:23
from a series of multiple images. So
0:26
this is actually the interface that I
0:27
developed using angular material package
0:30
and uh here you can specify the duration
0:33
in seconds how many seconds each image
0:36
should appear in the video. So let's
0:38
suppose I provide two here 2 seconds and
0:41
then I need to select the multiple
0:43
images right here. You can select either
0:45
PNG or JPG images. Let me select these
0:49
uh six images that I select. So the
0:52
total length of the video will be 12
0:54
seconds. So as I click the generate
0:56
video option guys what will happen it
0:58
will make the simple post request to the
1:01
backend API this angular front end and
1:04
now it will display the video after
1:06
processing it. So now you can see that
1:07
the generated video is now showing in
1:10
the video player. I can [snorts] simply
1:11
play the video and you can see basically
1:14
after 2 seconds the slideshow this is
1:17
actually a slideshow here we have
1:19
constructed using ffmppg and each image
1:21
is appearing for 2 seconds right here
1:23
and we are displaying this inside the
1:25
video player and what we are doing right
1:28
here the video is generated in the
1:30
backend API that I constructed using
1:32
NodeJS express and we are sending this
1:35
to the front end of angular and we are
1:38
converting to to blob object checked and
1:41
basically showing it in the video player
1:43
and also at the bottom side you will
1:45
basically see a download video button.
1:48
As I click this button my MP4 video will
1:51
be downloaded and now I can play this
1:53
video in my PC. So you will see it's a
1:56
slideshow. After 2 seconds the all the
1:59
images are there you can see that you
2:02
can convert this multiple images to
2:04
video. So it a simple video editor where
2:06
you can generate videos and we have
2:09
coded this inside NodeJS express and uh
2:12
Angular.
2:14
So if you want the full source code of
2:16
this application guys the link is given
2:18
in the description. I have uh provided
2:21
two links. So you can either go to
2:23
PayPal and make the payment in United
2:25
State dollar or you can go to stripe and
2:27
make the payment in Indian rupees. So
2:29
both the payment links are given in the
2:31
description of the video guys. So now I
2:34
will basically
2:36
show you how to build this application.
2:38
Let me show you first of all what are
2:41
the technologies I'm using. I'm using
2:43
angular material to actually construct
2:46
this UI uh UI user interface. So angular
2:50
material UI basically it's a component
2:52
UI library for uh angular. This is
2:55
actual command needed ng add at the rate
2:58
angular/material
3:00
and we are also using this package which
3:03
is fluent ffmpg which is actually a
3:06
package in nodejs which makes it very
3:09
much easy to execute ffmppg
3:12
commands. So it is almost 700,000
3:17
weekly downloads a very popular library
3:19
package. So
3:22
now what I will do I basically
3:25
constructed a new front end two folder
3:27
which is a simple NodeJS oh sorry
3:29
Angular project which is empty. So what
3:32
I will do I will simply now
3:37
stop this server. So you can see the
3:39
server has been stopped.
3:45
I see here you can see
3:49
localhost 4200.
3:53
So now the server is not running. So
3:55
what I will do is that I will simply go
3:57
to this front end two folder.
4:03
So this is actual you just uh need to
4:06
execute ng followed by new and then your
4:10
project name. So I will I just created
4:12
this project. So I can cd into this
4:15
front end
4:16
two. And here we need to add uh this
4:20
package guys which is angular material.
4:22
The command that I showed you ng add the
4:26
rate material/mater
4:32
sorry add the rate angular /material.
4:36
This is actually at the rate angular
4:39
/material.
4:43
This will actually add the package for
4:46
angular material in your angular
4:48
application. So it will ask some
4:50
questions to you after you do this. So
4:53
we will be using the package manager
4:55
which is npm. So it is automatically
4:58
doing this for you and it will just ask
5:01
you some questions to set up this. So
5:04
package information loaded. So it is
5:07
asking that would you like to proceed. I
5:09
will say yes. So it is just installing
5:12
the packages for angular material and
5:15
once it is done we will now
5:19
select I think it will ask for the theme
5:22
information.
5:30
It will just install the latest version
5:32
of angular material which is 16.2.14.
5:36
You will see you need to choose a theme
5:38
here. So let me choose this theme which
5:40
is deep purple amber and it is saying
5:43
that certain global angular material
5:45
typography styles.
5:47
Uh I will say
5:51
yes.
5:54
And it is asking include and enable
5:57
animations.
5:59
I will say do not include. Our
6:02
animations are not required for this
6:04
project. So I will say no. So now your
6:07
package is installed guys. So if you
6:09
basically check your package dojson file
6:13
you will see this package will be added
6:15
at the rate angular material 16.2.14.
6:18
So we are actually using this package uh
6:21
sorry angular 16 here which is actually
6:24
the latest version as of recording this
6:27
live stream. And uh now we will actually
6:30
go to this app folder and this file
6:33
app.module.ts ts file to actually
6:36
register all the modules that we will
6:39
use. So this is the very first thing
6:42
that you need to do.
6:45
So what we will do right here we will
6:48
simply import
6:50
first of all the browser animations
6:53
module
6:55
and this we will be including from add
6:58
the rate angular
7:00
/ platform browser/an animations
7:05
after this we need to include the forms
7:09
module guys this is required because we
7:11
are working with forms so basically it
7:14
is part of the angular library.
7:17
Angular is a framework big framework. So
7:19
it includes animation forms all HTTP
7:22
client as well. And also we need also in
7:27
order to make HTTP request we need this
7:29
HTTP client module. HTTP C is capital
7:35
client module. And this will be coming
7:37
from
7:39
this uh add the rate angular/
7:44
common /http
7:49
and then we just need to add all the
7:51
modules that we will use in our
7:54
material. So one such module is matt
7:58
button module
8:01
and this we will be including from add
8:04
the rectangular material/button.
8:08
There are various uh components
8:10
available autocomplete, badge, all these
8:13
are there. We will use the button
8:15
component
8:17
and similarly we will use the mapped
8:21
input
8:22
module and this will be coming from at
8:25
the rate angular/
8:28
material/input
8:33
and also we will be using our uh
8:37
matt form field. Matt form field. It
8:41
will be coming from add the rectangular
8:43
material form field.
8:46
Uh I think that's all that we will need
8:49
for this. And now we just need to add
8:51
all these in the imports array. Just put
8:54
comma and forms module.
8:58
HTTP
8:59
client module, math form field,
9:04
map button module, math
9:08
input module. So we you can see we have
9:10
added all this and also browser
9:12
animations module.
9:16
So just put a comma. So just add this
9:18
inside import. So now the setup process
9:21
is complete guys. Now we just need to
9:23
close this file and just move to your
9:26
app do.components. component html file.
9:28
So I will simply remove everything here
9:30
and simply write a h1 statement which is
9:32
hello world. And now let me run the
9:35
angular project type here which is
9:38
ngserve the command ngserve.
9:42
So it will start this local development
9:44
server on localhost 42,000.
9:47
So just wait the server is starting. So
9:51
the very first time it will take some
9:53
time to start.
9:58
So it is simply generating the bundle.
10:02
So just wait for the process to finish.
10:04
And uh default port number is 4200
10:09
for angular application.
10:24
So it is just generating it. So just
10:26
wait.
10:28
So it is saying that matt form field
10:32
appears in imports but is not standalone
10:35
and cannot be imported directly. Must be
10:37
imported by an ngmodule.
10:41
Uh matt form field. Matt form field. Let
10:44
me check
10:46
in the app.com modules.
10:50
Matt form field.
10:53
Okay. Okay. Sorry. This needs to be matt
10:55
form
10:57
field module. Sorry. This needs to be
11:00
module
11:05
mat for field module.
11:08
Just change this and refresh. And now
11:11
you will see basically hello world is
11:13
showing right here. And now we just need
11:17
to construct the interface guys. Just go
11:19
to your this file app.component.html
11:23
file
11:25
and right inside this file guys we will
11:27
try to make the interface. So we will
11:29
have a div tag H1 and we will be giving
11:32
a style to it of uh text align to center
11:38
and the heading will be here which is
11:40
video generator
11:44
and then we will have a break tag and a
11:48
break again we will be basically be
11:51
giving a style to it display flex
11:56
and justify
11:59
content to be centered.
12:05
Inside this we will basically have a
12:07
div.
12:10
Give it a style here which is width to
12:12
be 50%.
12:16
Matt form field.
12:20
So if you just refresh now you will
12:23
basically see it will appear right here
12:25
in the center position and we will use
12:27
bat form field which is actually the
12:30
component
12:31
and one such attribute is there
12:34
appearance
12:37
apn
12:42
c appearance and it comes at outline and
12:46
here the style here which will be width
12:51
100%.
12:55
Math label and this will be duration
13:00
will be in seconds.
13:07
And here guys, we will basically have uh
13:10
matt
13:13
input
13:15
and this will be type text.
13:19
If you just refresh now there will be a
13:22
simple input field where the user can
13:24
write the duration in seconds. So you
13:27
can even only write number. So now to
13:29
put this restriction we will uh we can
13:33
also change this to number but I will
13:34
just stick to text. So user can write
13:37
text here. And
13:41
this is basically it. That's all that we
13:44
need to do here. I will come to the
13:46
angular part later on whenever we write
13:48
our app.component.ts
13:50
file. I'm just writing HTML code here
13:52
right here. And then we will have input
13:55
type file where the user can actually
13:57
upload images and we will only be
14:00
accepting the images. So image/star
14:04
multiple. So here will allow the user to
14:07
select multiple images. So if you
14:09
refresh we will have choose file button.
14:12
Very good. After that we will actually
14:16
have a button guys to actually submit
14:18
the form and this button will simply say
14:21
generate video and we will be giving a
14:25
attribute mapped raised button
14:30
and the color will be primary I think
14:37
that's all. So if you just refresh now
14:39
there will be a button purple theme
14:41
button and it is raised button. As you
14:43
hover onto this the color the button is
14:46
raised with a dark shadow.
14:49
So
14:50
I think that's all for the interface.
14:52
Now I will write our app do.component.ts
14:55
file. So there are some variables that
14:58
we need to give guys for this
14:59
application in app.component.ts
15:02
file. And there will be four variables.
15:06
First will be duration and it the type
15:09
will be string. Initial value will be
15:12
empty and the images which will be a
15:15
file array
15:18
and it will be empty
15:22
and then we will have also have a
15:24
message which will be of type string. So
15:27
this message will be shown to the user
15:29
whenever the response will be coming
15:31
from the backend API whether the video
15:33
process successfully or not. this
15:36
message will be there. And lastly, in
15:37
order to play the video, we will have
15:39
the blob object video blob
15:44
and the current value will be null.
15:47
So these four variables we have declared
15:49
guys. Now we need to map these four
15:51
variables in the template so that we can
15:54
synchronize this with the template as
15:57
well. So
16:00
how we can do that? Just open your
16:02
app.component component HTML file. So
16:06
right here
16:08
first of all we will basically target
16:11
this uh duration input field and right
16:16
here
16:19
if you see we will assign a ngmodel this
16:24
is called as ngmodel this is a two-way
16:26
data binding in angular and we will
16:30
assign the duration variable that we
16:32
declared so that's all and the next
16:35
thing we need to do
16:39
we need to bind a on click listener to
16:41
this uh
16:44
image thing. So whenever we change or
16:48
whenever we select images this event
16:50
will automatically fire which is on
16:52
change. So here we will execute this
16:54
function handle image change and inside
16:58
parenthesis we will pass the event
17:00
dollar event like this. So now we just
17:03
need to execute this function
17:06
after whenever we select images and one
17:10
more thing we will bind the onclick
17:12
listener. So whenever we click this
17:14
button this function will execute which
17:16
is handle submit.
17:19
So
17:22
now we just need to write these two
17:24
functions in the app.component.ts
17:27
file.
17:28
So
17:32
first of all we will also have basically
17:35
our constructor for this and this
17:37
constructor will take
17:40
HTTP which will be of type HTTP client.
17:43
It will be automatically imported from
17:46
add the rectangular common http
17:49
and uh put a comma and also we will have
17:52
sanitizer
17:55
sanitizer
17:57
which is of the type dom sanitizer which
18:02
is part of the angular base library.
18:04
This is useful guys do we need to
18:07
sanitize our URL before we play the
18:09
video. So this is required. So these two
18:12
are required. So just empty parenthesis
18:15
so a curly bracket. So we are passing
18:17
these two dependencies guys in the
18:19
constructor of this angular component
18:21
app component. And now we just need to
18:24
define these two methods which is handle
18:27
duration
18:30
change.
18:33
And this will have event of any.
18:37
And also we will have our event
18:43
handle image change.
18:46
Handle image change.
18:49
event of
18:52
any.
18:55
So I think we forgot to add this handle
19:01
handle duration
19:03
to the matt input field. I think
19:09
ngmodel
19:13
matt input.
19:15
Okay. Handle duration change. Okay.
19:18
Okay. So first of all let me just show
19:21
you basically whenever we do this what I
19:25
need to do. So if you see guys the
19:27
images is an empty array file this is
19:30
empty array. So whenever we select
19:33
images what we need to do we can access
19:35
this this dot images. This is a
19:38
constructor we can access by using this
19:40
dot images and then event.target
19:44
dot files. So whatever files the user
19:47
select guys we will initialize this to
19:49
this empty array this do images.
19:53
And now in the handle submit sorry this
19:56
needs to come in the handle image change
19:58
sorry right here.
20:02
And now we will write our function which
20:04
will be async function handle submit.
20:12
This function will get executed guys
20:14
whenever we click this button. If you
20:16
see
20:18
this function gets executed when we
20:21
submit the form. So first of all we need
20:23
to construct our form data object
20:28
new constructor of this new form data
20:32
and one approach this is the most common
20:34
approach guys followed in every
20:36
application. If you want to send data
20:38
from a form to your backend API, you can
20:41
wrap all your data inside form data
20:44
object and it contains this method
20:46
called as append and here you can append
20:48
as much information that you want. So
20:50
one such information we need to append
20:52
which is duration. We can access this or
20:55
duration and then we can simply use a
20:58
for loop let is equal to zero and we can
21:01
loop this to the length of the images.
21:04
Let's suppose user selected six images.
21:06
So it will run six times this dot
21:09
images.length i ++ for each image we
21:13
will do the same process form data
21:15
append images
21:18
this dot images I. So it will loop
21:22
through all the images the user selected
21:25
and it will be appending in the form
21:27
data object like this. So after this
21:30
guys, we just need to make a post
21:32
request
21:34
to the backend API
21:37
express API. So to generate the video.
21:42
So now we will have the try catch block.
21:47
I think I just
21:50
Okay.
21:54
So inside our try catch if any sort of
21:57
error take place we can just console log
21:59
it.
22:04
So inside this guys we need to miss
22:07
basically make a response of type any
22:11
and await and this dot http post and we
22:17
will be making a simple post request
22:19
http localhost this will be the address
22:21
on which the backend API will be
22:23
listening 30001
22:25
/ generate video
22:29
and we will pass the form data as a
22:31
second argument. moment and then
22:35
we will be expecting the response type
22:37
to be blob
22:40
because we will be basically be
22:42
displaying the generated video. So that
22:44
video will be in the format of blob. So
22:48
like this and [snorts] then we will
22:50
simply convert this to a promise
22:54
so that we can basically
22:59
so then we can simply say this dot
23:01
passage video
23:05
you can just have any message video
23:07
generated
23:09
successfully.
23:14
[snorts]
23:16
So this message you can display it in
23:17
the template app.component.html
23:22
just write here after the button. So
23:27
just write here you can display this
23:28
message in the paragraph double curly
23:31
bracket. This is
23:35
just display the message like this this
23:39
message.
23:40
So,
23:45
so now we are basically doing a simple
23:48
post request guys. Now we just need to
23:50
make this backend API first of all just
23:53
to make sure if the code is working and
23:55
then we will display the generated
23:57
video. So up till now we just
23:59
constructed these UI angular UI. Now we
24:03
just need to make the backend API. So
24:05
backend API is very simple guys. just
24:07
create a NodeJS express application and
24:11
uh these are the packages that we are
24:13
using in NodeJS backend API. Course
24:16
module to actually enable the cross
24:18
access so that any front end can use my
24:21
API. Course express is a backend server.
24:25
Fluent FMPG is used to call FFMPG
24:28
commands. Malter is used to actually
24:31
store upload the image files which are
24:34
selected by the user and UYU ID is
24:36
actually used to generate the random
24:38
file names. So if you purchase the full
24:41
source code guys you will get all this
24:42
source code with full directory
24:44
structure. The links are given and this
24:46
is index.js file. I will only write the
24:49
post request. Rest of the code is very
24:52
selfexplanatory.
24:54
Let me just guide through. We are
24:55
basically including all the modules
24:57
starting the server on 30001 port number
25:01
and we are basically including the
25:03
course module using it as a middleware
25:06
and then we are defining the storage
25:07
object where we are storing the files we
25:09
are storing it in the uploads directory
25:12
and then we are basically giving malar
25:15
this storage that we constructed and
25:17
just make sure that you create the
25:18
uploads directory here all the uploaded
25:21
image files will be stored just make
25:24
sure that you create this uploads
25:26
directory before you start our NodeJS
25:29
application.
25:31
So currently it will be empty. Now we I
25:33
will just write this API endpoint to
25:36
actually
25:39
generate the video based upon the images
25:42
which are shown by the user.
25:46
[snorts] So it will be app.post post
25:49
slashgenerate
25:52
video and this will be upload array. In
25:55
order to upload multiple images, this
25:58
will be images like this request
26:01
response and this make sure that the
26:04
name same variable that you are using
26:07
because we are sending this in the form
26:10
data object. This name should be the
26:12
same here images.
26:15
So this name should be the same.
26:18
And now the after uploading all the
26:20
images now what we need to do we can
26:23
also extract the duration
26:28
by request body.
26:30
And now we need to basically in order to
26:34
generate a video from series of images
26:37
we will need to create file.txt file.
26:39
The format of this file will be pretty
26:41
simple.
26:44
This will be file space the actual file
26:47
name or the path and then duration we
26:51
will be writing 4 second same file 2.jpg
26:55
duration 4. So this is actual format of
26:59
this file. So based upon this format f
27:01
ofmppg will generate the video. So we
27:03
just need to first of all make this file
27:05
programmatically
27:07
using the images and the duration. So
27:10
what I will do I will also give the
27:13
output file name.
27:17
So every time the name will be unique
27:24
and basically we'll get the files which
27:26
are submitted request files basically
27:29
it's a array for each file we will
27:32
actually get the file path. So file.path
27:34
path. So we are basically storing the
27:38
paths in this images uh array. So now we
27:43
will construct our input image file
27:47
sorry txt file and for each image path
27:52
we use the back tick symbol. This is
27:54
actually the format in single quotes.
27:56
This will be the path
27:59
image path
28:02
and then we will have a new line
28:03
character to [snorts] show the duration
28:07
on the second line. Duration will be the
28:09
duration that is passed and then we will
28:12
simply join this by a new line character
28:15
so that all the things appears in the
28:18
new line. So now we just need to write
28:23
this using the file system module. Write
28:25
file synchronize text file name input
28:29
text.
28:33
And now we just need to use the fluent
28:34
fMPPG and it contains uh
28:39
these methods which is input
28:45
ffmppg,
28:48
input and text file name.
28:52
input options.
29:01
So this is actually the thing guys
29:03
basically it's little bit complicated.
29:05
So what I will do I will simply paste it
29:09
and just summarize you what is
29:11
happening. So
29:15
these are chain of different methods
29:17
guys which are actually doing the
29:19
processing. First of all, it is applying
29:22
these input output options uh video
29:26
filter scaling
29:28
so that it uh image covers the entire
29:31
space of the video and we are encoding
29:34
it uh using our G GPU graphical
29:38
processing unit. I have a dedicated uh
29:41
GPU available. So I'm just using it so
29:44
to increase the speed of the fmpg
29:47
command. So after that we are providing
29:50
the output file name and it listen for
29:52
various events. So when the processing
29:54
is over we are simply calling this event
29:56
and then we are saying video conversion
29:58
finished and uh
30:02
after this this code is important. So
30:04
what I will do after we listen for this
30:09
on and
30:12
our video conversion is finished.
30:14
Basically after do doing this what we
30:16
are doing
30:20
we need to send the video to the front
30:22
end so that the user can display it. So
30:26
we need to read the content of the video
30:28
file
30:30
in blob. So we can use read file method.
30:33
We can say output file name. So this
30:36
will read the actual video file and
30:39
convert this into a blob. So what I can
30:41
say after reading it, we can delete this
30:44
output file and also delete
30:48
the input text
30:54
or text file name
30:59
and here we need to simply send the
31:01
video
31:05
to the front end.
31:07
So how we can send this? We can set the
31:09
header response header which is content
31:13
type blob
31:16
and then followed by uh videos mp4
31:19
extension which we are sending response
31:21
send data that's all this is all the
31:24
backend API which is necessary the
31:26
server will be listening on port number
31:29
that we specify here which is 30001
31:32
and if I go to app dot component.ts TS
31:35
file.
31:37
So just make sure
31:41
just execute this and you will basically
31:43
see a message video process
31:45
successfully. So if I just
31:48
generate video so you will see video
31:52
generated successfully. And if you check
31:56
the video will be deleted.
31:59
nothing is present because we basically
32:01
call this uh we are calling this uh fs
32:04
unlink. So it is basically deleting the
32:07
video and also deleting the file name
32:10
also. So what I just need to do right
32:12
here in order to display the video it's
32:14
very simple.
32:19
So what I will do after this
32:23
this dot video blob is equal to response
32:26
that's all.
32:32
So now in the app.component component
32:34
html. After you do this,
32:39
just after this
32:44
uh
32:46
one two and we will also have a break
32:48
tag here and then we will have a div tag
32:53
and this div tag will be having a
32:55
condition which is ng if
32:59
we will also have a condition ng if
33:04
which is video blog. So if this video
33:06
block variable exist then it will
33:09
execute because we here we have provided
33:11
the response right here initial value is
33:14
null. You can see that initial value is
33:17
null but we are now providing this
33:18
response to it. So here we are simply
33:21
checking if the video blob variables
33:23
exist then in that case show it display
33:27
flex
33:28
just and center it justify
33:35
justify content to be center
33:40
and here
33:45
width will be 50%. set.
33:55
So video
33:58
controls
34:00
style width 100%.
34:05
Source and here we will be attaching
34:08
dynamically the source property. It will
34:11
be equal to the video block that we have
34:15
question mark. If the video blob doesn't
34:17
exist in that case sorry here we are
34:20
using a turnary operator and here we are
34:22
simply checking if the video blob exist
34:24
in that case sanitize
34:28
call the sanitize function in the
34:30
TypeScript code and pass the video blob
34:32
as an argument
34:34
and [snorts] now we just need to define
34:36
this function video blob and if doesn't
34:38
if it if it doesn't exist colon in that
34:42
case single quote
34:45
nothing. source is nothing. And here we
34:48
need to attach the type parameter which
34:49
is video/mpp4
34:56
and just after the video we will also
34:58
have a button to actually download the
35:00
video.
35:03
So button matt raised
35:07
the color of the button will be primary
35:13
and just also okay first of all let me
35:17
do this so it will now show you this
35:19
error message that video blob doesn't
35:22
exist the sanitize function doesn't
35:24
exist so now open your app docomponent
35:28
ts file and just define this sanitize
35:31
function
35:38
I think [snorts] yeah so you can just
35:42
define it right here which is sanitize
35:49
and we'll pass the block which is of
35:51
type blob and save URL
35:57
like this
35:59
and inside this.
36:07
So here we will simply say this dot
36:09
sanitizer
36:12
dot bypass
36:17
security truster
36:19
sorry
36:22
trust URL
36:26
URL dot create object URL and then here
36:31
we need to pass the blob which is passed
36:37
So it is giving me some error. Let me
36:39
check.
36:42
[snorts] Okay, you need to I think I
36:52
save URL.
37:02
I think I'm making a typo mistake right
37:04
here somewhere down the line. Let me
37:07
just copy this. Paste it.
37:11
So now it is Oh, sorry.
37:14
I was just
37:17
We just need to add the return statement
37:19
right here. We need to return this. So
37:20
that error will go away. So we just in
37:24
angular guys we do need to use this
37:26
additional mechanism to actually show
37:28
the video which is bypass security trust
37:30
URL and without this the video will not
37:34
show. So if you now refresh now
37:36
basically if you go to select some
37:40
images to convert to video
37:43
click generate video. So now your video
37:45
will should play you will see in the
37:47
video player. And uh now we just need to
37:50
bind the onclick listener to the
37:51
download video button so that we can
37:53
download the video as an attachment. So
37:56
this process is pretty much the same for
37:59
any framework that you will do. So we
38:03
will simply bind a onclick listener to
38:07
this.
38:09
So click
38:11
So when you click this we will simply
38:13
execute a function handle download.
38:17
So right here guys what we need to do
38:23
handle download.
38:26
So if the if this if video blob does
38:30
exist in that case we will need to
38:33
construct our window URL dot create
38:37
object URL this dot and here we need to
38:40
pass this dot video block. After that we
38:43
need to construct our anchor element.
38:45
Document dot createelement an a.
38:49
Href will be equal to URL.
38:53
[snorts] This is pretty much the same
38:54
guys. We do it in in order to download
38:57
the file as an attachment. This is the
38:59
same logic that we use for vanilla
39:02
JavaScript.
39:04
We are clicking it a do.click.
39:09
Here we will remove this remove child
39:13
A. First of all we need to add this
39:16
document body append child
39:20
A. That's all. So now it with this code
39:23
it will now also download the video as
39:26
an attachment. So
39:36
you will see the video is now generated.
39:39
It can now play.
39:41
So if you just need to download this,
39:43
simply click this button and your video
39:45
will be downloaded as an attachment MP4
39:48
file. So all the source code is given
39:50
guys of this project in the description
39:52
of the video. If you're interested, you
39:53
can go to PayPal and make the payment in
39:55
United States dollar or make the payment
39:58
in Indian rupees in at Stripe. Both the
40:02
payment links are given. Please hit that
40:04
like button, subscribe the channel and I
40:07
will be seeing you in the next video.