live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Next.js FFMPEG Video Timeline Editor and WebRTC Video Recorder in Browser Using TypeScript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-next-js-ffmpeg-video-timeline-editor-and-webrtc-video-recorder-in-browser-using-typescript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:03
uh hello guys welcome to this uh live
0:05
stream so in this live stream I will
0:06
basically talk about a video timeline
0:10
editor and video recorder that I
0:12
developed inside
0:14
nextjs and if I reload the page here you
0:16
will basically see this is the actual
0:18
application that I developed in the
0:19
browser and it's a complete client side
0:22
application no server side code is
0:24
involved in it it is built inside next
0:26
CH as you basically open this
0:28
application this landing page will open
0:30
and there are two options right here
0:33
either you can basically edit a video by
0:36
selecting a video local video or
0:39
basically you can record your screen
0:40
record the video right inside the
0:42
browser and edit it first of all let me
0:45
show you the first option which allows
0:47
you to select any video that you
0:50
have so what I will do is that if I have
0:54
any video that I want to
0:58
edit I can basically go into
1:02
my video select the video you can
1:05
basically select any video MP4 Avi so if
1:09
I turn on the volume you will basically
1:11
see as I play the video it will
1:17
play uh hello
1:21
friend you can navigate to any section
1:23
in the video see that this is a line by
1:25
line
1:27
video we can play everything that we can
1:30
do right here and now if you want to
1:33
basically trim the
1:35
portion you can have this timeline
1:37
editor that you have you can basically
1:40
trim any portion and uh you will
1:42
basically see this is a starting
1:43
duration this is the ending
1:46
duration let's suppose I want to trim
1:49
this section from this video I want to
1:52
trim this portion so I will simply we
1:55
have various uh quality that you can
1:57
control if you are sending it with the
2:01
as a email this video 8 megabytes the
2:04
size will be for WhatsApp it will be 16
2:06
megabyte Discord 25 megabytes you can
2:09
even change the quality standard quality
2:11
high def definition quality and best
2:13
quality you can even create create
2:15
animated gif as well let me select best
2:18
quality and the audio quality as well
2:19
you can control the audio quality low
2:21
quality or you can even remove the audio
2:23
from it also all these options are
2:25
available and then click on start and
2:28
now guys you will basically use the fmpg
2:31
library it will execute the fmpg command
2:33
right here in the browser and it will
2:35
also show this progress bar and actually
2:38
it is using fmpg web assembly library in
2:41
next years to actually convert the video
2:43
actually trim that portion and once it
2:46
is completed it will reach 100% And you
2:48
you will be able to download the output
2:50
file so it's a complete web application
2:53
which is developed inside next chairs
2:55
and also it is using react shairs as
2:57
well jsx in types script we have used it
3:01
so if you need the full source code guys
3:03
full application the link is given in
3:05
the description of this live stream you
3:07
can directly purchase the full source
3:09
code from my website and after you
3:11
purchase it you will actually get a zip
3:13
file you just need to extract the
3:15
content of the zip file and you will
3:17
actually get the full project and you
3:19
can simply run it inside the browser
3:21
that I'm running it you will see Local
3:24
Host I'm running it in on Local Host
3:26
3000 you can even deploy this
3:28
application right here after you
3:30
purchase a domain name to any hosting so
3:34
once it reaches 100% so it totally
3:36
depends upon the length of the video so
3:40
if you have a large length then it will
3:42
take some time but it is just showing
3:45
you this nice little progress bar which
3:47
makes you which makes it easy for the
3:49
users to just see how much time is
3:51
remaining for the processing of the
3:53
video so it is you can see it is
3:55
actually also showing you the command
3:58
that it uses this fmpg command you can
4:01
simply copy this command as well if you
4:03
want to do it locally just open command
4:06
line right here I have I have fmpg
4:09
installed on my system you can even do
4:13
it locally as well it shows you the
4:14
command as well but for this application
4:17
you don't have to have fmpg installed
4:19
locally inside your system it is working
4:22
in the browser for the
4:25
specific project we are using fmpg web
4:28
assembly which which is a simple Library
4:31
which allows you to use fmpg right in
4:34
the browser not uh it is not restricted
4:37
that you should have fmbg installed
4:39
inside your command line it makes it
4:41
easy to use it inside the browser this
4:43
is actual GitHub repository of this
4:45
library that we are using it inside the
4:47
project to actually make this awesome
4:49
little application which is a video
4:51
timeline editor and video recorder as
4:53
well which allows you to edit your
4:56
videos right in the time uh browser no
4:58
need of extra video editing software you
5:01
can perform your video editing right
5:03
inside the browser so once it reaches
5:06
100% guys it will show you the download
5:08
option where you can simply download
5:10
your
5:14
file so if you're are basically watching
5:16
it for the very first time guys please
5:18
hit that like button subscribe the
5:19
channel as well and uh I basically make
5:22
these videos so you will not get the
5:25
notification as well if you put uh hit
5:27
that notification Bell icon so now you
5:30
can see 98% 99 and once it reaches 100%
5:35
it will now show a download but of the
5:37
video guys alongside
5:39
Theory so it will show you the live
5:41
preview of the video the video has been
5:43
trimmed and you can see the length of
5:45
the video is 55 second and you can play
5:48
this video in the video player it is
5:49
showing you the live preview and there
5:51
is three options right here you can
5:53
simply download the video as an video it
5:56
will now play the so you just need you
5:59
can see the video is successfully
6:01
trimmed we have selected the starting
6:03
and ending location and it is used fmpg
6:06
to make this process very easy and uh
6:09
now you can even select a different file
6:12
download the video or try different
6:14
parameters if you want to try out
6:16
different parameters let's suppose you
6:19
want to convert this
6:22
uh into a gif animation so what I will
6:26
say animated gif I will select and click
6:28
on start so what it will do guys it will
6:30
convert this into a gif animation you
6:34
will see now it has converted it to a
6:36
gif animation so GF is the file so if
6:40
you want to now open this you will see
6:43
it will run endlessly so as you know GIF
6:46
animations so we have basically created
6:50
a gif animation from a video file and
6:53
let's suppose you want
6:58
to control R the you can select any look
7:02
uh resolution here SD resolution
7:06
or it it is also showing you the 640 by
7:09
360 you can control it so 25 megabytes 8
7:13
megab bytes if you want to
7:15
start if you want to send this video by
7:25
email so all the options are supported
7:27
by it's a fully
7:30
timeline editor I will also show you the
7:32
code as well you will see now the it is
7:35
the size of the video it has been
7:36
compressed you will see only
7:39
263 kilobytes is the actual size of the
7:41
video if I try to open it you will send
7:44
this video in if you are sending a email
7:47
message then you can basically send this
7:49
video the size is very small so in this
7:51
way guys you can try out different
7:53
options from this drop down if you're
7:54
sending it through a WhatsApp Discord
7:57
and the nice thing about that guys you
7:58
can even change the aspect ratio let's
8:00
suppose you are uploading it to YouTube
8:02
the aspect ratio is 16 by9 let's suppose
8:05
you are uh uploading it to Instagram the
8:07
aspect ratio there was 9 9 by 16 the
8:10
reverse process you can even create
8:12
vertical videos you can edit this now
8:15
click just start it will now process it
8:18
will convert your video horizontal video
8:20
to Vertical video so that you can simply
8:22
upload these the platform to Snapchat
8:25
Instagram any those platforms support
8:28
vertical video not horizontal video this
8:31
is your vertical video which is ready
8:33
you can convert your horizontal video to
8:35
Vertical video from the software as well
8:37
the link is given in the description
8:39
guys you can directly purchase the
8:41
source code you will actually get a zip
8:43
file let me now show you the source code
8:45
to you basically guys this will be the
8:47
source code uh we have built this
8:49
project using fmpg web assembly library
8:52
and uh you will basically see these are
8:54
the set of libraries which are there
8:56
fmpg core.js fmpg core web assembly fmpg
9:00
core worker. JS so let me also show you
9:04
this of this software also allows you to
9:07
record your video right in the browser
9:09
itself so there is a second option right
9:11
here which allows you to record your
9:13
video right here in the browser so if I
9:15
click this button a popup window will
9:17
appear and here it is asking which
9:19
screen you want to record so let's
9:21
suppose you can also record a particular
9:23
window or you can record a particular
9:26
screen let's suppose if you want to
9:29
record entire screen you will simply
9:31
select entire screen and it is also uh
9:34
have the option to record system audio I
9:38
will toggle on this option click on
9:40
share and now you your screen is
9:43
recording so whatever I'm speaking
9:45
through microphone is also being
9:47
recorded I can go to any screen and you
9:50
can see that it is been
9:52
recorded So In This Way guys all your
9:55
screen is being recorded So as I simp
9:59
simply click on this option which is uh
10:02
stop sharing or use recording so as I
10:05
click this option your video has been
10:14
created so you will basically see now
10:17
you will be able to edit this
10:24
file so if you want to trim any portion
10:27
here you can basically trim the portion
10:35
or you can basically you can see that
10:37
click on start you can trim the portion
10:39
or you can convert this to animated gif
10:42
all these options are supported you can
10:45
record your own video like
10:48
this it's a very simple process it has a
10:51
option to actually record the screen and
10:54
it will actually record the screen if
10:57
you want to have system audio let's
10:59
suppose a song is playing or if you want
11:01
to record that audio as well it will not
11:03
record the microphone volume that's a
11:06
feature I'm not added till yet but uh if
11:10
you purchase the source code you will
11:11
get notifications after new features
11:14
that I will add that feature I will add
11:16
in the future to actually record the
11:19
microphone volume as well but at this
11:21
moment of time I don't have that support
11:23
for that but if you have some system
11:25
audio then you can simply record that
11:28
this software will actually record that
11:31
so you can navigate to any screen right
11:34
here and this will actually record
11:36
everything and now to use this recording
11:39
click simply click use recorder it will
11:41
simply stop the recording and now you
11:43
can just change the aspect ratio 4x3 3x
11:47
4 9x 16 all that
11:50
stuff and click on uh best quality if
11:54
you want to upload this to
11:57
YouTube click CLI on start so this will
12:01
actually convert this video to mp4 file
12:03
so that you can upload this video to
12:05
YouTube so it's a simple video recorder
12:07
as well and video timeline editor both
12:10
these options are being uh contained in
12:13
a single software that you will get guys
12:15
if you purchase it the link is given in
12:17
the description you can purchase it from
12:19
my e-commerce website and you will
12:21
actually get the source code in a zip
12:23
file after you purchase it from Google
12:25
Drive and once it reaches 100% it will
12:28
have the option to actually save the
12:31
video as a mp4 file so now you can see
12:33
the video has been successfully
12:35
processed using fmpg and now you have
12:37
three buttons to actually save the video
12:40
inside your machine as a mp4 file so
12:43
this supports every extension I'm just
12:46
showing MP4 it supports Avi all the mov
12:49
all the video extensions types most
12:52
famous is MP4 that's why I'm showing you
12:55
but it supports all extensions so you
12:57
can try out on your own machine and
13:00
uh so it works in next CH if I show you
13:03
the dependencies guys basically if I go
13:06
to the package.json file you will Al see
13:09
that we are using fmpg core Library we
13:12
are uh using the next JS so next CH 13
13:16
we are using and it is compatible with
13:19
the latest version if you have a latest
13:20
version it will work the software will
13:23
work with the latest version as well
13:26
react it is using react 18 it is using
13:29
react 18 so it's a very awesome software
13:32
guys that I developed if you are
13:33
interested the link is given in the
13:36
description where it's a video timeline
13:38
editor it has two options for editing
13:42
your videos using a timeline editor or
13:44
you can record your video so I've shown
13:46
you all the uh demo of both these
13:51
tools uh Hello friends today in
13:54
this you can see that this is actual
13:57
timeline which makes it very much easy
13:59
to actually trim or cut the videos right
14:02
in the
14:04
browser here you can
14:06
basically control the quality you can
14:09
change the xpect ratio as well you can
14:12
basically control this everything so
14:14
it's a very good software in my scenario
14:18
you can also use Mouse as well guys if
14:23
you want to crop your video you
14:25
basically it will crop your video
14:27
Whatever portion you want to see you can
14:29
actually crop it using the mouse you can
14:31
see that you can also control it like
14:34
this also guys so whatever portion that
14:36
you want inside the video you can even
14:38
control this using the mouse as well if
14:40
you don't like the aspect ratio 9 by 16
14:43
you can even control this like this also
14:45
you can have a free hand like this
14:47
inside the video using the mouse you can
14:50
basically control like this using the
14:52
mouse so whatever portion that you want
14:55
to crop in the video it's a video
14:58
Cropper as well you can with the help of
15:00
the mouse you can basically control
15:02
which portion you want to crop in the
15:04
video you can simply select that portion
15:06
let's suppose I want this portion to be
15:08
cropped so what I will do simply click
15:10
on
15:13
start so I will basically crop this
15:18
portion and start so basically what will
15:21
happen it will split the video it will
15:24
also crop the video and it will also
15:26
change the aspect ratio at the same time
15:28
so it's
15:30
is doing multiple things at a single
15:32
time and uh now you will basically see
15:35
country code so this is for successfully
15:37
cropped the video the location that we
15:41
selected only it is only like having
15:43
that location and now the video
15:46
successfully
15:47
cropped got plus one and you will not
15:51
see a better video editor guys on whole
15:55
YouTube than this one so don't waste
15:57
your time and purchase the source code
16:00
you will basically get a lot of
16:01
knowledge how I developed this editor
16:03
from scratch in next shars and react
16:06
shars you can also have the full
16:08
commercial rights after you purchase
16:10
this software and you can use it inside
16:13
your own website upload this and also
16:15
earn money as well because many users
16:17
will come to your website to actually
16:19
edit videos it's it saves a lot of time
16:21
because they don't want to download
16:23
third party softwares or use desktop
16:26
softwares so it makes basically
16:29
makes the things far more easier so for
16:33
performing these kinds of enhancements
16:35
or video editing skills so many of times
16:39
videos are the norm in the in this eror
16:42
many users are uploading videos so
16:45
that's why video
16:47
editors uh are the you can see all these
16:52
options are available to you you can
16:55
control the cropping section you can
16:57
trim the video
17:00
so this is the software guys if you are
17:02
interested the link is given in the
17:04
description and uh I will be seeing you
17:06
guys in the next video Until then thank
17:08
you very much
#Fun & Trivia
#Flash-Based Entertainment
#Movies
#Online Video
#Software
#Multimedia Software
#Photo & Video Sharing
#Animated Films
#Video Sharing