Up next in 10
Build a Next.js FFMPEG WASM JPG,PNG & Webp Image Converter and Compressor in Browser Using JS
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-next-js-ffmpeg-wasm-jpgpng-webp-image-converter-and-compressor-in-browser-using-javascript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:03
uh hello guys welcome to this video so
0:06
in this video I will talk about a
0:08
nextjs fmpg web assembly image converter
0:12
project that I developed inside the
0:14
browser so you can basically see this is
0:16
the actual live demo of the project and
0:19
here we have this interface out there
0:21
where we will click to actually select
0:23
an image right here so you can actually
0:26
select a image
0:27
here let's suppose I selecting in any
0:30
image that I want to select
0:33
uh uh I will go into my documents
0:37
directory let me select this image you
0:40
will basically see this is the actual
0:42
image which is format it will show you
0:46
jpg and the size 0.29 megabytes and
0:50
there is a drop down right here where
0:52
you can basically select to any format
0:56
jpeg PNG GF webp if I select PNG you
1:01
will see I'll as soon as I select this
1:05
in real time it will convert this image
1:07
and it will also show the size as well
1:10
so now the size is 1.81 megabytes so it
1:14
has uh using fmpg basically it enhances
1:19
the image and that's why the size of the
1:22
image is increased from 0.29 megabytes
1:24
to 1.18 megabytes so it automatically
1:27
detects the image guys how is the
1:30
quality of the image and automatically
1:32
enhances the quality and that's why the
1:34
size is longer now there is a download
1:36
button also available you can click the
1:38
download button and download the image
1:39
so it's a very good tool-based website
1:41
that I developed in nextjs guys which
1:43
allows you to actually convert your
1:45
images from one format to another you
1:48
can even convert this into webp format
1:50
as well you will see webp format is a
1:52
very special format which is used
1:53
specifically in uh Internet it's a new
1:56
format and it basically size of these
1:59
webp images are very low that's why if
2:01
you see it has been reduced from 0.29
2:04
mbytes to 0.09 mbyt so 30 31% of
2:09
reduction so it is also a image
2:11
compressor as well as well as MH
2:13
converter it basically transports the
2:16
images size and basically it converts
2:18
into a flexible size in case of webp
2:22
format so it reduces the size of the
2:25
image intelligently using fmpg web
2:27
assembly we are using it in the browser
2:30
it's a total client side application no
2:31
server side code is involved it's using
2:33
next CH which is actually
2:37
a we are using next chairs framework and
2:40
this is actual code for building this
2:42
application if you need this source code
2:43
guys the link is given in the
2:44
description of the video you can
2:45
directly purchase it after you purchase
2:47
it you will get a zip file which will
2:50
actually contain this directory
2:52
structure you will get the full source
2:54
code and basically you will get a zip
2:56
file you need to extract the content and
2:59
this will be the directory structure so
3:00
after you make the payment you will be
3:02
able to download the source code from
3:04
Google Drive and I you can see we are
3:06
running this application on Local Host
3:08
3000 on my development server and in my
3:11
command line if you see we are basically
3:15
running this npm run Dev so it is
3:18
running it on Local Host 3000 you can
3:20
see that the development server it is
3:22
running so just refresh it you will see
3:26
that this application will launch here
3:27
so you just need to select and any image
3:31
so it will tell you the size of the
3:33
image format and then you can select you
3:36
can even convert this to GIF format as
3:38
well
3:39
so webp format instantly the application
3:43
is really fast guys because as you know
3:45
that nextjs applications are ultimately
3:47
single page applications are ultimately
3:49
effective very good for SEO purpose as
3:52
well you can deploy this application on
3:54
your own website and earn a lot of money
3:56
as well so it's a image converter and
3:57
compressor which enhances your images
3:59
size and also it reduces the image size
4:02
as well depending upon it automatically
4:04
detects the size of the images And
4:06
depending upon that it reduces the size
4:08
or you can see we've basically converted
4:11
this 0.110 megabyte has been reduced to
4:16
0.07 so you can simply download
4:20
so it's a good uh tool guys and I will
4:25
basically show you which dependencies we
4:27
have used here we have actually used f
4:29
MPG web assembly this is actual package
4:33
that we used guys for building this so
4:35
it's a browser based uh library for fmpg
4:40
you can directly execute fmpg right here
4:42
in the browser without having to
4:43
installing it in the command line you
4:45
can directly use it in
4:47
the uh browser to actually make these
4:50
awesome little applications so
5:02
so this is you can see sample jpg it is
5:06
10 megabytes let me select this file and
5:09
show to you if I go to the downloads
5:11
directory click on this uh sample
5:15
jpg now this file will load guys you can
5:17
see the size of this file is 10
5:19
megabytes format is jpg now if you want
5:22
to reduce to webp format it will now
5:25
convert to webp please wait because the
5:27
image size is large you just need to to
5:29
wait for the conversion to take place
5:31
and after it converts it will reduce the
5:33
size of this image
5:36
to very less size so large size images
5:40
take a lot of time guys so it's a client
5:43
side application so you need to wait for
5:45
the conversion to finish and uh it is
5:48
using fmpg which is actually uh
5:52
converting
5:54
this you can open this
5:57
image in a new tab as well uh the size
6:04
basically so it is using this fmpg web
6:07
web assembly
6:11
Library uh sometimes it can uh if you
6:15
basically have a very large image then
6:17
it can hang uh let me put a 5 megabytes
6:21
image let's suppose webp
6:25
format I think these images are very
6:29
speci special images I think which is
6:31
just need to try out uh this application
6:35
this works with you can see that it it
6:37
took some time because the size of the
6:40
image was very large so 5 megabytes so
6:43
typically images are not that much of
6:45
size but if you have such images you can
6:48
simply use this tool the limit is
6:49
endless uh there is no such limit of
6:52
size in this application you just need
6:54
to wait for the conversion to finish
6:57
just depending upon the size of the that
6:59
you are uploading so you can see it has
7:01
reduced the size of the image from 5
7:04
megabytes to right here 43 kiloby 43 KB
7:08
so
7:09
8% if you want to download now only for
7:13
39 kilobyte you will see the quality of
7:15
the image Remains the Same and yet we
7:18
basically reduce the size of the image
7:20
from drastically 90% reduction in size
7:23
so if I open this webp file right here
7:25
in the browser you looks at it looks
7:28
very same no reduction in the quality
7:30
yet we basically uh use this tool to
7:33
actually compress the images as well so
7:35
it's a very good compression tool image
7:37
to webp format tool you can switch to
7:40
any format PNG give any format but just
7:44
want to wait for the conversion to
7:47
finish depending upon the size of the
7:48
image you are uploading so now we will
7:50
simply code guys so now you can see p
7:54
PNG image are png's images are greater
7:58
in size as compared to jpg images so it
8:00
has uh enhanced its image even more and
8:04
increased the size to 30 megab so
8:06
depending upon the format it
8:07
automatically detects whether to reduce
8:09
or whether to enhance
8:12
so in this way you can even select jpeg
8:16
format as well so you will see again it
8:18
reduced from 5 megabytes to this is 476
8:23
kilobyte if you open now the same image
8:26
this is the same image which has been
8:28
reduced so you can simply deploy this
8:31
tool guys on your own website if you are
8:33
liking the content please hit that like
8:35
button subscribe the channel as well now
8:37
let me show you how I build this
8:38
application so this is actual directory
8:41
structure we have different components
8:42
out there file picker for picking up the
8:45
file input image preview for live
8:47
previewing the image input image output
8:49
image for showing the output image and
8:51
output image format select for basically
8:53
selecting whichever format you need to
8:55
convert the image tool so these are the
8:57
four components client side component
8:59
components of our nextjs application and
9:02
this is our server site component which
9:04
is index.js where we are actually
9:06
processing the image using fmpg web
9:09
assembly Library you can see we are
9:11
actually importing all these modules at
9:12
the very top and now what I will do is
9:15
that I will simply uh code this
9:18
application just for your Clarity I will
9:21
simply
9:24
uh delete some things right here and
9:28
just show you how it
9:32
works
9:34
so so the very first thing guys we are
9:36
doing we are basically declaring uh we
9:40
are invoking create fmpg which is a web
9:42
assembly and here we are providing the
9:44
core path so core path is coming from
9:47
the CDN that we are loading which is
9:50
unpackage website un package.com and
9:54
basically it contains the CDN which
9:56
contains the web assembly library that
9:58
we are using us for building this
10:00
project so this is the URL here you can
10:03
even access this
10:10
URL
10:15
so this is a CDN which is accessible in
10:19
the browser as well there is additional
10:21
property of log you can provide it to
10:23
True depending upon whether you want to
10:25
see the log or not then we are
10:28
asynchronously Lo loading this by using
10:30
this function asynchronous function and
10:33
we are simply loading this FFF it
10:35
contains the load function and here we
10:37
are simply loading this and calling this
10:41
function automatically this function
10:42
will automatically load and basically as
10:45
you launch your application it will
10:47
compile
10:50
this you can see the application has
10:53
been compiled successfully so after you
10:56
do this uh
10:59
now we need to basically declare the
11:01
state whatever data that we will be
11:04
having so this will be first of all
11:06
input image and the set input image and
11:10
here we are basically using the U State
11:12
hook which is
11:13
empty this is storing the reference of
11:16
the input image that the user will
11:18
select so current value will be null and
11:21
after that we will have the transcoded
11:24
image data so this data will be the base
11:27
64 data guys with the help of this we
11:30
will be reading the file in the browser
11:32
without storing it in a database so we
11:35
will simply be converting this into base
11:38
64 data so the current value will be an
11:41
empty object US state if you see after
11:45
that we will have whatever format the
11:47
users select set format again this value
11:50
will be
11:52
empty and then whatever URL that we get
11:56
for the output image this also will be
12:00
empty or null when we launch the
12:04
application so this will be the output
12:05
URL output base 64 URL that we will
12:08
display for the output image after
12:10
processing the image using web assembly
12:12
library of fmpg and loading if you want
12:16
to show the loading progress bar you can
12:18
even show that as well initial value
12:20
will be of false we don't want to show
12:22
the progress bar whenever we launch the
12:24
application so this will be false so
12:26
these are all the state variables we
12:28
will be using us for this application
12:30
the input image transcoded base 64 image
12:33
data the format of the image the output
12:36
URL and the loading progress barile so
12:39
these are all the states for the
12:42
application nextjs application so now
12:45
guys in the HTML if you see we have this
12:49
input image that we are displaying right
12:51
here and
12:53
uh we are
12:55
basically
12:58
for for handling the change this is a
13:01
file picker that we embeded so basically
13:04
whenever you pick the file from the file
13:07
picker this function will execute handle
13:09
change so whenever the file changes this
13:11
function will execute handle change so
13:13
now we will write this function which is
13:15
handle change so handle change and Asing
13:19
this will be a Asing function and uh
13:22
right here we will get access to the
13:24
file by e. target. files e parameter
13:28
will be passed as an argument
13:29
automatically to this function so we
13:32
will simply set the input image to the
13:34
actual file that is and set the URL this
13:38
will be a wait as this async function so
13:41
I created a helper class which will
13:43
actually read this data as base 64 so we
13:47
are simply setting the URL right here
13:49
you can see that base 64
13:51
URL and uh we will simply do this after
13:55
this we will use also write the function
13:59
which will be executed automatically
14:01
whenever the user will change the format
14:04
from PNG jpg GIF or webp whichever
14:07
format the user select this value will
14:09
be captured
14:15
automatically this function will
14:17
automatically capture this value and now
14:19
we will compare this value which the
14:22
user selects so now if the value matches
14:26
the
14:26
format then return
14:33
so format basically represents here the
14:36
initial value of format is nothing so we
14:39
are simply checking that if the format
14:41
is no format is selected then we don't
14:43
want to process this image if one format
14:46
is selected then we just need to set the
14:48
format first of all to that format to
14:50
the
14:51
value and then we will call this
14:53
function
14:54
transcoded transcode
15:00
uh TR code image and
15:07
uh this function we will create
15:11
guys transcode
15:14
image we will pass the input image and
15:17
the
15:20
value so we need to create this IM
15:26
transcode image
15:30
input image and the actual value this
15:33
function is responsible guys this will
15:36
be a asnc function just make it
15:45
async we will pass the input image on
15:48
the actual format which is selected by
15:49
the
15:51
user this will be Arrow
15:54
function so you'll first of all set the
15:57
loading to True from false to true we
15:59
need to show the progress part and then
16:02
we will simply say if the fmpg is loaded
16:06
this function will execute if if it is
16:09
loaded then in that case we need to load
16:11
this
16:12
so we'll put a not sign right here so we
16:15
will simply compare if the fmpg library
16:18
is not loaded then we will load that
16:20
Library by calling this load function
16:22
after it is loaded successfully we will
16:25
basically use the file system module to
16:26
actually write the file
16:30
which is it is using the web assembly
16:34
library of fmpg it contains this right
16:37
file we will basically write this in the
16:39
memory input image. name await and we
16:44
will basically fetch
16:46
file and uh this one we will pass the
16:49
input
16:51
image and now now in the TR catch
16:54
block we will now process the image
16:59
so if any sort of error take place we
17:01
can simply console
17:06
login so in this uh function
17:10
guys we will basically convert that
17:13
image to that specific format which is
17:15
FFF run and uh Dash I for the dash input
17:20
and then input image do name and then we
17:23
will basically pass the format whichever
17:26
format that you want to convert so in
17:28
back text symbol we will simply write
17:30
image do Dot and actual
17:34
format
17:36
so now we'll convert this to
17:39
blob so data.
17:46
buffer and uh this one type will be of
17:51
uh image/ whatever is the format either
17:54
you select jpg PNG whatever is the
17:57
format
18:04
like this so we are basically creating a
18:06
new blob object passing the data first
18:09
of all as a first argument and the
18:10
second will be the type M
18:13
type and then it basically creates the
18:16
data
18:19
URI and uh we will basically read this
18:22
as base64 pass it as block and then we
18:25
will say set transcoded image data to
18:30
this will be set
18:33
to the new image size which will be
18:37
blob. size original image
18:43
size which is input image size it it get
18:47
access to all these things si in this is
18:50
the beauty of this library and the new
18:53
image
18:55
source which is data URI so we we set
18:59
this and now we just need to delete that
19:02
file so for deleting the file there is
19:05
file
19:06
system
19:08
fs and we will simply use this function
19:11
unlink to actually delete that input
19:18
file that's all and also here finally we
19:22
will have a finally as well to actually
19:24
hide the progress bar set loading to
19:26
true sorry false
19:29
we we've put true here and we put false
19:32
here that's
19:34
all this is all the code which is there
19:37
in the main next year server rest of the
19:41
project has all these components so the
19:43
link is given in the description if you
19:45
are interested you can directly purchase
19:46
it after you do this you will be able to
19:50
if you see uh it is saying that create
19:52
fmpg is not a
19:57
function uh sorry I think I made a
19:59
mistake it's a
20:01
very uh
20:05
s it's a very complicated project guys
20:08
sometimes it can create some error as
20:10
well so just
20:19
wait you can now see so if you now
20:21
select any file uh
20:30
it will show you the size
20:37
format
20:40
uh I think some kind of error is taking
20:43
place uh
20:46
I okay it is saying data is not defined
20:50
right here if you see uh we use the data
20:53
attribute right here it is showing this
20:55
data is not defined this data is not
20:59
defined let me see guys what error I
21:01
made it is better to test out this
21:05
application uh data is not
21:12
defined sorry I call this as data sorry
21:16
this needs
21:21
to okay okay
21:26
const input image FF r-i input image.
21:31
name format cons
21:34
data okay I forgot this line you need to
21:38
read the file sorry read the file just
21:41
after this line you need to paste this
21:43
line so it will you will read the file
21:45
first of all and the data will come
21:48
right here and then we will pass this
21:49
data data. buffer so now if you refresh
21:53
now before you will basically read the
21:56
file uh select our
22:00
format and now the file will be
22:02
converted and you will see uh whichever
22:06
format 31%
22:09
reduction you can click download the
22:11
file will be downloaded so this is the
22:13
overall project in next CH if you are
22:15
interested the link is given guys you
22:17
can directly purchase it from my website
22:19
and you will get this full source code
22:21
and you it's a very nice project you
22:23
will be able to learn something in fpg
22:25
web assembly which you can do it to uh
22:29
make these awesome little applications
22:31
please hit that like button subscribe
22:33
the channel as well and I will be seeing
22:35
you in the next video
#Flash-Based Entertainment
#Programming
#Multimedia Software
#Clip Art & Animated GIFs
#Photo & Video Sharing
#Photo & Image Sharing
#Other