live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a React.js FFMPEG WASM Canva Clone Timeline Video Editor in Browser Using TypeScript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-wasm-canva-clone-timeline-video-editor-in-browser-using-typescript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:05
uh hello guys welcome to this uh video
0:08
so in this video I will talk about a
0:10
fmpg web assembly uh video editor such
0:14
as canva that I developed inside browser
0:17
and it is built inside react Chas using
0:20
typescript so this is actual live demo
0:23
that you can see on your screen so as
0:24
you are open this application for the
0:27
very first time you can see it is
0:29
running it on on Local Host 5173 you
0:32
just need to run this command npm run
0:34
Dev this will actually start this
0:37
development
0:39
server so it is saying could not
0:44
find so this
0:46
is the file here if you
0:55
see so this is this is actual
1:00
project guys you will see this is the
1:01
actual command which is npm
1:13
runev so it is saying that could not
1:15
find you need to provide inside your
1:17
package.json file there is a name field
1:19
you need to provide it just provide a
1:22
name field right here just add a name
1:26
field just give it a name here to your
1:29
appli
1:32
application so now you can start this
1:34
npm run Dev this will actually start
1:37
your application you will see Local Host
1:39
5173 so this will actually if I refresh
1:42
here your video editor will basically
1:45
start here and uh you will basically see
1:48
here there is a upload button you can
1:50
actually select which videos you want to
1:53
edit I have already added one video in
1:55
the timeline so I can delete this by
1:58
using this dpin icon I select this and
2:01
you can see and go to the uploads option
2:05
right here we can upload a new video as
2:09
well simply navigate to your directory
2:11
wherever your video files are present
2:14
simply
2:16
navigate add this
2:18
video Simply select the video and move
2:21
to timeline so your video will get added
2:23
in the timeline editor just select the
2:26
this tag right here you can navigate to
2:29
any video so
2:30
can play the HTM turn the volume have
2:34
used this tool so it basically gives you
2:37
the you can see the video is playing
2:39
with with sound guys the video contains
2:42
sound that's why it is PS code which is
2:44
required for the so it is having the
2:47
timeline contained inside
2:55
it you can see that so it basically
2:59
contains the overall video it is 4
3:02
minute 40c long video Let's suppose guys
3:05
if you want to trim a certain portion of
3:07
this video so what you can do you can
3:10
navigate to whatever portion that you
3:12
want to cut this video from let's
3:14
suppose I want to cut from this
3:19
portion from this uh so what I will do
3:22
is that there is an option right here
3:24
which is uh
3:26
this scissor option simply select this
3:29
second option here scissor that's all so
3:34
just do it split this video so as you
3:37
split this you will basically see you
3:40
have successfully splitted the video and
3:43
this is basically divided into three
3:46
sections this is the first section you
3:49
can see this is actually the first
3:50
section this is the second section and
3:54
this is the third section so now we can
3:56
select the desp icon and basically
3:58
delete this section and delete the
4:00
section so now your video will only
4:02
contain 28 second you will see we have
4:05
all automatically deleted that video
4:08
that portion that we don't want so our
4:10
output video will only contain 28
4:12
seconds so now if I want to export this
4:14
video we will go to the export video
4:17
export options so it is saying that
4:19
exported video will be in 21x 9 1280 bys
4:24
536 if you want to change them please go
4:27
to the video setting section you need to
4:29
go to the video setting section right
4:31
here and uh you can basically resize the
4:35
video 16 by9 change the aspect ratio 21
4:38
by 9 1X 1 4x3 these are the different
4:43
aspect ratios which are given guys which
4:46
you can basically do that let's suppose
4:49
we are doing it one by
4:52
one and resolution you can basically
4:55
select 1080p 480 360 let me select 72 20
5:00
resolution and
5:03
then after that we can
5:07
basically export simply click the export
5:09
option so now it is using fmpg web
5:13
assembly to actually show the progress
5:15
part so it is processing your exporting
5:18
the video using fmpg web assembly
5:21
library and once it reaches 100% your
5:24
video will get downloaded so guys the
5:26
link is given in the description you can
5:28
directly purchase the Full Source Code
5:30
of this project which is coded right
5:32
inside react Chas which is a fmpg canva
5:36
clone video timeline editor now you can
5:39
simply download your video so you can
5:41
see your video is successfully
5:43
downloaded so it contains 25 seconds
5:46
hello guys today in JavaScript we Shadow
5:48
guys so video is successfully resized to
5:51
the aspect ratio that we selected and
5:54
the quality of the video has been
5:56
reduced from 1080p to 720p and it only
5:59
contains 25 seconds so we have
6:02
successfully trimmed the video as well
6:04
we basically cut the portion that we
6:07
don't wanted using the timeline editor
6:09
that we had so this is Shadow fully fled
6:13
client side timeline editor such as
6:16
canva which is developed inside react
6:19
CHS you can see it has a timeline editor
6:22
we can trim the portion by using this uh
6:25
scissor option basically trim the
6:27
portion it will divide the video into
6:29
two sections and we can even apply some
6:32
effects so there is this effects option
6:35
as well need to select the video
6:39
here so we can basically select the
6:44
opacity we can decrease the
6:46
opacity all these things we can
6:48
saturation brightness of the video we
6:50
can
6:54
control you can even blur the video as
6:57
well or we can reset so these are
7:00
different video effects that we can
7:02
apply right here opacity H shift all
7:05
that
7:07
stuff now you if you want to only export
7:10
this portion as well
7:17
only so click on
7:25
export so again it will show you that uh
7:29
progress part so this is a really good
7:31
option guys and uh you can see that uh
7:35
we can basically delete any portion
7:37
right here by using this dping dpin icon
7:40
so if you don't want this portion simply
7:42
delete this portion so that portion will
7:44
be deleted and now the video lengths 23
7:48
Second so in this way you can do this
7:51
guys very easily you can change the
7:53
aspect ratio 16 by9 for YouTube 21 by9
7:57
which is
8:01
so it only now contains 8 second
8:08
so it's a nice application you can
8:10
deploy that the link is given guys after
8:13
you get a zip file after you make the
8:15
payment and you will be able to deploy
8:18
this application it's a complete editor
8:20
in the browser which you can see
8:22
how nicely the video has been edited it
8:27
has been aspect ratio has been increased
8:29
to 21 by9 and the quality has also been
8:34
increased so guys after you purchase it
8:36
you will get this seual uh ZIP file and
8:39
you will extract the zip file to
8:41
actually uh this is the different
8:43
components of react chair of this fmpg
8:46
timeline canva clone video editor we
8:49
have the button component all these
8:51
components are coded in typescript it's
8:54
a JavaScript
8:56
superscript icon all these icon button
8:59
layout overload sidebar it's a canvas
9:03
editor which plays in the browser you
9:05
can player canvas component also there
9:07
molecules you can see that
9:15
so so nice little editor guys if you are
9:18
interested the link is given in the
9:20
description you can directly purchase it
9:22
and you can change the aspect ratio of
9:24
the video change the resolution of the
9:27
video which is the most important thing
9:28
in uploading videos you can change the
9:31
resolution aspect ratio then we can
9:34
apply different effects to the video
9:36
Simply select
9:43
video move the video to
9:49
timeline you can
9:54
basically apply some video effects
9:56
change the
9:58
opacity by like this or blur the
10:01
video if you want to now export this
10:04
video with these uh customized effects
10:06
that you have applied
10:09
so your video will get exported using
10:12
this nice little progress
10:24
bar just need to play this
10:27
video is a Time line which basically are
10:31
there guys if built-in timeline which
10:33
makes it easy for you to
10:36
actually uh export the video or do the
10:39
video editing part
11:00
you can even merge multiple videos right
11:02
here if you have multiple videos if you
11:04
want to merge it you can even do that as
11:09
well you can reset so if you have a
11:13
multiple videos that you want to Marge
11:15
you can even do that you can split by
11:17
using this uh scissor
11:20
icon you can delete any portion that you
11:23
don't want very easily you will see that
11:30
so total length of the video is 26
11:32
second so if I now need to export this
11:35
video so your video will basically get
11:38
merged using this
11:43
uh 5173 you can
11:46
see this is actually the project guys if
11:49
you are interested the link is given in
11:51
the
11:55
description it is actually using fmpg
11:58
web
12:10
assembly can delete can upload multiple
12:14
videos so the videos will get added in
12:16
the timeline you can see that so we
12:20
can delete the videos which we don't
12:26
need so exporting the video which makes
12:29
very much
12:46
easy so it is entirely coded inside
12:51
uh
12:53
typescript so after you make the payment
12:56
guys what you will get you will actually
12:57
get this zip file let me guide you how
13:00
to basically use this so first of all as
13:03
you will get this ZIP file guys simply
13:06
you need to open or extract it after you
13:09
make the payment you will get the zip
13:11
file just need to extract it using any
13:16
software which can extract zip file so
13:20
it will actually contain all the files
13:22
which are necessary for this project
13:23
which will contain these node modules
13:26
folder so it will actually create a
13:28
brand new
13:29
folder right inside your project
13:32
directory which will actually contain
13:33
all the files you will see that so it
13:36
will take some time for the extra
13:39
extractions to be completed all the
13:40
files will be
13:49
there so you just need to extract all
13:52
the
13:54
files and once it is completed you can
13:57
basically
14:08
start this project so first of all you
14:11
need uh yeah you can just run this
14:13
command npm run devs this will basically
14:16
start your development
14:23
server you can just type Local Host
14:26
5173 this will actually start your video
14:29
you can see no nothing video will be
14:31
there you just need to select the video
14:34
and move it to the
14:37
timeline like
14:39
this you can basically export the video
14:42
so exporting will take place once it
14:45
reaches 100% it is using fmpg web
14:48
assembly library and once it reaches
14:50
100% your video will get downloaded and
14:53
you will be able to download it so very
14:57
simple process guys it is coded in in
14:59
react CH and typescript you can see very
15:03
easy to use UI and uh which makes it
15:06
easy for the user
15:11
too so you can see that so uh hello guys
15:14
today in this thank you very much guys
15:17
for watching this video if you're
15:18
watching it for the very first time
15:20
please hit that like button subscribe
15:22
the channel and I will be seeing you
15:25
guys the link is given you can directly
15:26
purchase this application and thank you
15:30
very much for watching this live stream
#Online Video
#Multimedia Software
#Animated Films