live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a FFMPEG Canva Clone Video & Image Editor in Browser Using Fabric.js & GIF.js in Javascript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-ffmpeg-timeline-video-editor-in-browser-using-fabric-js-gifencoder-js-in-javascript/
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 basically uh designed
0:05
this uh video editor and uh it's
0:09
Advanced image and video based editor
0:11
with timeline you can call it as canva
0:14
canva as you know it's a very famous
0:16
website which allows you to do image and
0:19
video editing inside their website so
0:21
it's a browser based application guys
0:23
and it it is making use of fmpg and
0:26
various libraries in the background and
0:28
uh it is also using fabricjs and
0:32
namejs a lot of libraries are installed
0:34
in making this complex application it's
0:36
entirely coded in a JavaScript HTML and
0:38
CSS so no server site code is involved
0:41
right here it entirely works in the
0:42
browser and this is actual interface so
0:45
first of all let me walk you through the
0:47
actual uh application this is actual
0:50
timeline that you see with live preview
0:52
this is my canvas this is actual
0:54
timeline that you see we can basically
0:55
play the video and then we can export
0:58
the video to actually web video we can
1:01
export it to a animated gif file or we
1:04
can also export this to a static image
1:06
so if you're doing image editing so so
1:09
let's suppose if I want to change the
1:11
background color we can open this Color
1:13
Picker and then we can change the color
1:15
background color of the canvas whichever
1:18
color that you need to say you can
1:20
basically select whichever color let me
1:22
select this color and also in the canvas
1:25
settings we do have this duration
1:27
property if I set it to 8 second we can
1:30
this is this value is in second and you
1:33
will see the duration of the canvas will
1:36
now be 8
1:38
second so then we can also manipulate
1:42
the size of the width we can control it
1:44
by this value if you want 100 by you can
1:48
see that so automatically it changes
1:50
live preview is there so whichever
1:53
design that you are designing a logo
1:55
image actually you're doing a gift you
1:59
are animating
2:00
the videos you want to edit your images
2:04
all you can do it in a single tool let's
2:06
suppose we have various presets
2:08
available as well if you're designing it
2:10
for particular social networks let's
2:12
suppose you're doing it for YouTube so
2:15
16 by 9 so this is actual aspect ratio
2:18
for this 9 by 16 will be for
2:21
Instagram vertical video and 9 by6 this
2:25
is and 4x3 all these p rate mode you can
2:30
see you will select 12 1280720 which is
2:34
for the YouTube thumbnail if you're
2:36
designing
2:37
it these are the different controls you
2:40
can zoom out zoom in and also drag your
2:44
canvas by this hand hand tool redo
2:47
operation undo operations are also
2:49
available if you want to clear out
2:51
everything there is this clear button
2:52
you can clear out everything and it will
2:54
reset to the default mode and then we
2:58
can automatically Ally
3:01
change like this and now I will actually
3:05
show you to how to add a text here so if
3:08
you just want to add some text in the
3:09
canvas you can add this like this very
3:12
thin you can add this
3:26
uh so this text we have added guys and
3:30
now you can see we can control
3:32
everything here alignment
3:35
properties and uh you can see you can
3:38
control
3:41
everything if you want to align it in
3:43
the left Direction
3:45
center right so then we can basically
3:49
have properties italic you can underline
3:52
the text like
3:56
this we can also have various phones
3:59
available for us so if you want to
4:01
select the phones so the link is given
4:04
guys if you need this application I you
4:06
can purchase the full source code the
4:07
link is given in the description so it's
4:09
a very special piece of software that I
4:12
developed so if you are interested the
4:14
link is given in the description after
4:16
that you will actually get the zip file
4:18
guys the code is entirely written in
4:20
JavaScript HTML CSS you will get the zip
4:22
file after that you need to extract the
4:24
content of the zip file you will get
4:26
this directory structure and you just
4:28
need to install it on from any web
4:30
server that you are uploading your
4:32
website and this application will work
4:35
if you need some doubt regarding you can
4:37
contact me at my email address so you
4:40
can also control the opacity of the text
4:42
as well you can see that letter spacing
4:44
as well control it everything is
4:47
customizable guys so you can change the
4:50
color of the text color of the text
4:53
right here control
4:56
it I think my favorite color combination
4:59
is
5:00
black background and black background
5:04
looks cool and
5:07
uh and basically you can now also have a
5:11
shadow as well you can provide a
5:14
shadow to the
5:20
text if you want to have a border you
5:24
can also provide a
5:26
border change the color so this will
5:30
also provide the border to the text like
5:34
this I think it's not looking good I'm
5:36
not good at designing guys so just bear
5:39
with me I'm very terrible in designing
5:42
so I don't design my thumbnails of the
5:44
video so that's why you can see the fact
5:48
here and here this is actual position
5:50
that you see it automatically updates
5:52
that you see position X Y the width
5:55
height you can also rotate your thing at
5:58
a various angle
6:04
45° this is layer based thing guys so
6:07
you see this is a single layer which is
6:09
available and If you see uh it appears
6:12
for 4 seconds this is the actual thing
6:15
right here now if you want to export
6:17
this to a uh video file click on this
6:20
button download it will render your
6:22
video uh using fmpg and in the browser
6:26
and you can open this video right here
6:28
so this video will play right here it's
6:31
a webm video and it will play it so it
6:35
will work for 4 seconds and then it will
6:37
go
6:38
away animated gifts as well click on
6:40
start and it will basically render this
6:43
as an animated gift file and uh then
6:46
automatically it will download as a gif
6:47
file right
6:50
here you can also download as a static
6:53
image PNG jpg webp so let's suppose I
6:57
want to download as jpg image so similar
7:00
to canva guys canva also provide the
7:02
same functionalities with timeline video
7:05
editor this is one text right here you
7:08
can add multiple text images uh as well
7:11
so these are different templates which
7:13
are pre-built right here you can also
7:15
have my template save it inside import
7:17
export everything you can do and you can
7:19
upload your own media as well and uh
7:21
let's suppose I want
7:23
to import some images from my file
7:27
system so I can simply import this image
7:30
just drag it and you will see that the
7:32
image will drag right
7:34
here and this is has its own timeline
7:37
that you see in the image and we can
7:40
resize the text to just fit fit right
7:48
here can resize the image right
7:55
here so there is also this animated text
7:59
of also available guys let's suppose uh
8:02
right here you can just filter with the
8:05
brightness contrast level you can edit
8:08
this image accordingly saturation
8:11
Vibrance all these things you can
8:13
control there is filters are also
8:15
available gray scale Seria black and
8:18
white every retr
8:20
field
8:21
vintage SO Inver so all these filters
8:25
pre-made available guys you can try out
8:27
and you can also crop your image select
8:30
any portion that you want
8:36
to so there is this crop option
8:39
available to you you can crop any any
8:41
portion that you
8:45
want click to crop so now your image is
8:48
cropped you will see that so there is
8:51
also the support for cropping the image
8:53
as well so after you do this you can
8:55
place your image right
8:57
here let's suppose I want to appear the
9:00
image later so I can just adjust the
9:03
timeline so
9:05
now the image will appear
9:10
later now you can see the image is
9:12
appearing
9:15
later you can just download as a video
9:19
and it totally depends upon your
9:21
designing part guys I'm not good at
9:23
designing so I can't design a good good
9:25
thumbnail but you can see the power of
9:26
this software you can ultimately design
9:29
an any video text anything you can
9:31
design using this
9:34
software this is a very awesome
9:36
application and you can see that the
9:39
image appears right after the text same
9:42
goes with the you can control the
9:44
quality you can 1 to
9:47
256
9:52
so and a gif as you all know guys it
9:55
Loops through for ultimate number of
9:57
times it will Loop through so it will
10:00
repeat un uh it will repeat this GIF
10:03
animation totally depends upon your
10:05
length so if you want to download as a
10:07
static image you can also download this
10:09
as a PNG
10:11
image uh for that to appear uh I think
10:14
we do need to put for the image to
10:20
appear you can design ultimate fun
10:22
little thumbnails using this software
10:24
you can see that it's a complete canva
10:27
clone guys so if you
10:29
need this the link is given you can
10:31
directly purchase it and there is also
10:34
one little cool little stuff sh shapes
10:36
are also there you can have your shapes
10:39
different kinds of shapes that you can
10:40
have to design the thumbnail if you want
10:43
to do like this and then you can change
10:47
the color of
10:48
this so shapes basically makes the
10:51
thumbnail far more very
10:53
easy you can have customizable shapes
10:56
available so you can put emojis as well
11:01
these emojis makes the thumbnail far
11:03
more easy and uh you can control the
11:06
colors right here
11:09
and these thumbnails are also there we
11:12
have support for if you see it is coming
11:15
through pixabay texels all these third
11:17
party websites providing
11:20
free stock photos so these photographs
11:24
are copyright free so you can safely use
11:26
these photographs and it's coming from
11:28
pixabay pixels API and uh you can ENT
11:32
just search for here inside search bar
11:35
if you want to have laptop images it
11:37
will search for you laptop you can see
11:40
that orientations you can say colors
11:44
black and white categories you can
11:46
select which categories you want images
11:48
to appear and it will show show you to
11:51
you so photos are provided by pixa
11:54
pexels all these things same goes with
11:57
videos you can also have stock footage
11:59
available for you which is provided by
12:01
pixabay and pexels these are all coming
12:03
through the pexels and pixabay API and
12:07
you can also upload your own audio file
12:09
as well guys for this video you can have
12:11
this option right here or you can use
12:13
the test audio files available for us
12:15
which is pixabay you can also use these
12:18
audios copy copyright
12:20
free and you can also generate QR code
12:23
as well like this you can embed this QR
12:26
code inside your video files or uh
12:29
thumbnail files as well if you want to
12:31
design your thumbnail as a QR code you
12:34
can also do it as well so can download
12:37
this as a p image file your QR code so
12:41
when somebody scans this QR code it will
12:43
directly go to this URL so you can
12:45
basically control
12:51
whichever so right
12:57
here so you can put here whichever
13:01
URL you can go https google.com so you
13:05
can put your own website it can have
13:08
rounded can add put a label as well
13:11
label color you can change
13:19
it so this is the thing guys and
13:25
uh this is a full editor demo that I
13:28
showed you guys guys uh now let me put
13:31
uh you can see all these objects are
13:33
there you can hide this and then design
13:36
it with
13:37
freedom you can also have light mode
13:40
this is uh dark mode light mode all
13:43
these things are there the link is given
13:45
guys you can directly purchase it the
13:47
source code is given and they can
13:49
directly basically launch the live
13:51
server after you get this index. HTML
13:53
file you can simply open this with live
13:55
server in vs code you can directly have
13:57
this application
13:59
and uh you can save this work by going
14:02
to this
14:05
uh uh you can save your work uh in the
14:10
templates you can basically save this
14:12
work just save it so now your template
14:15
is successfully saved right here so
14:18
anytime if you want to design from where
14:21
you left you can go to the my template
14:24
section and just you can import that
14:29
template or you can export this as a
14:30
Json file so anytime let's suppose
14:33
you've lost your work if you're opening
14:36
it in a new
14:37
window new incognito
14:40
window so here your templates are not
14:44
there so what in this case what you will
14:55
do so right here if you see
14:59
go to my templates and just import your
15:02
Json file that you saved so now you can
15:05
see all your work is now there because
15:07
we just imported my template so in this
15:10
way guys you can import your export your
15:13
templates using this method it's very
15:16
good method so now let me show you the
15:18
actual code guys and we are actually
15:21
using if you see in the JavaScript we
15:23
are actually using fabricjs jQuery
15:26
plugins and uh these are things a custom
15:29
thing here you can see that we are using
15:32
pixel's API key and pixabay which is
15:35
actually returning do photographs making
15:38
a simple get request to actually fetch
15:41
those stock footage stock photos and uh
15:45
it is doing its process so it's a full
15:48
application guys you will get the
15:50
documentation CSS everything if you
15:52
still face some doubt you can contact me
15:54
at my email address I will provide you
15:56
with full assistance support and uh this
15:59
is the actual application so if you are
16:00
interested guys the link is given please
16:02
hit that like button subscribe the
16:04
channel and I will be seeing you guys in
16:06
the next video Until then thank you very
16:09
much
#Flash-Based Entertainment
#Online Media
#Online Video
#Multimedia Software
#Online Goodies
#Clip Art & Animated GIFs
#Skins, Themes & Wallpapers
#Animated Films
#Scripting Languages