0:01
Uh hello guys, in this video I'll show
0:03
you a Canva clone video editor project
0:06
that I developed directly in the
0:07
browser. This is the actual demo. Let me
0:09
play the video. So it has all the
0:13
features. You can change the background
0:14
color, add text, images directly. We
0:17
have a timeline where you can see the
0:19
live preview as well. So it's similar to
0:22
a professional looking video editing
0:24
software but it directly runs in the
0:26
browser. So we are running this
0:27
application at localhost 3000. It's
0:30
developed inside NexJS and let me show
0:33
you the source code right here. I've
0:35
given the purchase link. You can
0:37
directly purchase the full source code
0:38
of this project. After you purchase it,
0:40
you will get it from Google Drive
0:42
automatically. So all the components are
0:44
divided into its own TypeScript files
0:47
right here. So if I show you
0:49
package.json file, quite a number of
0:51
third party libraries we using NM.js, js
0:54
fabric js for animation we using the
0:58
react next latest version right here so
1:01
I'm just running it locally by running
1:03
this command npm rundev so this is
1:05
basically started a local development
1:07
server and now if I run through the
1:10
feature just refresh go to localhost
1:13
3000 it has its own timeline feature
1:15
right here now in the video section you
1:18
can add your own video by clicking
1:20
upload just select the video file and
1:22
click the plus icon and right here in
1:25
the timeline canvas you can add the
1:27
video and now we have all these
1:30
features. You can go to the fill section
1:33
to change the background color. Then we
1:37
can basically add some text. Go to text
1:39
section and just add some text. So here
1:43
you can place it accordingly wherever
1:45
you want to place it. If you want to add
1:48
a watermark just select it. Now go to
1:50
animation and you can add this animation
1:54
the slide in animation just select the
1:58
duration 5 second and now if you play
2:02
hello guys welcome to this video. So in
2:04
this video I will show you a same thing
2:06
you can do for images. Go to image
2:08
section. Go to upload. Just select your
2:11
image file. Add this to the canvas. And
2:20
now again go to animation. Here you can
2:22
apply any sort of fade in animation.
2:24
Let's suppose for 5 second.
2:29
So you can just see here.
2:33
You can add multiple animations. Now if
2:35
you want to export go to the export
2:37
section and now only I want to export
2:40
the first 5 seconds of the video. Click
2:42
on export. Hello guys welcome to this
2:45
video. So in this video I will show you
2:47
a Canva look. Automatically the video
2:50
will be downloaded with all the effects
2:52
applied. Uh now you can check out all
2:54
the features the fading animation title
2:57
text image background color is
3:00
everything exported. So this is the
3:02
overall project. If you are interested,
3:04
the link is given in the description.
3:07
It's coded inside next.js and you can
3:10
directly purchase the source code and uh
3:13
it's really awesome project. And you
3:15
also have the option to replace the
3:17
audio file by going to audio section. If
3:20
you have your own MP3 file, you can add
3:22
this to the timeline and this will
3:25
replace the original audio or you can
3:27
add a background music to the video as
3:30
well. So it's a timeline based editor
3:34
and you can also add multiple video
3:36
multiple videos as well.
3:42
So now you can even place multiple
3:44
videos. So you can add multiple videos
3:48
to the canvas. So if you want to
3:52
So you can just see here you can do add
3:56
multiple videos as well. So there is an
3:58
option you can add multiple images,
4:00
multiple text versions as well. So so
4:03
the possibilities are endless. If you
4:05
are a good video editor, if you do want
4:08
to do video editing, this software will
4:10
be very amazing. So you can directly
4:12
purchase the full script. The link is
4:15
given in the description.
