Up next in 10
Build a React.js Timeline Video Trimmer Editor in Browser Using FFMPEG WASM & Fabric.js Using TS
Apr 1, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-timeline-video-trimmer-editor-in-browser-using-ffmpeg-wasm-fabric-js-using-ts/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a reaous
0:05
video timeline trimmer uh editor that I
0:08
developed in browser using fmpg web
0:10
assembly library and fabric JS you can
0:13
see I'm running this project on Local
0:15
Host
0:16
3,000 and uh now there is option here to
0:21
actually select a video file this can be
0:23
of any extension MP4 Avi mov Avi so I
0:29
will just select my my actual video and
0:32
as soon as you select your video you
0:33
will see this guys this timeline will
0:36
occur this is actually your play button
0:38
here you can play the file and then we
0:40
have also the download button if you see
0:43
and we basically get this nice little
0:45
timeline where we can actually control
0:48
whichever portion that we want in the
0:50
video to trim to cut the video so which
0:54
we have the starting time here the
0:55
ending time and we basically have this
0:58
timeline here so now you can see as I'm
1:00
changing the starting duration of the
1:02
timeline the starting time is changing
1:04
and similarly we got the ending time
1:07
timeline as well so here as you can see
1:11
we let me just show you so we we can
1:15
actually control whichever portion that
1:17
we want to trim out so as soon as you
1:21
change it you will see the starting and
1:22
the ending duration will
1:24
change can see that so now if I want to
1:28
trim this portion here
1:30
I have this trim button available so as
1:33
soon as I trim the click this button
1:36
fmpg web assembly will execute and it
1:39
will actually trim out this video which
1:41
is this 1 minute 1 second and now you'll
1:44
be able to download the trim video you
1:46
can see that the video has been
1:48
downloaded so this is
1:52
actually uh the thing guys you can
1:56
actually you can actually play the video
1:59
the downloaded video video a trim video
2:01
the image so this is the project guys if
2:06
you are interested in this project uh I
2:09
have given the link in the description
2:11
of this video uh you will get a full
2:14
source code after you make the payment
2:16
on my website proot store.com so this
2:19
project if I show you the package.json
2:21
file it's developed using fmpg web
2:24
assembly
2:25
library and we have also used this
2:28
fabricjs which is a Javas script open
2:30
source animation library and we have you
2:33
can see we have using the latest version
2:35
of react which is react 18 if you don't
2:38
know about fmpg web assembly Library
2:41
guys it's actually runs in the browser
2:43
it lets fmpg runs in the browser by
2:46
default fmpg is a command line library
2:49
but this Library makes it possible to
2:52
use it in the browser using the CDN and
2:55
also we are using this uh Library fabric
2:58
JS which is a Javas script animation
3:00
Library canvas library right here so we
3:03
are also using this Library as well to
3:05
actually construct this timeline that
3:07
you see right here to actually trim the
3:10
video so this will be a good project
3:12
guys you will get to know about how I
3:14
use these two open source packages to
3:16
build out a very practical project and
3:19
you will get the zip file after you
3:21
extract the zip file you will get this
3:23
directory structure you will see each
3:25
component is coded inside uh
3:28
typescript and and uh you can see the
3:31
full source code so you will if you are
3:33
a developer you will a you will also be
3:35
able to edit or add additional
3:37
functionalities to this project so it's
3:40
coded inside react and if you see the
3:42
back end here you can see we are using
3:44
this fmpg web assembly Library we are
3:47
loading it from the CDN and then we are
3:49
actually executing the command right
3:52
here this is I think
3:57
fmpg and if you see we are executing
4:00
this Command right here for uh trimming
4:03
out the video using the starting
4:05
duration and the ending duration so this
4:08
is actually your project guys uh in
4:10
react CH coded inside typescript each
4:13
component and if you want to now run
4:15
this application locally you will open
4:17
your terminal and the very first command
4:19
you will execute is npmi so this will
4:22
actually install all the nodejs modules
4:25
and will actually create this node
4:27
modules folder right here and after that
4:29
that you just need to say npm Run start
4:32
so this will start your application at
4:34
this local development environment Local
4:36
Host 3,000 so as you can see we are
4:39
running this application Local Host
4:41
3,000 and as you load the application
4:43
you just need to select a video
4:45
file and then
4:48
automatically just trim out the portion
4:50
of the video that we want it's very fast
4:53
lightweight and the main thing is that
4:56
it doesn't require any server site code
4:58
it runs entirely in the browser as you
5:00
click trim the fmpg command will execute
5:02
in the browser and you will be able to
5:04
trim your videos and uh you can see that
5:08
so it's very easy to deploy as well if
5:10
you check the package.json file there is
5:12
a command which you can simply execute
5:15
npm run built so this will actually if
5:20
you want to deploy this onto your domain
5:22
name it's very
5:24
simple just delete
5:27
this this is the main command
5:33
uh react strips build so if you just say
5:40
npm so this will build build out your
5:43
application and just create this disc
5:45
directory in the left hand side and you
5:48
can see build directory and you will be
5:51
able to uh deploy this application very
5:54
simply it's a single page application in
5:56
react CH video
5:58
trimmer timeline you can see it
6:00
construct the timeline here of a
6:02
particular video and from this you will
6:04
be able to trim your video so if you are
6:07
interested guys the link is given in the
6:08
description you can directly purchase it
6:10
from my website procore.com and thank
6:14
you very much guys for watching this
6:15
video and also check out my website
6:18
freem mediat tools.com which contains
6:20
thousands of tools regarding audio video
6:22
and image and I will be seeing you in
6:24
the next video
#Online Media
#Multimedia Software
#Clip Art & Animated GIFs
#Other