Up next in 10
Build a Angular Video Cutter & Trimmer Editor Using FFMPEG WASM in Browser Using TypeScript
Dec 22, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-angular-video-cutter-trimmer-editor-using-ffmpeg-wasm-in-browser-using-typescript/
Show More Show Less View Video Transcript
0:01
Uh hello guys welcome to this uh live
0:04
stream. So in this live stream we will
0:06
actually be looking forward on how I
0:09
developed this angular video trimmer and
0:13
video cutter project in the browser and
0:16
you can basically see I'm running this
0:18
on localhost 3000 and it's very simple
0:22
and I have also deployed this project on
0:25
my website as well. You can check out
0:27
the live demo. It is currently live.
0:30
Just go to video cutter editor. This is
0:32
actual tool website uh which I deployed
0:35
here. So same functionality I deployed
0:38
this to the website. You can also check
0:39
out the live demo. So if you basically
0:42
choose here you need to choose the video
0:44
file. Whatever video file that you have.
0:47
So now that you se you selected the
0:50
video file you can basically inside
0:53
using the sliders right here. You can
0:55
actually control which portion which
0:59
portion of the video you want to trim or
1:01
cut. First of all, we have the starting
1:04
slider and this is the ending slider.
1:07
You can control. So let's suppose I want
1:09
to trim this portion from 8 second to
1:11
the 14th second. Click on trim video. So
1:14
it will do the processing. And now you
1:16
can see that your video is successfully
1:18
trimmed. And now you can play the video.
1:21
You can see that.
1:23
So we can simply download this video
1:25
right here inside my machine as a local
1:28
MP4 file. You can see that.
1:32
So the length of the video is 6 seconds.
1:34
So from 8 second to 14 second total
1:37
length is 6 seconds. So it has
1:39
successfully trimmed and cut the video.
1:42
And we are actually using ffmpg web
1:44
assembly library. If you don't know
1:46
about uh this actually it allows you to
1:49
actually use ffmppg right in the browser
1:51
itself. And uh this is their official
1:54
website which allows you can read the
1:57
documentation and we are using the
2:00
latest version of angular. So angular is
2:03
a typescriptbased framework and a single
2:06
page web application framework to
2:10
run as NodeJS. So we are using this
2:12
technology angular and this is actually
2:14
the overall project if I show you uh if
2:18
you are interested in purchasing the
2:20
project guys you can go to the
2:21
description of the live stream the link
2:24
is given in the description of this live
2:25
stream and uh you can purchase it from
2:27
procordstore.com
2:29
before purchasing it on the product page
2:31
you will find the live demo link of my
2:34
website of this uh product you can
2:37
basically just see the live demo before
2:39
purchasing it this will be the project
2:41
that you will get. You need to choose
2:43
the file here. Whatever file that you
2:45
want to select and uh then you can
2:48
simply using these sliders you can
2:50
actually control which portion that you
2:53
want to
2:55
cut. So as you basically select your
2:57
starting duration and the ending
2:59
duration. Click on trim video. It will
3:01
do the process. It will trim the portion
3:04
7 to 16. So it comes out to be 9
3:06
seconds. [snorts] So it's really fast
3:08
guys. It doesn't require any desktop
3:10
software. It works in the browser. It's
3:12
blazingly fast. It is very efficient as
3:15
well. And it's a single page video
3:17
editor and primer using ffmpg web
3:20
assembly and we are using angular
3:23
framework for doing this. So coming back
3:25
to the code guys, if you go to the
3:27
package.json file, we are actually using
3:29
uh angular
3:32
16 version. It is compatible with all
3:34
the latest and the older versions as
3:36
well. So no need to worry about that if
3:38
it is it will it will be compatible or
3:41
not. It will be compatible with all the
3:43
versions. So we are using specifically
3:45
16 version. So [snorts] you will get the
3:47
zip file after you make the payment
3:49
guys. You will actually get the zip file
3:51
from Google drive automatically.
3:53
Whenever you make the payment and you
3:55
will actually get all this configuration
3:59
all the directory which will holding the
4:02
project source code you will get inside
4:04
that zip file. You just need to extract
4:06
it. After you extract it, uh you just
4:10
need to go to this folder which is this
4:12
folder dist folder. If you go to the if
4:15
I show you basically the application
4:17
structure. So we are actually having
4:20
this uh dist folder. If you see inside
4:24
the dist folder we have angular video
4:26
trimmer. Uh this is actually the express
4:29
server which is running right here to
4:31
actually load this angular application.
4:34
So we are actually starting our server
4:37
on localhost 3000. You can change this
4:39
port number as well. So we are actually
4:42
loading this angular application using
4:44
our express server. So you can see that.
4:46
So so now if you want to run this
4:49
application on your machine, you need to
4:51
go to the disc folder and simply go to
4:53
this folder and just type this command
4:55
which is nodeborn index.js. That's all.
4:58
So now this will start your server. You
5:01
will see this message server is
5:02
listening on port 3000. So you will
5:05
actually get this message and uh that's
5:09
all.
5:11
And coming back to the structure of the
5:13
code guys if you see this is our base
5:15
component app.component html. So
5:18
whatever that you see right here. So
5:21
this is our base component components
5:24
folder. There are three components
5:25
mainly. First is the slider. Then is the
5:29
video trimmer component which actually
5:31
does the main job for trimming the video
5:32
and video input for actually allowing
5:34
the user to uh select the files. So if
5:38
you reload the application there is this
5:40
uh uh component. If I reload this so
5:45
there is a choose file button right
5:46
here. So this choose file button is
5:48
coming right here. This input field
5:51
right here. If you see we have given
5:52
this reference of input ref. We have
5:55
given a class of it to input type is
5:57
file and this is actually the change
5:59
event handler. So whenever you the user
6:02
selects any file this event will fire
6:05
handle file change and we are passing
6:07
the event it only accept video file and
6:09
style display none.
6:13
So by default it will not be displayed
6:15
whenever you reload the application. So
6:17
you will see nothing selected. You just
6:20
need to choose the file first of all.
6:23
As you choose the file basically the
6:26
file will show. So there is a button
6:29
right here of choose button right here.
6:30
If you see that and then we have this
6:33
video. So here we are actually loading
6:34
the video. If you see the video is
6:36
displaying in this video player. So we
6:38
have this video tag ng if source. These
6:42
are all the angular classes we have
6:44
given. This is ng if selector attribute
6:47
width attribute height control source is
6:50
equal to source can play ng if this is
6:53
actually the video input component that
6:56
you see right here. This is this
6:57
component that you are seeing right
6:58
here.
7:00
After doing this we also write specific
7:04
CSS for all specific components. So this
7:07
is actual CSS file for that. And coming
7:09
to the typescript as you all know guys
7:12
angular applications are generally coded
7:14
in typescript which is a supererset of
7:16
javascript. So we have made this project
7:18
in typescript. So typescript involves uh
7:22
higher checks validations. So we are
7:25
inside this component we are taking the
7:27
width height source video load set video
7:30
duration set video all these variables
7:32
we are taking it. This is actually the
7:34
typescript code right here. Handle file
7:36
change. So this is all the thing. So
7:38
when we change the file here, we are
7:40
actually loading this file in the memory
7:42
so that we can process it using f ofmppg
7:44
web assembly library. This is actually
7:46
the typescript code. Coming back to the
7:49
slider code. Slider basically uh here
7:53
this involves this input field right
7:55
here. So this is a starting trimmer and
7:57
the ending trimmer. You can select the
7:59
duration
8:01
six and click on trim video. This is a
8:04
slider component is responsible for
8:06
having this input here. You can see
8:09
that. So whenever you change the value
8:12
of the slider, it this value is this
8:16
function is called here update value. So
8:18
whenever you change the slider value,
8:20
this value will automatically change. So
8:23
this value is responsible update value.
8:26
So inside the slider you have this
8:30
function right here which gets executed
8:32
whenever you change the slider right
8:34
here and this is actually the main
8:36
component which is video trimmer which
8:38
holds all the you can see that it's a
8:41
html and this is a CSS and this is the
8:44
typescript
8:46
code right here. So first of all
8:49
we are basically loading the fmpg web
8:52
assembly library. We are writing the
8:54
file here. We are fetching the file from
8:56
the memory and then we are running a
8:58
very simple command right here. We are
9:00
converting it to the seconds right here.
9:04
We are trimming this to the second
9:06
slide. This is actually the logic of the
9:07
code. We are not re-encoding the video.
9:10
That's why we are passing here - C copy.
9:14
So it basically speeds up the process.
9:17
It doesn't re-encode the video and
9:19
that's why it took very little time to
9:22
actually cut the video. So if you just
9:24
see here
9:26
it doesn't take a lot of time because we
9:29
are not re-encoding the video that's
9:31
why.
9:35
So trim video it doesn't take a lot of
9:38
time.
9:40
So this is actually the full project
9:43
guys you will get. It's very useful if
9:45
you are a beginner. If you are a college
9:48
going or schoolgoing student then it
9:50
will be a very good project to actually
9:51
show and also understand how fmpp is
9:55
used in modern web applications. How you
9:58
can make a very good video editor right
10:00
in the browser itself. It doesn't
10:02
require any third party website or to
10:04
edit your videos. You can directly
10:07
first of all before purchasing it you
10:09
can go to my website. It is successfully
10:11
deployed here. You can check here before
10:14
purchasing it. You can try out
10:17
and then if you are like it, you can
10:19
then purchase it. I will provide you
10:21
full support. If you have any sort of
10:23
errors after purchasing it, you can have
10:26
your my email address which is also
10:28
given on my website as well. So if you
10:32
interested the link is given and thank
10:35
you very much guys for watching this
10:36
video. Please hit that like button,
10:38
subscribe the channel as well and I will
10:40
be seeing you in the next live stream.