videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a Next.js Video Timeline Editor to Trim Videos in Browser Using FFMPEG WASM in Javascript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-next-js-video-timeline-editor-to-trim-videos-in-browser-using-ffmpeg-wasm-in-javascript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:03
uh hello guys welcome to this live
0:05
stream so in this live stream I will
0:07
basically show you a video trimmer kind
0:10
of application that I developed so it's
0:12
a timeline uh video editor which allows
0:15
you to actually cut or trim your videos
0:18
all video types are supported MP4 Avi
0:22
any extension and you can see right here
0:25
this is actually the interface of the
0:26
application it is developed inside the
0:28
nextg which is a full stack framework
0:32
for building web applications and uh we
0:35
are actually using fmpg web assembly
0:38
Library it's a fully flesh timeline
0:40
editor you can basically see right here
0:42
you can control the starting duration
0:45
and the ending duration whichever video
0:48
duration you want to trim out so you
0:51
need to first of all select the video
0:52
and it will construct this timeline for
0:54
you and you can simply select whichever
0:57
part of the video you need to cut or
0:59
trim
1:00
so after you select that simply click
1:03
this button and it will automatically do
1:05
the trimming for you and it will
1:06
actually show the output video in the
1:08
video player and you can basically see
1:10
this is the output video which we be
1:11
playing which is 1 minute 36 second this
1:14
is your output video we also give a
1:16
download button to the user so that user
1:19
can easily download the video output
1:20
video if you click this button your
1:23
video will get downloaded you will see
1:25
the video is downloaded as an attachment
1:27
so you now you can play the video react
1:30
this project guys easy guys so now you
1:33
can see the output video is playing so
1:35
it's a very uh simple but yet powerful
1:38
application you don't need any third
1:40
party video editor it is built inside
1:42
browser if you just reload this it's
1:45
fully client site no server s no server
1:48
s side code is involved and if you just
1:51
select your uh video basically you need
1:54
to go to your whichever video you want
1:57
to select you basically will go to the
2:02
video whichever video you want to
2:07
select so I will basically select this
2:10
video which is you can see MP4 video is
2:12
there and it is 4 minute 40 second at 34
2:16
megabytes so you will basically select
2:19
this video and as you select this video
2:21
it will basically con construct the
2:23
thumbnails using the fmpg web assembly
2:27
library and it will actually construct
2:29
this nice little timeline that you can
2:31
see right on top of the screen right
2:33
here and
2:35
uh here you can control whichever
2:38
portion that you want to cut or trim by
2:40
using this mouse so the input video you
2:43
can even to actually so the video is
2:46
playing you can just see the video right
2:49
here this is the input
2:51
video and it basically constructed this
2:55
uh portion here so whichever part you
2:58
want to trim out let's suppose I want to
3:00
trim from the starting of the video till
3:02
only 30 second 33 second if I basically
3:05
click on the trim button you will
3:07
basically see it will cut the first 33
3:10
second of the video and uh this now the
3:13
output video is so it is the trim
3:16
portion is 33 second long and we also
3:18
provided a download button and which
3:21
will
3:22
actually uh hello guys output video so
3:25
you will basically
3:26
see it's a nice little timeline guys
3:30
which allows you to do this process for
3:37
you and uh if you need the full source
3:39
code guys of this application and you
3:42
can basically uh purchase it the link is
3:44
given in the description of the this
3:46
live stream you can go to the link on my
3:48
website and purchase the full source
3:50
code you will get a zip file after you
3:52
purchase it something like this from
3:54
Google Drive automatically after the
3:55
payment is done you will be redirected
3:57
to Google Drive where you can actually
3:59
download the zip file and after you
4:01
extract the zip file this will be the
4:03
directory structure you will see all the
4:04
JavaScript code will be there which is
4:07
if I show you the package.json file we
4:09
are actually using fmpg web assembly
4:11
Library we are using the latest version
4:13
of next CHS and react CHS which is 18
4:16
and 14 at the time of recording this
4:18
live stream it is compatible with all
4:20
the oldest older version as older
4:22
version as well these are the different
4:24
components which are there output video
4:26
range input and video file picker these
4:28
are the three components involved this
4:30
is actually the server site code where
4:33
we are actually using the command in
4:35
order to process the thumbnails and also
4:37
trimming the portion which you
4:40
select you can see that so this is
4:43
actually the timeline you can select any
4:45
portion right here in the video Let's
4:47
suppose I want to trim this portion
4:50
from starting from 56 second of the
4:54
video till 3 minute 30 39 second click
4:57
on this button again guys with live
5:00
preview you can just see how fast it is
5:03
it is not taking a lot of time it is
5:05
just taking one or two second in order
5:07
to trim that portion that you select in
5:09
the timeline so it basically reduce the
5:11
process of using third party video
5:14
editors or website you can directly do
5:16
this uh in the browser it doesn't
5:18
require internet connection it is a
5:20
fully client side offline application it
5:23
works right directly in the browser you
5:25
just need to select the video file and
5:27
then adjust the timeline which portion
5:30
you need to trim out and it will
5:31
actually trim then we have the and it
5:33
will show the output video right without
5:36
page refresh it's a single page
5:38
application and it is built inside next
5:40
CHS it doesn't after you click on the
5:42
trim portion it directly shows the
5:44
output right here it doesn't do page
5:47
refresh it's very fast have the canvas
5:51
very very effective it is actually
5:53
trimming the portion whichever portion
5:55
that you
5:56
select it is very fast effective you can
5:59
see that so the download button is
6:01
directly there you can even download the
6:03
output file Target this
6:07
div that you see right here
6:09
guys so this is a single page
6:12
application you can after purchasing it
6:14
guys you will get full commercial rights
6:15
you can modify the code and actually
6:17
resell it as well it's a very good
6:20
application and let me show you the
6:22
libraries that we actually using first
6:24
of all we are actually using next CH if
6:26
you don't know what next CH it's an open
6:28
source web development framework and
6:31
it's a super set of react and you should
6:34
know react before you basically do next
6:37
sh we using this and it can be used for
6:41
building both front end and backend
6:43
application and then we are using fmpg
6:46
which is a open-source audio video
6:48
processing Library uh by default it's a
6:51
command line Library you should have
6:53
fmpg installed on your machine but for
6:55
this application we are actually using
6:57
fmpg right in the browser itself for
7:00
doing this we are actually using fmpg
7:03
web assembly Library this is the GitHub
7:05
repo so it allows you to run fmpg
7:08
commands directly in the
7:10
browser because we are doing the video
7:12
trimming part right here so whatever we
7:15
are editing this this video so in the
7:18
background we are actually using fmpg
7:21
commands if I show you basically the
7:23
code right here you can see we are
7:25
running this command by using the run
7:27
method which is available inside uh fmpg
7:30
web assembly Library we are providing
7:32
the starting second which is the start
7:34
time and we are providing the input file
7:36
name and then we are actually providing
7:38
the ending time and then we are copying
7:40
the encoding settings and this is your
7:42
output video file which is there so this
7:46
fmpg web assembly Library it's a very
7:49
powerful library for running fmpg
7:52
commands directly in the browser you
7:54
don't need to have fmpg installed on
7:56
your local machine you can directly use
7:58
this application right in the browser
8:00
and actually edit your videos trim any
8:03
portion of your video directly in the
8:05
browser using this nice little timeline
8:08
that you can see right here you can
8:09
control the mouse control with the help
8:12
of mouse you can basically trim any
8:14
portion and automatically with live
8:17
preview it will actually show the output
8:19
video to you so if you are interested
8:21
guys the link is given in the
8:22
description of this live stream you can
8:24
directly purchase the full source code
8:26
after purchasing you will actually get a
8:27
zip file and now if you want to run this
8:31
application let me show you basically
8:34
after you do this simply run npm run Dev
8:38
this will actually start this next year
8:40
server guys which is it is running on
8:42
Local Host 3000 it will actually compile
8:45
your application and it will start this
8:47
application you will see Local Host
8:49
3,000 you can see that now you can
8:53
actually select your input file and it
8:56
will now select it pro process your
9:00
thumbnails it will construct the
9:01
timeline for you and
9:05
then so there is no restriction guys you
9:09
can basically take
9:11
uh there is no restriction on the length
9:14
of the
9:15
video there is no such kind of
9:17
restriction you can upload 1 GB of video
9:20
2 GB of video but you just need to wait
9:23
for longer videos so just make sure if
9:25
you have a longer video such as 5 GB
9:28
10gb then it takes some time depending
9:30
upon the length of the video so in
9:32
certain cases it may take about 15 to 20
9:35
seconds so just wait on the browser it
9:37
will actually construct the timeline
9:38
something like this and then you can
9:40
basically
9:42
control select you can move this
9:45
timeline so you can basically see ta
9:48
should be there the video is
9:52
playing you can control the timeline
9:54
click on trim selected it will trim this
9:56
video so uh if you have a very long
9:58
video so just wait for the process to
10:01
finish and then you can do your process
10:04
so this is this application and if you
10:07
now want to build this application the
10:09
build command is very simple uh npm run
10:12
build so this will build out this
10:13
application if you want to deploy this
10:15
application on a real domain name if you
10:17
wanted to deploy this to production then
10:19
you will run this command which is npm
10:21
run build so now coming back to the code
10:24
guys I already showed you that it
10:26
contains three components which is for
10:28
responsible for for showing output video
10:30
range input where we actually select the
10:32
timeline to actually select the starting
10:34
time and the ending time thirdly if you
10:37
want to pick up your input video file
10:39
this is the component responsible for
10:41
that so we have this code where we are
10:45
actually running F MPG web
10:48
assembly so this is a full project guys
10:51
you will see that CSS code JavaScript
10:53
code all this code is there if you are
10:55
interested this is really good code guys
10:58
uh good project if you are developing
11:00
your resume if you're applying for a
11:02
company if you want to show a project to
11:04
your
11:05
company higher it can be a great project
11:08
you can basically get a job by using
11:10
this and also you can study this code
11:13
after you purchase it you can directly
11:14
see how which concept I used to actually
11:17
make this application and you can modify
11:20
this code to actually develop some more
11:24
features on top of it so it's it can be
11:27
a good basing point on your knowledge of
11:29
using fmpg web assembly in the browser
11:32
to actually build this awesome
11:34
application of video trimming and video
11:36
cutter right inside your browser if
11:38
you're watching it for the very first
11:40
time then please hit that like button
11:41
subscribe the channel as well and thank
11:43
you very much guys for watching this
11:45
live stream if you are interested the
11:47
link is given directly you can purchase
11:48
it you will actually get a zip file and
11:51
thank you very much for watching this
11:52
video and I will be seeing you in the
11:55
next live stream
#Multimedia Software
#Clip Art & Animated GIFs
#Video Sharing