Up next in 10
Build a React.js FFMPEG WASM Video Editor With Progressbar in Browser Using Radix UI in TypeScript
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-wasm-video-editor-with-progressbar-in-browser-using-radix-ui-in-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I'll show you I built out
0:04
a video editor directly in browser using
0:07
ReactJS.
0:09
Uh this is actually the application.
0:11
It's running on local host and it's a
0:15
single page application. All the
0:16
processing directly happens in the
0:18
browser. So this is the user interface.
0:20
So right here first of all you will
0:22
click this button to initialize and
0:24
download the ffmppg and you will get
0:26
this notification once the process is
0:28
complete.
0:30
And the interface looks something like
0:31
this of the application. So right here
0:33
you will drag and drop your media file,
0:36
your video file. So this is the full
0:39
directory structure of the react
0:40
project. It's all the source code. You
0:43
can directly purchase it. So this is the
0:45
full directory structure. Each and every
0:47
component is divided into its
0:48
appropriate TypeScript file and it's
0:51
fully customizable. So once you purchase
0:53
the source code, you will actually see
0:55
how I coded this from scratch and it's
0:59
easy for you to go to the command line
1:00
and simply run this command npm runtime.
1:03
So this will start the local development
1:05
server and it's easy for you to deploy
1:08
this as well. And as you can see we are
1:10
using the latest version of react and we
1:13
are also using radix UI for the
1:16
interface user interface and we are also
1:18
using ffmpg web assembly library.
1:22
So now to actually show you the actual
1:24
interface of the application. So we will
1:27
take a simple video for example.
1:31
So once you take a video for example the
1:33
video will be added and now you can
1:35
perform these operations. You can trim
1:37
the video, resize, crop the video,
1:40
remove the audio, apply filter, rotate
1:45
and you can convert this MP4 video. Just
1:48
select the format,
1:51
convert this to
1:53
click on process video. So now what
1:55
happens directly using the progress bar,
1:58
it also show you the actual amount of
2:00
time remaining and it will actually show
2:02
you this progress bar. So this is f
2:05
FFmppg doing its processing directly and
2:08
you can just see frame by frame it's
2:10
converting your video MP4 video to MOOV.
2:14
So it's an all-in-one single page
2:16
application. So it's a client side
2:19
converter. Everything is happening
2:21
directly in the browser. There is no
2:23
back end to it. So there is no server
2:24
side. All the things are processing
2:27
directly in the browser.
2:30
So once it reaches 100% your video will
2:32
be converted and you will be able to
2:34
download.
2:39
So similarly if you want to trim the
2:42
video you will select this option
2:44
resize.
2:45
So in the meantime let me show you other
2:47
operations as well. So let me open in a
2:50
new window.
2:56
So again you click the button. So it
2:58
will actually just download the fmfmppg
3:00
directly inside your browser. So now you
3:03
can access all these operations.
3:08
So you now select this operation which
3:10
is able to cut the video. So trim the
3:12
video. So here you provide the starting
3:14
duration and the editing duration.
3:18
So very simply you provide this click on
3:21
process video. So now it will actually
3:23
trim that specific portion.
3:39
So again it will show you this progress
3:41
bar. It totally depends upon your speed
3:43
of your computer because it's just
3:45
running directly inside your browser. So
3:49
if you do have a graphical user interf
3:52
GPU card then it will take less time.
3:56
because all this processing directly
3:58
happening in the browser. So we are
4:00
using these libraries here. First of all
4:02
we are using this ffmpg
4:04
web assembly library. If so if you don't
4:06
know about this library it allows you to
4:08
use
4:10
ffmppg directly in the browser. So we
4:13
are using this apart from that we are
4:16
using this radix UI which is a a library
4:21
for building user interfaces. So we are
4:23
using this RAX UI
4:26
library to build out this nice little
4:29
interface that you see.
4:45
So here you this is the ffmpg command
4:47
which is used. You can even edit this
4:49
command as well by going to advanc
4:50
option just changing this command.
4:58
So apart from that we have all these
5:00
operations for filter applying filters
5:02
frame fps audio bit rate cropping the
5:07
video as well. So resize.
5:14
So [snorts] it's an all-in-one react
5:16
video editor. So if you're interested in
5:18
this fully fledged project, it will save
5:22
you a lot of time if you're looking
5:23
forward for building a
5:26
mpg project in React. All the pro
5:30
components as you can see are coded from
5:33
scratch. So it's fully customizable. you
5:36
can add more features on top of this
5:38
project. So the link is given in the
5:40
description. So after purchasing if you
5:43
face any issues you can contact me. I
5:45
will definitely help you and fix the
5:47
issue for you. So
5:50
this is the development command. This is
5:52
if you want to build the project this is
5:54
the command here. So just go to the
5:57
command line. Simply run this command.
5:59
This will run the project for you.
6:03
So you can just see here.
6:20
So this is actually the processing that
6:22
you see frame by frame it's doing it.
6:31
Also in the console you see basically
6:33
it's processing frame by frame.
6:42
So once it completes you will get the
6:44
notification and you will be able to
6:46
download your video. So once it reaches
6:48
100%. So still it is processing it. So
6:50
it depends upon your video size and how
6:53
much time it takes to process your
6:55
video. So you can easily deploy this
6:58
application. Uh just if you want to the
7:02
link is given you can directly purchase
7:05
it's developed in Redix UI as you can
7:08
see each and every component and uh
7:12
we're using the latest version. So you
7:14
will not face any problem in running and
7:17
deploying this application.