Up next in 10
Build a Client Side FFMPEG WASM Video & Image Editor in Browser Using Vite & TypeScript
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-client-side-ffmpeg-wasm-video-image-editor-in-browser-using-vite-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys uh welcome to this uh
0:02
video. So in this video I'll show you I
0:04
built out a clientside uh video and
0:07
image editor inside
0:11
TypeScript and VET. So it directly runs
0:14
in the browser using HTML CSS and
0:16
JavaScript. So it has three tools. First
0:19
of all we have the image editor where
0:21
you can actually merge multiple images
0:24
horizontally. So here you select a bunch
0:27
of images that you want to horizontally
0:29
merge.
0:32
So you can select up to two images. As
0:34
you select the images now you can
0:37
actually click this button to actually
0:39
merge them together. So it's actually
0:41
using ffmppg.
0:44
If you click download
0:47
it will actually merge both these images
0:49
into a single image. So you can just see
0:51
here it actually merge both the images
0:54
into one. Then we have this slideshow
0:58
video generator. So here you will
1:00
actually select up to
1:04
multiple images and then it will convert
1:06
this into a MP4 video. So it's entirely
1:08
built inside Typescript and we have used
1:12
this V development engine
1:15
as you can see. So the link is given you
1:18
can directly purchase the source code.
1:20
So all the components are divided into
1:22
its appropriate TypeScript file. So
1:25
everything is customizable. You can add
1:27
more features as well. On top of this
1:34
for this we again select a bunch of
1:36
images.
1:40
[snorts] So right here you can select
1:42
how much time each image takes. And this
1:45
is the fading time, the transition time.
1:48
And you click the button here which is
1:50
generate video. So as soon as you do
1:52
this, fMPPG will start processing these
1:56
images and convert this into a MP4
1:58
video. If I show you in the console,
2:01
it's actually processing it second by
2:03
second. And it's applying those
2:06
transitions to you as you can see.
2:10
So once it completes it will actually
2:12
show a MP4 video.
2:16
So in in the meantime let me show you
2:18
what which libraries we have used for
2:20
this project. So we have used this
2:22
ffmppg web assembly library which
2:26
actually allows you to use ffmpg
2:28
directly in the browser. So we have used
2:30
this to actually execute ffmppg directly
2:34
in the browser. So we have used this
2:36
inside this project. So now you can see
2:40
the video has been successfully created
2:42
and you can play the video. So it
2:46
actually adds those animations as well
2:48
in between the images. So four images is
2:51
actually converted into a slideshow. So
2:54
you can just see here it's how easy it
2:56
is to actually render out a MP4 video by
3:00
selecting a bunch of images and these
3:03
transitions are applied using ffmpg. So
3:06
once you get the source code after
3:08
purchasing it, you will get the source
3:10
code from Google drive. So it's you will
3:12
be able to see how I coded this from
3:14
scratch. Each and every component is
3:17
[snorts] customizable.
3:19
And if you still face any problem, you
3:21
can message me. And the third one is
3:23
actually if you want to blur out a
3:26
specific image, you select the image and
3:29
right here we have the blur section. So
3:31
here you highlight which portion of the
3:34
image you want to blur out. Simply
3:36
select it using the mouse here. Simply
3:39
drag and click on apply reduction. So
3:42
that part will be blurred out. And there
3:45
is also a second option which is
3:47
pixelate.
3:49
Again you [clears throat] select.
3:53
So now that part will be pixelated. So
4:00
you can just see here those parts are
4:03
pixelated. So it's very easy.
4:11
So you can see here. So you can also
4:13
apply multiple times to increase the
4:15
intensity as well.
4:18
Just use the mouse here. Simply drag and
4:20
drop.
4:22
Similarly, the blur effect also does the
4:25
same thing. So then after that you can
4:27
download this image and uh so it's an
4:31
video and image editor where you can
4:33
actually generate videos, blur, pixelate
4:36
images and also merge images as well. So
4:39
it's a complete project
4:42
and it will save you a lot of time. If
4:44
you're looking forward for a fmpg
4:46
project in Typescript and wheat, this
4:50
will be the perfect project for you. You
4:52
can definitely purchase it. The link is
4:54
given in the description. So, it has
4:56
three tools. First of all, I showed you
4:59
the merge tools. Then we have the
5:02
slideshow tool. Then we have the blur to
5:06
pixelate tool. So, it's very simple.
5:11
You select a bunch of images here. You
5:13
specify the display time and then
5:19
so you can do this unlimited number of
5:21
time. There is no restriction. It's
5:23
directly runs in the browser. There is
5:24
no back end, no server. Every processing
5:27
happens directly in the browser. So it
5:30
will save you a lot of time and uh
5:35
you can see how fast is it is. So it's
5:38
doesn't take too much time to actually
5:40
you can see that. So
5:44
you can generate videos just from your
5:48
static images. So you can generate a
5:50
slideshow very easily. So if you're
5:53
interested in this guys the link is
5:55
given in the description definitely
5:58
purchase it and if you still face any
6:01
problem you can contact me. Uh as you
6:04
can see we running this project locally.
6:06
So once you purchase it simply run the
6:08
command npm render. This will start the
6:11
development server and it's also very
6:13
easy for you to deploy this as well. So
6:17
this is a build command. So this will
6:18
build a entire project and then you can
6:21
safely deploy this to a custom domain as
6:23
well. So definitely purchase