0:00
Hello guys, in this video I'll show you
0:01
I built out a video cropper editor
0:04
directly in the browser using ffmpg web
0:07
assembly library. So we are running this
0:09
project locally inside our computer. So
0:13
it's developed in reactjs. This is a
0:16
full source code directory structure of
0:17
this. Each component is coded inside a
0:21
typescript and SAS file. And uh we are
0:24
using the latest version of React. So if
0:26
you need this source code, I have given
0:28
the link in the description. and you can
0:29
directly purchase it. We are also using
0:31
FMPPG web assembly library.
0:34
And uh now let me show you the demo of
0:36
this application. It's very simple.
0:38
First of all, you select your video file
0:40
that needs to be cropped. After you
0:42
select this, now you basically have this
0:45
userfriendly interface by which you can
0:53
So to basically cut the specific or crop
0:56
the specific portion inside the video.
1:01
as we do for the images similarly the
1:03
interface is quite simple. Let's suppose
1:06
I want to crop this portion and simply
1:08
tick mark this option. After that now
1:11
click the render MP4 section to start
1:14
the FMPPG processing. As soon as you do
1:17
this you will see the progress bar and
1:19
once it finishes you will see the output
1:21
video file is successfully created. will
1:23
be redirected to the check out page
1:25
where so in this easy way this cropping
1:29
of video is possible using this project
1:32
I built out from from scratch if you are
1:36
interested you can directly purchase the
1:37
full source code so once you get the
1:39
source code you will be able to modify
1:41
it or add additional features on top of
1:43
it as well the interface is quite simple
1:46
the video can be larger as well
1:50
the thing this editor is quite useful
1:53
Because you basically can crop the video
2:01
this progress bar will show and you can
2:04
see that. So how easy it is to crop
2:06
videos directly in the browser cut
2:09
videos using this userfriendly
2:12
interface. So you also see the progress
2:15
bar processing bar. So for this we are
2:18
using ffmppg web assembly library which
2:21
lets you allow ffmpg directly in the
2:23
browser. So we are using this library
2:26
inside our nextjs project sorry reactjs
2:30
project. So if you're interested in this
2:33
definitely purchase it. I have given the
2:35
link in the description of the video
2:38
and if you still face any sort of
2:40
problem after you purchase it I will
2:42
definitely help you. So,
2:46
so this is the full source code of this.
2:48
So, thank thank you very much for
