Up next in 10
I Built this Canva Clone Video Editor in Next.js Using FFMPEG WASM in Browser For Passive Income
Apr 1, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-this-canva-clone-video-editor-in-next-js-using-ffmpeg-wasm-in-browser-for-passive-income/
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'll show you a nextg
0:05
video editor that I developed inside the
0:07
browser for passive income to earning uh
0:10
passive income using advertisement so
0:12
this actually runs in the browser uh so
0:15
this we running it on locally here so
0:17
you can see this is actually a timeline
0:19
video editor using next CH we used next
0:23
CH for building this and it is using
0:25
fmpg web assembly so we have quite a
0:27
number of options right here you you see
0:30
we have an uh similar canva clone
0:33
timeline that canva has we have the live
0:37
preview where you will actually see your
0:38
videos being created and this is
0:40
actually the Side Bar where we have
0:42
different options so first of all you
0:45
can actually select any video that you
0:47
want to edit so let's suppose I actually
0:52
take a video
0:55
file you can basically see we can
0:58
actually take
1:01
uh just see the
1:03
videos you can add multiple videos here
1:06
if you want to merge
1:08
them it's very
1:15
easy there is this upload option you can
1:18
do that you can see you can add multiple
1:22
videos and you can see that so we can
1:24
add multiple videos here so there is a
1:27
plus icon right here if you want to add
1:29
to the timeline line so as soon as you
1:31
do this the video will be added and
1:34
you'll be able to control
1:36
it can see that
1:40
so so we can
1:43
actually play the video so if you
1:47
see so these are the elements being
1:50
added in the sidebar if you see that so
1:52
now we also have the
1:54
capability to add images so if you want
1:58
to add some images we can add images as
2:01
well
2:06
so if I want to add a image on top of
2:09
the video you can add
2:14
this you can add multiple
2:21
images so you can see
2:24
that and after this if you are
2:28
in you can even add text as well so if
2:32
you put the text here you will able to
2:34
add text as well just go to the location
2:41
here so you can see that
2:47
so we can change or we can even add a
2:51
fade in effect as well so different
2:54
kinds of effects animations you can add
2:56
right here you see that fade
2:58
out different you will
3:00
see this image here you will see all the
3:04
canvas is exported to
3:09
it and we can even change the color of
3:12
the text as well
3:17
so
3:18
uh just select the element and
3:25
then so there is also option of export
3:29
in as well so if you want to export this
3:32
video select this option and
3:36
Export click the option export position
3:40
the image here
3:41
accordingly and after this if you are
3:44
interested in exporting this we have a
3:46
download button right here it will
3:47
basically start the everything as a PNG
3:51
file so if you open this image here you
3:53
will see all so this is actually the
3:55
editor guys uh we can also let's suppose
3:58
we can change the camera color right
4:00
here and then if I want to add
4:06
images simply add the
4:09
image so here you can actually control
4:12
the timeline here and you can see in the
4:14
export here by default it will export to
4:16
30 second but we can change this to 10
4:18
second as
4:20
well now the timeline changes to 10
4:23
second and here you can control the
4:27
element how much time you want to show
4:39
can see that so if you want to add
4:41
multiple
4:48
images so here you can control using the
4:51
timeline
4:57
here just control it using the
5:00
Mouse you can even add text as I showed
5:10
you so here you can just create videos
5:13
similar to
5:17
canva you can just
5:20
create this is
5:37
so you can see that so it's very
5:41
easy so just control it using this nice
5:45
little timeline so if you now play the
5:48
video If you see
6:08
so you can export this only to 3 second
6:13
so if you see if you export this now
6:17
just select the format here it will
6:19
export the canvas to a video so it will
6:22
actually play the for three seconds and
6:24
then the video file will be downloaded
6:26
if you see that
6:34
so if you are interested guys the link
6:36
is given in the description this code
6:38
that is inside next year and we have
6:40
used fmpg web assembly library for
6:42
building this canva clone video editor
6:45
with timeline which runs entirely in the
6:46
browser so if you purchase it uh the
6:50
link is given proc Cod store.com website
6:53
after you purchase it you will actually
6:54
get the zip
6:57
file and uh this will be the directory
6:59
structure you will see each component is
7:01
coded inside typescript and it will be
7:04
very easy for you to modify or add
7:07
additional uh capabilities to this
7:10
project as well so it's entirely runs in
7:12
the browser similar to canva and uh you
7:15
can directly purchase this project the
7:17
link is given in the description if you
7:19
see all the source code it's easy to
7:21
read and easy to modify as well
7:24
so you can see that
7:27
so you can directly purchase it if I
7:30
show you package.json file we using fmpg
7:33
web assembly Library we are also using
7:35
fabricjs we are also using an namejs as
7:38
well you can see that so all these are
7:41
open source packages and it's compatible
7:44
with the latest version as well react
7:47
0 and if you see we are using
7:53
next so it's a fully timeline editor
7:57
guys you can select you can add fading
8:01
effect as well
8:04
so you can even add you can see nice
8:07
little fading effects just select the
8:09
element it can even add to image as well
8:13
just select the direction of the
8:15
animation duration you can even
8:17
put if you again do
8:23
that you can see that so you can
8:26
basically create awesome little videos
8:28
using this
8:30
uh can play with this after you purchase
8:32
it directly if you run runs in the
8:34
browser no server s side code is
8:36
involved so if you're interested guys
8:38
the link is given in the description
8:39
thank you very much for watching this
8:41
video and also check out my website free
8:44
mediat tools.com which contains
8:46
thousands of tools regarding audio video
8:48
and image and I will be seeing you in
8:51
the next video
#Flash-Based Entertainment
#Multimedia Software
#Clip Art & Animated GIFs
#Animated Films
#Video Sharing