live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a React Canva Clone Timeline Video Editor in Node.js & Express Using Fluent-FFMPEG in Browser
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-react-canva-clone-timeline-video-editor-in-node-js-express-using-fluent-ffmpeg-in-browser/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
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 introduce to a new canva clone
0:11
video editor application that I
0:13
developed inside browser in react JS
0:16
nodejs Express and we are basically
0:19
using fmpg web assembly Library this is
0:22
actually the application that you can
0:24
see right here on your screen right
0:26
here it is actually using fluent fmpg
0:30
package in the browser to actually build
0:32
this client Side Video Editor something
0:35
like canva so there is simply this
0:37
option of upload video so you will
0:40
simply select your video file that you
0:42
want to edit so as we select the input
0:45
video file all extensions are supported
0:47
so as you basically select there will be
0:50
this select box here you can change the
0:52
aspect ratio of your video so four
0:55
aspect ratios are given 16 by 9 for
0:58
video uploading to YouTube 1X 1 4x3 9x6
1:03
is for Instagram vertical video if you
1:05
want to change your video to Vertical
1:07
you will simply select this option so
1:09
now your video will be changed to this
1:12
vertical so you can basically see this
1:14
is actually the timeline it is showing
1:17
right here 3 minutes 29 seconds so I can
1:19
simply play the friends today in this
1:21
tutorial you can the PDF you can see it
1:25
has actually formed the timeline
1:28
inside as you drag the video as you
1:31
select the video it will actually create
1:33
the timeline and it is showing it you
1:36
can play the video you can go to any
1:38
location in the video and you can see
1:39
that build out a very simple PDF the
1:42
video also contains sound as well you
1:44
can go to any section in the video and
1:46
there is this actions tab right here you
1:48
can toggle this actions tab and we have
1:51
different actions that we can perform
1:53
inside this video we have various
1:56
effects we can adjust the brightness
1:58
contract saturation
2:00
blur effect all these things we can
2:02
control we can even change the
2:04
background of the video as well to any
2:06
color using this Color
2:11
Picker and
2:13
uh you can even basically cover the
2:16
section right here if you want to cover
2:18
or contain you can have this option
2:20
video fit contain or cover and here also
2:23
you can change the as ratio 16x 9 1X 1
2:26
4X 3 9x 16 you can basically change this
2:29
as from here also if you're developing
2:32
for YouTube you will select 16x 9 or 9x
2:35
16 for vertical video so this is a great
2:38
video editor where you can change the
2:39
aspect ratio of your video you can trim
2:42
videos and uh also apply some filters
2:45
such as changing the brightness all
2:47
these
2:48
stuff so it is built using reactjs
2:51
nodejs Express and using fluent fmpg
2:54
this is actually the if you see let me
2:58
show you so we are actually
3:00
uh running this on Local Host if you
3:05
see and we are also using socket.io this
3:09
you can see
3:11
that if
3:13
I open this project you will basically
3:16
see right here uh this is the actual
3:20
project here simply as if you need this
3:23
project guys the link is given in the
3:25
description you can directly go to and
3:26
purchase the full source code after
3:28
purchasing it you will actually get a
3:30
zip file you need to extract it and then
3:32
you will have a client folder where we
3:34
will have our react Chase application
3:36
and this this is our server folder which
3:39
is containing the backend code for this
3:41
uh canva clone video editor using fluent
3:44
fmpg so this will be the directory
3:46
structure first of all what we need to
3:48
do we need to go to this client folder
3:50
and simply install the modules npmi this
3:53
will install all the modules which are
3:55
necessary for our react JS application
3:58
so in inside the C folder you will go to
4:01
package.json and here you can see we are
4:03
actually using all these packages it's
4:06
react front end and uh you just need to
4:10
install all these packages and then
4:13
that's all and then we need to go to the
4:15
server folder CD server and I also
4:18
install all the modules which are
4:20
present so if I show you basically the
4:23
package.json file for the server so here
4:26
we are actually using the FF MPG fluent
4:29
FFM PG package if you see right here we
4:32
are using the fluent fmpg package and we
4:35
are using the express backend to
4:37
actually build this uh and we are also
4:39
using socket.io for having the progress
4:42
bar I will show you how it works so
4:45
after you do this you just need to
4:47
execute this command which is npm Run
4:49
start so what it will do it will start
4:52
both your uh back end and the client
4:55
side concurrently so your application
4:58
will start on port number number three
5:00
Local Host 3,000 so it is just starting
5:03
it so just wait for the application to
5:05
start you will see it will show this
5:08
server is listening on 30001 first of
5:11
all it will start the backend Server
5:13
nodejs Express and socket. iio and after
5:16
that it will actually start your react
5:18
client side application in the browser
5:21
so it will run on Local Host 3,000 just
5:25
wait the react CH front end is also
5:27
starting
5:32
so basically it is running npm run
5:35
server and npm run client both commands
5:37
at one time concurrently so now it is
5:40
actually starting your react Chase front
5:43
end so it's a full stack application and
5:46
you will see Local Host 3000 it has
5:48
automatically start this application
5:51
it's a fully fleshed canva clone where
5:53
you can perform all the video editing
5:54
skills in this uh fully client side
5:57
application you don't need any third
5:59
party video editing software so simply
6:02
select your video change your aspect
6:04
ratio let me select 16 by 9 and after
6:07
that you have different actions you have
6:09
a fully flesh timeline editor and you if
6:12
you want to uh trim the video uh hello
6:15
so you can what you can do you can
6:19
uh select whatever portion that you want
6:22
let's suppose I want to trim this
6:24
portion from this so what I will do
6:27
click on the render option after you
6:28
selected the start start starting end
6:31
and the ending time so this portion you
6:33
need to trim out so what you will see
6:36
render click the render option so it
6:38
will basically render out your video
6:40
using this nice little progress bar uh
6:43
we are actually using socket.io to
6:45
actually build this progress part that
6:46
you are seeing right here so once it
6:48
reaches 100% it is using fluent fmpg to
6:51
actually render out the video using fmpg
6:54
library and it is actually trimming this
6:56
video and now it will actually create
6:59
new video and download this video as an
7:01
attachment so once it reaches 100% so
7:04
it's a fully fleshed you can see it's a
7:06
editor and now you will can download the
7:09
video Simply click download and your
7:11
video will get downloaded so whatever
7:14
trimmed portion that you so you can see
7:16
the length of the video in is 11 seconds
7:18
so whatever portion that you trimmed it
7:21
is successfully trimmed and the new
7:23
video has been downloaded so it's a
7:26
video trimmer fully fledged editor
7:30
with timeline you can basically select
7:33
the portion of the video that you want
7:36
to you can even
7:40
basically flip the video as well
7:42
horizontally or vertically flipping
7:45
option is also there and you can
7:47
basically change the brightness of the
7:49
video decrease the brightness change the
7:52
contrast level of the video
7:56
saturation you can even blur the video
7:59
as as well by using this filter or
8:01
invert all these uh effects you can
8:04
apply right here guys and
8:08
uh click on
8:12
render so as you apply
8:15
these filters so again it will render
8:19
out the video but now with the filters
8:21
that you have applied both the filters
8:23
that I showed you which is blood filter
8:26
so the resultant video will contain
8:28
those filters with those modified
8:30
settings that you applied so once it
8:32
reaches 100% it is again using fluent
8:35
fmpg so it's a very nice editor guys
8:39
fully fleshed editor you can see that
8:41
the brightness is changed the contrast
8:45
level is also changed right here of the
8:46
video you will see that the brightness
8:48
and the contrast
8:49
level and the image is and the video is
8:52
also blurred you can't see properly
8:55
whatever inside the video so in this way
8:57
you can apply these filters using the
8:59
awesome little video editor something
9:01
like canva with timeline I developed
9:05
this using reacts nodejs Express this
9:08
will be the actual application you will
9:10
get guys after you purchase it from
9:12
Google
9:13
Drive go go to the my website the link
9:16
is given after you purchase you will get
9:18
the zip file from Google Drive after
9:20
automatically you purchase the source
9:22
code you will redirect to Google Drive
9:24
and you will be able to download the zip
9:25
file this will be the directory
9:27
structure you just this this is a server
9:30
s side code so here all your video files
9:32
are stored in the uploads directory if
9:34
you
9:35
see and uh these are the services fmpg
9:38
you can see we are using the fluent fmpg
9:41
package right here so first of all we
9:43
are generating the thumbnails for the
9:44
timeline if you
9:46
see and this is socket.io basically we
9:48
are running it Local Host 3000 you can
9:51
even bu build this application the build
9:53
command is also there if you want to
9:56
deploy that so npm run build you can
9:58
just run this command to actually deploy
10:01
this application to your real domain
10:03
name if you're developing it for
10:05
production so we are actually using
10:07
molter library to actually store all the
10:10
input files that we select inside our
10:12
server uploads folder so we have the
10:15
server uploads folder so here we are all
10:18
storing the input files that are
10:19
selected by the user so it's a fully
10:22
fleshed editor guys pan shot you can if
10:24
you want to zoom it virtual pans short
10:27
Zoom pan as well
10:30
adjustments flip the video I showed you
10:32
the background effect and there is also
10:35
this audio if you want to remove the
10:36
audio if you want to you can toggle this
10:39
option so now the audio will be removed
10:42
you can even control the volume as well
10:44
you can increase it or decrease it by
10:46
using the slider so if you want to
10:49
decrease the volume in the video you can
10:51
basically have this
10:54
filter or you if you want to mute the
10:57
audio completely you can simply toggle
11:00
this option so now if you
11:04
see the video will not contain the audio
11:08
the audio in the video will completely
11:10
get
11:12
removed so this is a nice uh progress
11:15
part that you get showed guys to the
11:17
user because uh it's very helpful for
11:20
the user so that user can see clearly
11:22
see how much time is remaining and what
11:24
is the processing time left so it's a
11:27
good practice to actually show this
11:28
progress part of the user it's good for
11:31
user engagement and you can see that so
11:34
once it reaches 100% you can download
11:36
the video and if you see no audio is
11:39
present so audio is not present in the
11:41
video completely the audio is
11:45
removed so it's a fully fledged editor
11:48
guys with timeline editor something like
11:50
canva you can change the aspect ratio
11:53
apply all these 9 by6 if you're
11:56
developing for Instagram
12:00
you can basically cover the entire video
12:02
and uh click on render now so this video
12:06
will be now be
12:18
vertical so if you're watching it for
12:20
the very first time guys please hit that
12:22
like button subscribe the channel as
12:24
well
12:37
so now the video is changed to Vertical
12:39
video so if you want to deploy that or
12:42
Instagram or Facebook you can change to
12:44
Vertical
12:46
video alignment you can basically put
12:49
top bottom left right you can select the
12:52
alignment and output format if you want
12:54
to convert to different format these are
12:56
the formats available MP4 webm MO the
12:59
Avi MKV so any format you can select and
13:03
basically change your input file
13:11
to so you can change to any format in
13:14
the video so if you need this source
13:16
code guys the link is given in the
13:18
description you
13:20
will actually get this is actual
13:24
directory
13:26
structure so your you can see the video
13:29
is successfully converted from
13:31
MKV MP4 to MKV you will see that you can
13:35
play the
13:39
video we also have the undo
13:41
functionality as well if you want to
13:43
undo their work you can even have undo
13:46
as well right
13:47
here so this is actually the timeline
13:50
you can control whatever portion that
13:51
you want to trim or cut you can
13:54
basically apply the filter just select
13:56
this using the timeline that is provided
13:58
to you
13:59
so it becomes very much easy to apply
14:02
filters it's a fully flesh editor guys
14:04
if you are interested you can
14:07
uh purchase it the source code thank you
14:11
very much for watching this video and I
14:14
will be seeing you in the next live
14:16
stream
#Flash-Based Entertainment
#Online Video
#Multimedia Software
#Media Streaming Devices
#Video Sharing