0:00
video I will show you I built out a next
0:02
year's uh Canva clone video timeline
0:05
editor by which you can actually trim
0:07
and cut your videos directly in the
0:09
browser. So this is the actual demo we
0:12
are running this project locally at
0:14
localhost 3000. This is the actual
0:16
interface. So here you will select your
0:18
video file that needs to be edited.
0:21
So after you select your video file it
0:24
will construct the timeline. It will
0:26
also render the video inside the canvas.
0:30
So this timeline will makes it easy for
0:32
you to trim the specific part of the
0:34
video. So this is the actual timeline
0:36
that it has created for you. And now you
0:39
can easily select the portion that you
0:41
want to delete by using this timeline.
0:44
So you can just see here this is the
0:47
time period is shown at the bottom side
0:49
as you are moving the timeline. So now
0:51
let's suppose I want to cut this
0:53
portion. I can simply click the trim
0:56
button and automatically using FMPG web
0:59
assembly library cuts the video directly
1:01
in the browser and this is your output
1:06
which is constructed. Now you can click
1:08
the download button to download the
1:11
output video file which is
1:15
so this is a complete project. Click the
1:17
buy button inside nextJS. If you are
1:20
interested in this you can directly
1:23
purchase it. I've given the link in the
1:25
description of the video. So once you
1:27
purchase it automatically from Google
1:29
drive, you will be able to download the
1:31
source code. So we are using ffmpg web
1:34
assembly library as you can see. We are
1:36
also using nextjs next the latest
1:42
and this is the full directory
1:44
structure. Each component is coded
1:46
inside typescript. So once you get the
1:48
source code you will able you will be
1:50
able to modify the source code or add
1:52
additional features on top of it this
1:54
project. It's a fantastic project. I
1:57
created this from scratch. Each and
1:59
every file is coded inside Typescript as
2:02
you can see that. So it's really easy to
2:04
run this locally. We running this as you
2:07
can see. Simply need to type the command
2:10
npm rundev. So this will start this at
2:13
the local development server.
2:18
So right here you basically select your
2:22
input video file. The size can be
2:28
So as you select the video file it will
2:31
construct the timeline. So through that
2:34
timeline you will be able to delete or
2:38
trim the video. Likewise select.
2:42
So as you're moving it in the timeline
2:44
you can see that how easy it is
2:49
after you select it click the trim
2:51
button and using FMPG it will instantly
2:55
trim your video directly in the browser.
2:58
It's a single page application no
2:59
backend is there. It's a single page
3:04
inside NexJS. It's very easy to you to
3:07
deploy as well once you purchase it.
3:09
It's doesn't have a back end. It's
3:12
running entirely in the browser. All the
3:15
processing is taking place directly in
3:17
the browser. And if you don't know, we
3:19
are using this library fmpg web assembly
3:23
So this is allow you to use ffmppg
3:26
directly in the browser. It's a web
3:31
So we are using this. So if you're
3:33
interested guys, the link is given. You
3:35
can directly purchase it.
