Up next in 10
Build React Video Compressor to Change Bitrate & Quality in Browser Using FFMPEG WASM in TypeScript
649 views
Jun 20, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-react-video-compressor-to-change-bitrate-quality-in-browser-using-ffmpeg-wasm-in-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/
View Video Transcript
0:00
uh hello guys welcome to this uh live
0:02
stream So in this live stream I'll show
0:03
you a video compressor kind of an web
0:06
application that I developed directly in
0:08
the browser Uh it's a web application
0:12
which runs directly in the browser using
0:14
ffmppg
0:16
web assembly library inside ReactJS So
0:19
as you can see we are running it on
0:21
local host and this is actually the demo
0:23
of the application And we have a very
0:25
userfriendly interface where we can drag
0:28
and drop video or we can select the
0:30
video that we want to compress So all
0:32
the video compression will take place in
0:34
the browser No need to upload file to
0:37
the server So there is no server server
0:40
side code involved So now right here I
0:43
will select whichever video that I want
0:45
to compress right here Let me select
0:47
this video And as soon as you select the
0:50
video you will see this button of
0:53
compress video And as soon as you select
0:56
this button and you will see the
0:58
compression will start here And it will
1:00
show you the original size of the video
1:02
which is 17 mgabytes And now it is
1:04
compressing the video frame by frame
1:07
second by second And it is also showing
1:09
you the live preview of the video And it
1:12
is also showing the progress bar as well
1:16
compressing 18% So when it reaches 100%
1:19
your full operation will be completed
1:22
and using this progress bar the user
1:26
just see how much time is remaining in
1:28
the compression of the video So this is
1:30
a full web application coded inside
1:32
reacts So the full source code of this
1:34
application will be given in the
1:36
description of this video You can
1:38
directly purchase the full source code
1:40
and after purchasing it you will get the
1:42
zip file which will you can directly
1:44
extract it and this will be the
1:46
directory structure You will see the
1:48
whole application is divided into
1:50
multiple components which is coded
1:52
inside typescript
1:54
and this is a button component dialog
1:56
component and the progress bar component
1:59
and this is a main app component right
2:01
here So once you get the source code you
2:03
will be able to modify it and add
2:05
additional features on top of it And let
2:07
me show you package.json file As you can
2:10
see we are using the latest version of
2:12
react which is react
2:15
And uh then we also using the ffmppg
2:18
package as well which is ffmppg web
2:21
assembly package So this is a full
2:25
project
2:26
So how to run this project is very easy
2:30
Come to the terminal Simply type npmi
2:32
This will install all the NodeJS modules
2:38
And then you simply need to say npm
2:40
rundev This will start the development
2:42
server locally Local host 5173
2:46
So as you can see we are running it on
2:50
So once it reaches 100% you will get a
2:53
download compressed video and uh
2:58
it is a very userfriendly application
3:00
and uh you can easily deploy this make
3:04
changes as well to the source code as
3:06
well So once it reaches 100% you will
3:09
get a download compress video button
3:13
and you have saved you will see 48% of
3:15
the original size The original size was
3:18
17 mgabytes The compressed size at 8.9
3:21
MB So if you have a larger size video
3:24
let's suppose 1 GBTE you can save it
3:28
compress the video using this
3:30
application
3:32
But for larger videos you need to wait
3:34
because FFMPG web assembly is slightly
3:37
slow but you do need to wait for larger
3:40
videos So once it is completed you will
3:42
be able to save a lot of space And now
3:44
you can click the download compressed
3:46
video to download the video right here
3:48
And you can see the video will play in
3:49
the video player So there is no change
3:52
in the quality here Quality remains the
3:54
same but you still save a lot of space
3:57
And there is also a settings icon as
3:59
well Right here If you click the
4:00
settings icon you can even modify some
4:02
more options right here The compression
4:05
method you can target max bit rate
4:08
quality percentage all these things you
4:10
can control in the video the video bit
4:12
rate audio codec video codec audio bit
4:16
rate frame rate each and every options
4:19
you can the max resolution of the video
4:22
You can each control it by using the
4:24
settings
4:26
before you compress the video So this is
4:28
a single page offline video compressor
4:31
application which is built using this
4:33
ffmpg web assembly library If you don't
4:36
know about it it's a way by which we
4:38
execute FMPPG directly in the browser
4:41
This is their GitHub repo and official
4:43
website
4:45
So if you are interested guys the link
4:47
is given in the description You can
4:49
directly purchase the full source code
4:52
and please hit that like button
4:53
subscribe the channel as well if you are
4:56
watching it for the very first time And
4:58
also check out my website which is
5:00
freemediatools.com
5:02
uh which contains uh thousands of tools
5:04
related to audio video and image
5:09
and I will be seeing you in the next
5:11
live stream
#Multimedia Software
#Online Media
#Programming