0:00
Hello guys, welcome to this video. So in
0:02
this video, I'll show you I built out a
0:04
Canva clone video cropper editor where
0:07
you'll be able to crop your videos
0:09
directly in the browser. So we are
0:11
running this project at localhost as you
0:14
can see. So this is entirely built
0:16
inside ReactJS. So this is the full
0:18
directory structure of this project. If
0:20
you're interested, you can directly
0:22
purchase the full source code of this
0:24
project. I have given the link in the
0:26
description. So as you can see we are
0:29
using the latest version of react and
0:31
for this we are also using ffmppg web
0:33
assembly library as well. So I already
0:35
started this project. We are running it
0:38
locally. It's also very easy to deploy
0:42
So now just select your video file
0:46
whichever video file that you want to
0:48
crop. After that this interface will
0:50
open. So as we crop images, same thing
0:54
we need to do for images videos as well
0:58
using your mouse. Simply select the
1:01
portion which portion you want to crop
1:04
of this video. So let me select this
1:09
After that you click the
1:13
confirm button. After that click the
1:15
render button to start fmpg processing.
1:20
So as soon as the processing finishes
1:23
your video will be successfully cropped
1:25
and the output video file will be shown
1:27
to you. So mind you all this processing
1:31
is directly happening in the browser.
1:32
There is no back end to this
1:34
application. It's a single page
1:36
application inside ReactJS.
1:40
So all the processing is taking place
1:42
directly in the browser.
1:46
So you also see the progress bar how
1:48
much time is remaining. So everything is
1:50
it's a fully fledged project and once
1:53
you purchase it you will be able to see
1:55
the source code and also be able to
1:57
modify the source code as well or add
2:05
So this processing totally depends upon
2:07
the length of the video file. So if your
2:10
video is long then the processing will
2:12
take large longer time.
2:15
So we are using this library ffmpg web
2:18
assembly library which allow you to
2:20
execute ffmpg directly in the browser.
2:24
So we are using this inside our
2:36
So these are the logs here. As you can
2:38
see fmpg is directly processing the
2:41
video second by second.
2:44
So once it finishes we will see the
2:47
output video file and this is the full
2:50
directory structure of the project. I've
2:52
given the link guys in the description.
2:54
Each component is divided into its
2:56
appropriate TypeScript file and SAS
3:00
file. So everything is customizable.
3:02
Once you get the source code you will be
3:04
able to see the source code and see how
3:06
I built out this project.
3:12
So now you can see the video is
3:14
successfully cropped. Uh hello guys and
3:17
then I selected that portion and
3:19
successfully the video is successfully
3:21
cropped here as you can see that. So
3:23
this is really simple guys. Uh
3:28
if you just want to crop the video this
3:30
is a very important project that I
3:35
Cropping videos are really difficult
3:37
because uh you requires some special
3:40
software for doing its job. So this by
3:45
which you basically use your mouse and
3:49
simply select whichever portion that you
3:57
you basically can select using your
3:58
mouse. After you selected it just
4:04
and click on render. That's all. After
4:07
that the video successfully cropped here
4:10
and you basically get the option to
4:13
and you can download the output cropped
4:15
video. So it's a Canva clone video
4:19
cropper editor to the check out page
4:21
similar to Canva clone video cropper
4:23
editor. So if you're interested guys in
4:25
this uh I have given the link in the
4:28
description of the video. You could
4:29
directly purchase this full source code.
