Build React Video Compressor to Change Bitrate & Quality in Browser Using FFMPEG WASM in TypeScript
Jun 20, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-react-video-compressor-to-change-bitrate-quality-in-browser-using-ffmpeg-wasm-in-typescript/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:06
uh hello guys welcome to this live
0:08
stream so in this live stream I will
0:09
show you a new tool that I deployed or
0:13
made inside ReactJS which is actually a
0:16
video compressor kind of a application
0:19
web application which uses fmpp web
0:22
assembly library
0:24
and it actually works directly in the
0:26
browser itself so the interface of the
0:28
application looks like this you can see
0:30
we are running it on local host and uh
0:33
here you can actually select any video
0:35
that you want to compress so it will
0:37
compress the size of your video so you
0:40
either you can drag and drop or you can
0:42
select to select your video and as soon
0:45
as you select this the video will load
0:47
it can be MP4 AVI any extension then you
0:50
will see this button here of compress
0:52
video and as soon as you click the
0:55
button you will see it will show you a
0:56
live preview and it will also show you
1:00
this progress bar which will actually
1:02
show you uh the progress of your
1:05
compression and it will also show you
1:07
the original size of the video plus the
1:10
compressed size so it is now compressing
1:12
the video in real time and it is showing
1:15
you the nice little progress bar as well
1:18
so I just coded inside this ReactJS
1:21
which uses f ofmppg web assembly library
1:23
so you can see we are running this
1:25
application on local host and uh this
1:28
was the original size of the video 17
1:30
mgabytes and now it is compressing it
1:33
frame by frame second by second so if
1:36
you have a larger video file then you
1:38
just need to wait for some time and then
1:40
it will compression will take place and
1:42
uh it will also show you this progress
1:44
bar as well how much percentage is done
1:47
so it is 46% so until 100% is reached
1:51
you just need to wait and uh this is the
1:54
more most important feature it directly
1:57
executes in the browser using fmpp web
1:59
assembly library so there is no
2:02
serverside code involved it's fully
2:04
client side and you can see the
2:06
directory structure and you can directly
2:08
purchase the full source code of this
2:10
project i've given the link in the
2:11
description of this video so this will
2:14
be the directory structure you will see
2:15
it is coded inside Typescript
2:18
the whole application is divided into
2:20
multiple components right here so this
2:23
is a button component this is a dialogue
2:25
component the progress bar component so
2:27
once you get the source code it will be
2:29
easy for you to modify the source code
2:31
or add additional features on top of it
2:32
as well so we show you the package.json
2:36
file here you can see we are using the
2:38
latest version of react here which is
2:40
react 18 and uh you can see that so we
2:43
also using the ffmpg web assembly
2:45
library as well
2:48
so it's a complete project and uh once
2:50
you purchase it you will get this
2:52
directory structure so you will see now
2:56
once it completes once it reaches the
2:59
100% a download button will be shown to
3:01
you and now this was the original size
3:04
of the video which was 17 MB and now it
3:07
has compressed to 8.9 MB so you saved
3:11
48% of the original size so so if you
3:15
play the output video there will be no
3:17
difference you will see in the quality
3:19
but still you saved a considerable
3:22
amount of space this is a really useful
3:25
application if you want a very if you
3:28
want to compress your videos to save
3:31
some space you can use this application
3:33
and then there is this button here so
3:35
this will download the video to your
3:37
local machine so now you can play this
3:39
video inside the video player so this is
3:42
the actual application if you are
3:44
interested uh the link is given in the
3:46
description so it's a fully clientside
3:48
video compressor application and then we
3:51
also have some options right here the
3:54
settings op option right here so if you
3:56
want to modify something let's suppose
3:59
you can even target a max bit rate as
4:02
well you can change the quality here as
4:03
well you can change a quality percentage
4:07
you can even target a file size as well
4:09
the video quality which is controlled by
4:11
CRF
4:13
you can even change the video bit rate
4:15
as well all these in the drop-down you
4:17
can select it video codec if you want to
4:20
change this as well audio codec like
4:23
this the audio bit rate all these are
4:26
useful information when it comes to
4:28
video so you can change the audio bit
4:30
rate as well the frame per second which
4:33
is the frame rate you can change this as
4:36
well and lastly we can change the
4:37
quality as well so 1080 by 920 this was
4:41
a full HD you can compress it to 720 or
4:44
480p as well so once you get the source
4:47
code you can add additional options as
4:49
well inside this component right here if
4:52
you want some more qualities you can add
4:54
this inside the drop-down so it's a
4:56
fully static kind of video compressing
4:58
kind of application
5:00
you can put these options so the
5:03
application is very simple you basically
5:05
use any kind of video then we have this
5:09
option compress video or you can change
5:12
these options here let's suppose you
5:13
want to change the video bit rate at
5:16
480p
5:18
you can change the audio bit rate frame
5:21
per second and then click compress video
5:23
so now it will do these things
5:27
and then compress the video based upon
5:30
the options that you selected so for
5:32
building this we are using this ffmpg
5:34
web assembly if you don't know it's a
5:37
actual tool by which you can actually
5:39
execute FMPPG directly in the browser so
5:43
this is their official website
5:46
so we are using this alongside with
5:48
ReactJS which is a popular framework of
5:51
JavaScript
5:54
so if you interested the link is given
5:57
in the description you can directly
5:58
purchase it and also check out my
6:01
website freemediatools.com
6:03
uh which contains uh thousands of tools
6:05
related to audio video and image and I
6:08
will be seeing you in the next live
6:11
stream
#Software
#Multimedia Software