Up next in 10
Build a Next.js FFMPEG Canva Clone Video Timeline Editor & Recorder in Browser Using TypeScript
Dec 3, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-ffmpeg-canva-clone-video-timeline-editor-recorder-in-browser-using-typescript/
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 live
0:02
stream. So in this live stream, I will
0:04
show you a NexJS Canva clone video
0:07
timeline editor that I built directly in
0:09
the browser. So this basically lets you
0:12
edit your videos directly the browser.
0:15
It's built in nextJS. I'm running this
0:17
locally. As you can see, this is the
0:19
full project here. Let me show you. This
0:21
is a full directory structure. I've
0:23
given the source code in the description
0:25
of the video. You can directly purchase
0:27
the full source code. So once you
0:29
purchase it, you will get this full
0:31
directory structure from Google drive
0:33
automatically. It's built inside
0:34
Typescript and for building this we have
0:37
used FMPPG web assembly library. So all
0:40
these files are coded inside Typescript.
0:42
So I'm just running this locally here.
0:44
I'm running this npm rendev and this has
0:47
started this project on localhost 4,000.
0:51
So I basically open this URL here and
0:54
this is the actual interface. So now it
0:57
lets you cut and trim your videos
1:00
directly in browser. This is the
1:01
interface. So here you will select your
1:04
MP4 video file. You can have select any
1:07
sort of extension.
1:09
So once you select your video,
1:13
your video will be basically be created
1:16
inside the timeline.
1:17
Hello guys. Uh hello guys.
1:20
So this is the actual timeline that it
1:22
will create for you. Nice little
1:24
timeline. So using this Canva clone kind
1:28
of a video editor, you'll be able to
1:30
trim and cut your videos whichever
1:32
portion that you want to and right here
1:35
at the bottom side it is selecting the
1:38
starting duration. This is the ending
1:40
duration and how much you want to cut.
1:43
So I just want to cut these 19 19
1:45
seconds. So using this timeline I can
1:47
easily cut the specific portion of the
1:50
video and then I can play this tool and
1:53
you can see. So now we have some options
1:56
here on the right hand side. We can
1:58
change the quality of the video.
2:01
So now let's suppose you're compressing
2:03
the size of the video. You can even do
2:05
that as well. Inside this select
2:07
drop-down for various social media
2:09
networks. You can change the quality of
2:12
the video. Best quality, HD resolution,
2:14
HD, 8 MB file size, email, WhatsApp,
2:18
Discord. So based upon I selected best
2:21
quality here. And also you can remove
2:24
the audio from the video as well by
2:25
selecting no audio and you can even
2:28
change the quality as well. So I will
2:29
stick to the high quality and then I
2:32
will click the start button. So now the
2:34
processing will happen directly in the
2:36
browser. So this is a single page
2:38
application. It's using ffmpg directly
2:40
in the browser. So no serverside code is
2:42
involved. It is directly executing this
2:46
inside the browser. So once it reaches
2:48
100% your output video file will be
2:50
created and this will save you a lot of
2:53
time because no longer you don't need to
2:55
use the Canva clone video editor rather
2:57
than you can use this application. It
3:00
will save you a lot of time and
3:02
basically all the processing is
3:04
happening directly in the browser. You
3:06
can see it is processing your video
3:10
second by second and once it reaches
3:12
100% the processing will be completed
3:14
and you will be seeing the output file
3:16
and then you can download this and you
3:19
can basically purchase this overall
3:21
project guys. We are using NextJS as you
3:24
can see. We are also using FMPG web
3:26
assembly library.
3:29
We using the next
3:32
the latest versions here. And this is a
3:34
complete project. Once you purchase it,
3:36
it will automatically get downloaded
3:38
from Google drive and uh it is basically
3:42
we are using this library. If you don't
3:44
know ffmpg is a very famous library
3:48
but it is a command line library. So
3:51
ffmpg web assembly allow you to execute
3:54
the same library directly in the
3:55
browser. So we are using this ffmpg web
3:59
assembly library using nextjs and
4:02
directly processing.
4:04
So now the output file is ready. Now you
4:07
can click the download button. Click the
4:09
save button and directly this is the
4:12
output file that it has created. So it
4:15
automatically trimmed and cut the
4:16
purchased this tool and you can see
4:19
video is
4:20
first of all if you like it. So I
4:23
basically created this tool from
4:24
scratch. So it's a very fantastic tool
4:27
if you want to do some kind of video
4:29
cutting operation trimming operation
4:31
with a timeline.
4:33
And it also have the second feature as
4:35
well. You can even record your video
4:38
screen recording. Click the record
4:39
screen button and then select entire
4:42
screen or any sort of specific screen.
4:44
Click on if you also want to capture the
4:47
system audio you can even toggle this
4:49
option.
4:51
And now it is actually
4:53
uh recording your audio file whatever
4:56
you are uh speaking you are going to any
4:59
menu and click on use recording. After
5:02
that it will convert your recording and
5:05
now you can play the recording here. So
5:07
whatever you recorded you can actually
5:12
click the start button. So it will
5:14
actually process everything
5:16
and once it reaches 100% you can even
5:19
download this as well. So it's an
5:21
ultimate Canva clone video editor with
5:24
timeline. If you are interested in this
5:27
guys uh the link is given in the
5:29
description definitely purchase it. So
5:31
here we can actually
5:34
select any sort of video file and after
5:37
selecting that this will construct a
5:40
nice little timeline where you can
5:42
actually
5:44
trim whatever portion that you want to.
5:46
So if you're interested in this the link
5:48
is given in the description.