live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Next.js FFMPEG WASM Unlimited Image,Video & Audio Converter in Browser Using TypeScript
Jan 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-ffmpeg-wasm-unlimited-imagevideo-audio-converter-in-browser-using-typescript/
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
this video I will actually show you the
0:01
live demo of my actual tool website that
0:05
I developed so this is actually a fmpg
0:08
web assembly unlimited uh video audio
0:11
and image converter so it's a drag and
0:15
drop tool so here you will drag and drop
0:17
your image file video file or audio file
0:20
and you can convert from one format to
0:22
another so if you visit free media
0:23
tools.com and I
0:26
actually just added this tool fmpg video
0:30
image and audio converter if you go to
0:32
this it is live here in this
0:35
address so you can visit this URL and
0:39
just try this so this is drag and drop
0:41
feature and it is developed inside next
0:44
CH latest version of next CH and you
0:46
will select any PNG JPG file any image
0:50
type you can select so this file will be
0:52
selected you will see that now there is
0:54
this drop- down interface out there you
0:56
can convert this PNG image it also shows
0:59
you the size of this image which is 394
1:02
kilobyte and here you can select all
1:04
these formats jpg PNG BMP Ico icon so
1:09
you can select any of these webp format
1:12
let's suppose I want to convert so if I
1:14
have the convert Now button if I click
1:16
this you will see nice little animation
1:18
will take place and it will show you
1:19
this notification that the process is
1:21
done now you can download them and if
1:25
you open this you will see it will open
1:26
it inside the browser it's a webp file
1:30
and the nice thing about that it's a
1:32
unlimited converter so there is no
1:34
restriction on the size of the file and
1:36
you can even upload multiple images at
1:38
one time as well so if you have a lot of
1:40
images that you want to convert so what
1:43
you can do you can select multiple
1:45
images so you will see I'm selecting
1:47
these all these images you will see at
1:51
one time you can just convert you can
1:54
select format here so let's suppose if
1:57
you want to convert this to PNG this one
2:00
to SVG or this one to jpg this one to
2:04
Icon file this one
2:06
to so you can see that you can just
2:09
process bulk images at once multiple
2:12
images you can select different formats
2:14
if you want to convert them so like
2:22
this so now we have the convert Now
2:24
button so bulk processing will take
2:26
place so once it finishes it actually it
2:29
will show you like this done button one
2:31
by one so it will show you it will just
2:33
do one by one processing so once it
2:38
finishes it will show you this
2:39
notification that all these things are
2:41
done you can individually download one
2:43
image at a one time or if you want to
2:46
download you will see that the image
2:48
will open you will see that so you if
2:50
you want to download all them all images
2:53
at once you can simply download them you
2:56
can see that so now one by one all these
2:59
images will will get downloaded you will
3:01
see that you can check out these
3:03
images this is a webp image so it will
3:06
open it in the browser so all these
3:08
images have been successfully converted
3:10
so bulk processing is supported by this
3:12
tool so it is actually coded inside the
3:16
next JS guys you will see are actually
3:18
using
3:19
14.04 version react 18 so this is
3:23
actually the overall project if you are
3:25
interested in purchasing this full
3:27
project with full source code and
3:28
documentation the link is given in the
3:30
description you can go to my website
3:32
procore.com where you will actually get
3:34
the checkout page where you can actually
3:37
make the payment and after the payment
3:38
you will actually get the codes from
3:41
Google Drive you will actually get this
3:42
ZIP file from Google Drive after you
3:45
make the payment on Pro Cod store.com
3:47
and alongside the checkout page you will
3:49
also find the live demo link so before
3:51
purchasing please do try this tool on
3:55
this website so that you can just try
3:57
the live demo before purchasing it and
4:00
now you can even upload audio files as
4:02
well so it's MP3 file you can convert
4:05
this to any format wave format double
4:08
ACG you will see that convert now so the
4:11
conversion is completed now you can open
4:13
that if you want to convert a video file
4:16
let's suppose so you will upload your
4:18
mp4 file so these are all the converts
4:21
converter out there for the video MP4
4:23
m4v so all these converters H you will
4:26
see that webm format MKV so you will see
4:30
if I select uh MKV click convert now so
4:34
the video is converting from MP4 to MKV
4:37
so it totally depends upon the size of
4:39
the video so which format you're
4:41
converting to so it is basically run by
4:43
fmpg in the browser using fmpg web
4:46
assembly Library so it does it does take
4:50
take some time because it is doing this
4:52
processing in the browser so if your
4:56
file is really large in that case it
4:58
will take some time
5:00
but the process will take place so you
5:03
can just uh start the process and you
5:06
can do your own thing and when it
5:08
completes it will give you the
5:09
notification and then you can download
5:11
your file
5:14
so you can see that the processing is
5:17
going on let me take a different example
5:20
let's
5:21
suppose if you want to convert this into
5:24
this format
5:29
so it totally depends upon the size of
5:31
the video you can also try that as well
5:34
alongside your browser as well so let me
5:37
just try out to actually convert this
5:39
into a audio file
5:43
MP3 you will see the fmpg web assembly
5:47
Library you'll see found MP3 found so it
5:49
is running it in the
5:52
browser so it takes time to complete for
5:56
the video especially for the video
5:58
images and audio work really fast but it
6:01
when it comes to video files fmpg does
6:03
take a lot of time so you can try out
6:06
inside your browser as well so I just
6:10
want to show you in this video all the
6:11
features of this software so it does
6:14
complete but it depends upon the size of
6:17
the video so you will see we coded
6:19
inside next chair this is a layout file
6:22
if you see we given the title
6:23
description so if you want to deploy
6:26
this website you will actually run this
6:28
command you can see we are running
6:29
locally if I open Here Local Host
6:33
3000 let me just open it locally because
6:37
uh we are running it locally
6:42
on if I open this you will see the same
6:44
application will open locally on Local
6:47
Host 3000
7:02
so the command is very simple npm runev
7:05
this will actually start your
7:06
development server on Local Host 3000 so
7:10
once you purchase it you will actually
7:11
get a zip file you need to extract the
7:13
content and after you extract the
7:16
content simply first of all uh install
7:20
the node modules npmi and then start the
7:22
project by npm run Dev this will
7:25
actually start your development
7:28
server so so Local Host
7:31
3,000 so if you also check
7:35
uh this is a main page. file you will
7:39
see that this is a drop zone file where
7:42
you drag and drop so it is coded inside
7:45
typescript this is all the components
7:47
which are involved button select so you
7:49
can see that toaster so these are all
7:53
the functions we are loading the fmpg
7:56
library by the CDN if you see fmpg web
7:58
assembly Library
8:00
if you don't know fmpg it's a uh open
8:04
source audio video processing Library so
8:07
it's a command line library but fmpg web
8:10
assembly make sure that it runs in the
8:12
browser itself
8:21
so so if you
8:25
see so it completes you will see that
8:30
so you
8:36
can convert your video to MP3 it also
8:39
completes you will see the video is so
8:43
converted to MP3 file so you can
8:46
download the MP3 file you will see that
8:48
it has been downloaded so if you want to
8:52
convert the video file you will select
8:53
video so if you want to convert into 3gp
8:59
so for the videos I already told you it
9:02
will take some time depending upon the
9:04
length of the video so but it does
9:07
complete you can check out before
9:09
purchasing it at the checkout page I
9:10
have given the link on my website where
9:12
you can actually try this tool online
9:15
free mediat tools.com and here I have
9:18
actually added this tool fmpg video so
9:22
this is actually the tool right
9:24
here and if I show you you can see now
9:28
it's completed it will you can download
9:30
your video file you will see that so it
9:33
takes some time but it's a very
9:34
effective tool and you will see that we
9:36
are loading the fmpg core Library fmpg
9:39
web assembly Library so it's a good
9:42
starting point if you are a student if
9:44
you are applying for a job it's a good
9:45
little project that you can uh study on
9:49
how to actually use fmpg web assembly
9:52
library in an actual next chair project
9:54
it's a real life project which you will
9:57
make after you purchase the you will be
10:00
getting to learn a lot by actually
10:02
implementing it inside the next JS
10:04
application so step by step I actually
10:07
coded this project you will see full
10:09
documentation is written alongside with
10:11
each line of code so you will get to
10:13
understand and if I show you the
10:15
package.json we have used these
10:17
dependencies which is react dialogue
10:20
you'll see
10:21
that these are the dependencies I have
10:23
used and for The Styling I have used
10:25
Tailwind CSS you see Tailwind CSS and
10:28
external CSS framework for styling your
10:31
user interfaces so we used Tailwind CSS
10:34
so if you don't know about fmpg web
10:37
assembly it's a tool which lets you let
10:40
developers use fmpg in the browser this
10:43
is their official website you can read
10:44
the
10:45
documentation so really good library for
10:50
building these two little websites so if
10:54
you're interested guys the link is given
10:56
you can directly purchase it and
10:59
thank you very much for watching this
11:01
video and I will be seeing you in the
11:03
next one
#Software
#Multimedia Software