Build a React.js FFMPEG WASM GIF Editor to Change Speed & Rotate GIF in Browser Using Javascript

uh hello guys welcome to this uh video so in this video we will actually be coding a reactjs application which uh

allows you to actually edit your uh GI files so I basically developed this tool

on my website I've deployed this tool on freem mediat tools.com so this is actually the YouTube channel of this uh

uh website so I have this website freemed tools.com so if you go to it so the latest tool that I added on my

website this is the GIF speed and rotation editor so with the help of which you can be able to change the

speed of your GIF files or you can even rotate them also so let me just take an

example right here and you can see I deployed this you can check out the live demo as well so here this is actually

the interface which I developed this using Tailwind CSS and you basically see a choose file button so here you need to

Simply select your GIF animation file right here guys so GIF animation if you don't know about GIF animations are

special images which are simply made of animations you can see it's a animation

file of GIF animation and we have two sliders available right here to actually

uh increase the speed so as you basically increase or decrease the slider you will see the label will increase here you will see it will tell

you exactly which is the speed right here so if I increase the slider or decrease the slider the value will

change right here so let's suppose I want want to increase the speed of this GIF animation I will increase the value

so the speed is 4.4 and now you can even change the rotation angle as well so you just need

to change the value here so if you are happy with this value now you have this

button right here process so you will simply click this button and now as you click this button the processing will

start and after that you will basically see your GIF animation has been

successfully rotated at an angle of 133° and speed has been increased to 4.4 so

you can take any GIF animation of your favorite just change the rotation angle click on and you will basically see a

model window will appear simply telling that it is processing so after processing it it will show the output

file in a gif animation and there will be a download GIF button so if you

are satisfied with the result you can simply export this to a gif animation

simply click this button so as you click this button your file will be saved in a gif file you will basically see your

simply your GI file has been rotated and the speed is also changed it has been rotated at an angle that you choosen

right here which is 306° and the speed is also being increased so similarly if

you want to decrease the speed you can just uh decrease the value of the slider

so now it the speed is 0.5x so now the speed as you can see it is

decreased if you see right here the size of the GIF animation will increase right here and if you play the GIF animation

file you will see the speed of the GIF animation will be decreased right here so you can play with this

application I have successfully deployed this on my website freem mediat tools.com and we will be building this

application from scratch in this video so let me first of all tell you what

what technologies we will use for this first of all we will be using react chers which is the number one UI library

for building user interfaces and we will be using react chers for building this application and the second technology we

will be using is fmpg web assembly fmpg as you all know it's open source video

and audio processing library but fmpg do web assembly enables you to use this

very popular library in the browser so you can directly use this in the browser

to actually edit your media files so we will be using this Library so these

two uh packages we will use so first of all react for actually building it in

the browser and then the fmpg web assembly you will also be using Tailwind

CSS for actually designing the UI so if you don't know about Tailwind CSS

it's a very good UI library for building user

interfaces uh for this you don't need to write external CSS you it has premade

classes that you can attach to the HTML so these three packages we will use guys for building this application so you can

directly purchase the full source code at the end of this video if you need the Full Source Code full directory

structure you can go to my website I have I am selling this source code so

you can go to Pro Cod store and purchase the full source code after you purchase it you will be redirected

to Google Drive where you will actually get the full directory structure full zip file automatically after the payment

you will be redirected to Google Drive and you will get the zip file you just need to extract the zip file and you

will see I'm running this application on Local Host 3000 and simply you need to

first of all npmi so this will install all the modules and then you just need

to start your server by invoking a very simple command which is npm Run start so if you need the full

source code the link is given you can directly purchase it after purchasing it you just need to extract the content of

the zip file and simply execute this command which is npmi so this will exec

install all the nodejs modules and simply type npm Run start so this will actually start your

application on the local development server which will be Local Host 300 ,000 by default all react CH applications

start on Local Host 3000 so in this way so in the next section we

will try to build this application from scratch so I will be seeing you in the next

section uh now guys we will start building this application so I'm there on my project directory so I will simply

open command line and for building this we will be using a development engine

which is vit so if you don't know about V it's a popular development environment

where you can actually build out react chairs view chairs all these popular Frameworks applications so it is really

fast so it's a front end tooling system uh similar to webpack so it's really

fast so we will be using it so there is a simple Command right here in vit which

you can npx create react app or we Sorry create Das v v t-

app and then you need to Simply name your application let me name it as GIF

editor project and then you need to Simply type dash dash template so we are

developing react Chase application so I will simply write here react this is actually the command guys you will see

that npx then is the create re vtab and this is actually your project name so we

have GIF editor project-- template and this is actually the react CH

application so this is the overall command so if you just execute this

command and you will basically see you will get this message now you can CD

into this npm install and npm runev to actually start the development server so

I will simply go to the project directory give editor project and then I will install

all the modules by invoking this command which is npmi so this will actually

install the basic react CH packages which are required for actually building

a react Chas application so this will hardly Take 5 to 10 seconds so V it is

really powerful and it is really fast in building your react is bundling the

dependencies if you are basically building it using react JS command line

it's really fast so that's why we are using it so it takes less time in

running projects and building also so once it is done we will

start to actually install two packages which are required

for building this application so one such package I I'm

talking about is this package which is if you go to npmjs.com you just need to

search for this pack package the name of the package is no UI

slider D react this is actually the package we will use guys for actually uh

setting the start and the this package for this

application you need to require this is a slider package if you want to

integrate sliders inside your react Chase application so this is specifically made for react Chas

applications so there is a simple command which we need to invoke which is npmi no UI slider - react so you can see

that now it has installed it if I open this you will simply get this directory

structure this will be your jsx file very simple react Chase project right

here and we just need to in npmi install this

package no UI slider Das react so now we can run this development server npm run

Dev so this will actually start your development

server so it is bundling all the libraries so just wait you will see

Local Host 3000 so if you just open the address Local Host

3000 this is a basic react Chase project you will see

that now we just need to edit this file app.jsx if you see there is this file

present simply I will replace everything here with a simple heading hello world

so it will automatically refresh hello world will be printed out so that's all

and now we don't need the logo we will eliminate this we don't need this also

so you can remove this from here so this is actually the directory

structure very simple and you can see inside package.json we have installed this package which is no UI slider react

so this is a package We Are One external package that we are using apart from the

web assembly library of fmpg now guys for the very first time we go need to go

to the public folder this index.html file right here so in in this file we

need to include the CDN for Tailwind CSS as I already told you we are actually

using Tailwind CSS for the UI purpose we just need to include the CDN for

Tailwind so just go to their official website copy the CDN and after the title

paste it and apart from that we will also be using a sweet alert to which is

actually a alert based Library so sweet alert if you don't know

they have their own official website so it customizable alert boxes so it looks

really good that's why we are using it inside this project so they have

installation if you see you need to include the CDN for this just copy the CDN and paste

it so that you can use it inside your react Chase

application and I think we also need to include the CSS part as well

so just after the title paste all these C so if you purchase it you will

automatically get all this set up you don't need to manually set up you will get all the project files if you

purchase it the link is given in the description of the video so coming back to

app.jsx now we just need to make some changes in the UI instead of this hello

world we need to show to the user we will be using these Tailwind classes

we need to set [Music] here P6 P SS for

padding and BG stands for background color BG gray 100 is the shade and then

minimum height screen so these are all Tailwind classes guys as you see we are

adding multiple classes here and then items Center so we have

basically given in a div right here and attached all these classes and inside this we will be having a heading so

text you will set the size 3 XEL the size it will be bold margin bottom six

text Gray text will be in gray color

800 and uh you will basically set the title to be give speed and rotation

editor so if you just refresh your

application you will basically see it will appear like this give speed and rotation

editor so after

this sorry this needs to be Flex I basically made a spelling mistake so now

it will appear right in the right full position at the center of the screen at the top center of the screen so after

this we will actually be having a input field where we will ask the user to

actually upload or select a gif file we will only be accepting gifs file so we'll be giving an accept parameter

right here we will only be accepting GIF animation files and this will be

required and we will be giving a class name these are all Tailwind classes we

will give here margin bottom four padding to we'll give it an

border of gray 300 and it will be rounded on medium devices and it will

also be having a shadow on small

devices so that's all if you refresh there will be this uh input file added

right here where you can select your GIF animation files if you try to select any other file you will basically get a

error so after doing this guys we need to declare our state variables

for our react Chas application so for every react Chas application if you are working with data data is called as

state in react CH application if you don't know so we need to declare some variables here

so first variable we will declare is the gift source so this variable will be

responsible for storing the input file GIF

animation such that if the user selects this using the input field we will be

storing the file using in the in this variable the actual file which is selected by the user will be saved

inside this variable and the second one will be the actual speed so whatever speed is

selected by the user which will be stored inside this variable so if you

don't know about use State UST state is actually a hook if you don't know about react Chas hooks you can search react

hooks where there are various types of hooks available one such Hook is UST state which is required to

actually uh which is responsible to actually manipulate with the data and

the state of the application so this is the actual variable and this is actually the method to actually manipulate the

state to actually set values this is meant by these two variables and again

the initial value here we need to provide the initial value so this will be empty similar to this the speed will

be one by default and similarly we need to set the rotation as well GI rotation

we will call this you can call this anything set GI rot ration so this is

actual method name and again initial value of it will be 0° by

default whenever you load the application for the very first time so the next variable will be the

output URL you will be storing this I will call this as processed GIF URL and

the function will be set processed GIF URL and then

initial value will be nothing again and here this variable will be

responsible for actually loading the fmpg web assembly Library this will be a

boodan parameter and basically is script loaded and set is script loaded this is

actual method the initial value will be false because we haven't loaded the fmpg

web assembly library in the browser so this variable will be useful

to keep track whether the fmpg is loaded in the browser or not we will change

from false to True when it loaded the last but not least is the processing so

we will be basically be showing a alert message to the user whenever the

processing is taking place this is again a Boolean parameter set is processing

initial value will be false once again because the file is not processing

that's why it is false so we can see we have declared all the state variables

which are needed for this uh application now we just need to declare our sweet

alert variable so this is required guys you just need to write this comment so

that we can use it as a global variable because we are actually

including suet alert to library in the CDN if you see in the public index.html

we have included it the CDN right here for the CSS the JavaScript that's why we

do need to include this comment right here to actually enable site alert

library to actually use it inside this component so just write this comment

right here as it is if you don't write this comment you will get

error so we need to declare this Global variable Global swell and just close

this comment that's all so now you will be able to use sweet Alert 2 library inside your react Chase application so

after this guys what we need to do we now need to once again use another hook

here in react chers which is called as use effect so

use effect guys is typically used let's suppose your application is

loading for the very first time so this hook only execute once so here you can

actually load any external library that you we are using so we will be loading our library

which is fmpg web assembly this will be only be loaded for the very first time

when the application is loaded so here you need to provide square

brackets so inside this we will be writing a simple function which will be

responsible for loading this I will call this as load script and I will need to

provide a URL here from which which the library will be loaded so this will be

the

URL npm at the rate

fmpg fmpg at theate this is actually the full URL

guys of the CDN Library which is hosted you can also cross verify as well

if you open this URL in the browser you will actually get the actual library of

fmpg web assembly so we need to actually fetch this library in the browser and load this now we need to Define this

function which will actually return a promise to us we can handle this Promise

by do then and inside

this we will actually be loading this if type of window is uh

so here we can simply say we need to declare a global variable right here at the very top fmpg we'll be storing the

reference of fmpg in this variable we can simply say fmpg is equal to

window. fmpg do create FM this is actually a

method which is available in fmpg web assembly Library and here log is it to true so basically

all the log statements will be available in the inspect element of the browser console if you set it to true and uh

there is a method which is fmpg do load so it will actually load the library in the application and then we can set this

variable from false to True which is the hook set is script loaded to true you

can see we have declared this hook method we are calling it to actually manipulate this state from change this

value from false to true we are doing it so now we just need to Define this function which is load script which will

be responsible for actually loading the script so you will Define this function

load script which will actually be taking a source parameter as an argument you're passing the full URL as it is you

can see that so right here inside this here we need to return

a promise from this because it's a Asing function so either the promise can

resolve or reject so here we are basically creating a script

element by using document. Create element if you if you know about Dom you will note

this method which is responsible for creating Dynamic elements so we are creating a

script element we are actually saying script. async to true because it will be

async async must be loaded script. defer is also be equal to

true and script. Source will be equal to the Past Source property which is passed

right here it's a very simple function just doing its task and we are basically

onload so when the library is loaded we will actually resolve the promise and

pass the script if any sort of error take

place we will actually reject This Promise call the reject function and

passing a error and we can simply say that script load error

for fmpg web ass that's all and now we just need to add this to

the Dom so we can simply say to the Head element document. head append script

that's all in this function very simple function we create an script element we add the source we add these two

parameters async defer and then Define this onload when the script is loaded we

will resolve the promise and if it has some error we will reject it passing

this error message and lastly we will add this script element to the Head element in the index. HTML so this will

be automatically dynamically be added so using this function which is load

script this will be executed whenever you load this use effect this will automatically be called if I basically

add a alert statement here you will basically see this alert statement will be

executed so if I go to the browser now you will see that if I go to my react

CHS application refresh so you just need to refresh your

application for this

so it is running Here Local Host 30001 so here we need to change the

port number here you will see it this alert message will print out hi hello and if I go to

the inspect element go to console you will basically see here

uh you can see this loading fmpg dashcore and you will basically see this

error right here guys this is very common error in fmpg web assembly Library shared aray buffer is not

defined and if you are building it using vit there is

a config file which will be available to you which is VC config.js file and here

we need to add two headers to actually counter this error if you're developing it on

local environments you will get this error shared array is not defined so to resolve this error you need to add two

headers right here V config.js so I will simply go to chat GPT and

actually get my answer so I will simply write a simple

prompt please uh

provide the headers to here to resolve shared array buter not

defined for fmpg web assmbly it will automatically add the errors headers

which are required so in this way you can use chat GPT for your advantage simply copy it paste it so what it will

do it will add these two headers right here cross origin opener policy to same or and

cross origin embedder policy to require cop these are the two headers we need to write guys if you just refresh your

application you will basically see that error will go away if you once again go

to inspect

element this error will you can see that it is using this version number version

0.112 it is loading it

just need to refresh your application one more

time so it is saying that uh V defined config is not a

function so what you will do control C just ask go to chat GPT

and paste is simply type

so it will give you this simply copy this so whenever you

make changes inside your V config.js you need to actually restart your

application so if you see yeah so we have the server block right here we need

to add this this just put a

comma uh sorry guys the problem was really simple and V basically has a

latest version which is four version I was using the outdated version simply update the package.json file and uh

inside your Dev dependencies change the V version to 4.0 Z this is the latest

version of vat and change this to 4.00 and simply again npmi this will

actually update your V version so after you update it simply run your development server it will start this

development 5173 in the latest version of v it basically start your application at Port

number 5173 so if you just now see this alert message will open and you'll see the

fmpg web assembly Library will be successfully loaded and you will not see

that message shared AR not defined that error message is gone and we have successfully loaded the fmpg web

assembly library now our task is very simple we now now need to

actually uh bind a method right here to this input element whenever we change

whenever we select our GI file there will be this method which will be automatically be triggered once we

select our file so right here what we need to do right

here if you see we now need to actually bind a

onclick listener so whenever we select any file right here we will call this as on

change this event will this will automatically trigger this function when whenever you select

your uh gif file this function handle file upload you can basically call this

anything I will call this like this handle file upload now we just need to Define this

function right here we can Define it right here so just say const handle file

upload and here e parameter will be automatically be passed to this function

and here we will get to the file which is selected by the user so we will say e. Target

dot files zero this is the actual Way by we get to the file we can console log

the file and if I actually let me just delete this alert message which is

coming just delete it just refresh now and once we actually

select any file if you go to the inspect element go to console you will be basically see

this file will be having all these properties the name size type we'll get

all this access to all these properties using this file object now we just need

to access this uh object that we got which is a

file and now we just need to actually set all the state variables so we'll set

the GI file

set the GIF uh file I think I declared sorry

this needs to be uh let me see I call this

wrong set there is also a GI

Source okay okay set okay let me also declare this GI

file as well set GI file and initial value will

be nothing so right here now we will be uh setting our GI file

we'll call this function set GI file to the actual file which is

selected by the user and also set give

source to the for this we need to actually convert

this into a blob URL so right here we will actually be having a if condition if file

and if the file type is equal to condition if it's a GI file then only

execute this code like this simply format like this

so after this we will actually be calculating our blob we will convert

this into blob URL so URL

do create object URL and we will simply pass the file it will actually convert

your file to a blob here and we set it to a blob URL like

this and also we will set the processed GIF URL to be

nothing because we are not processing it so the output file will be nothing here

we just starting to Pro process this file so this is all that we it will go inside this

function so if this is not a GI file we will actually be showing a alert message

to the user because it's not a give file also close this and there will be

this else block and here we will simply be showing a sweet alert message to the

user that inv valid file you need to select uh please upload or please

select a valid this will be error message please select a valid gift file

and this will be error message the third argument to this uh Library function

fire will actually open the alert message so if you go to your application try to actually select any different

file let's suppose by by default it will only show GI files so by chance if you select a

mp4 file you will SE see this awesome little validation message please only

select a valid GI file so this makes it very much easy for the user to actually select only GI files so after you do

this guys we will actually be writing some uh

jsx conditional HTML inside of a react CH application just go to right here and

we will actually writing a simple curly bracket and write here gift source so

if the input file is selected by the user then only this code will execute

inside parentheses like this and here inside this we will actually be

writing our div class

name give source

uh uh let me see what is actually it is having

error let me see I declared this give

Source yeah this is the set gift gift source is there we are basically using

this variable right here

okay this parent div needs to be right here because we Clos this application right here so it needs to be inside this

so your react Chase application must only contain one parent if so we have this one parent if so all the jsx will

go inside it so that's why so give

Source uh if this variable exist then

only we will need to write some here uh

div we'll basically give it a class name here of relative margin bottom for these

are all Tailwind classes we will actually be showing this in the image tag the gif file the input image file

which is selected by the user this will be in Co bracket GI source

this will be a blob URL and we'll give it a original this is the original GI

file and we'll give it a class name W full Max W on medium devices and it will

be rounded on large devices it will also have a shadow on large devices that's

all so if you just uh see guys uh your GI file will be displayed if you

see if I try to select select this gift file and uh let me

see W full maxed W medium

rounded should display

but let me just select

so why it is not displaying let me see guys why it is not displaying it should display this GI

file uh guys there was just internet connection problem so all the code was

correct if I basically select my GIF animation file you will see that now it is displaying right here in the

application so you can see that now the GIF animation is displaying this is actually ual input file we are showing

the live preview to the user whichever GIF animation file that they have selected the GIF animation will play now

we need to add the sliders for changing the speed and the rotation angle of the

GIF animation now going back to the GSX right here you will see we have written this much code so after this guys we

will be actually be the div tag we will be adding some Break Tag

so after this Break Tag we will be having another diff so this

time this will be for the sliders MD margin bottom four these are all

Tailwind classes and uh right here we will give it a label as well for better

understanding for the user what to do here so it will be a block Tel element

margin bottom two two text will be in gray color of 700 shade and it will

simply say speed and here the user must select the speed and we will be using

that uh no UI slider guys it will automatically imported right here at the very top no UI

slider and uh you can see that so we also need to import the CSS file CSS

will also be imported from the distrib vs code will automatically import all

the things we need for this package these two lines will automatically get added now we can use the slider Library

so this makes it uh easy for making sliders inside react Chase application

so this basically contains uh property here first is behavior and this will be

tap and drag you can drag the slider or you can tap it step parameter is 0.1 you

can set this to any value range here we need to provide the

minimum and the maximum so minimum will be 0.1 x maximum will be five and

starting value will be 0 one so I'm am setting one right

here this needs to be square brackets not

and this is connect and on just close

it and if you just see guys there will be this slider which will be added you

can see that nice little slider and you can basically control the speed with it

and we also need to show there will be this method which will be there on update whenever you

change the slider this function will automatically execute I am calling this as handle speed change now we need to

Define this function and also guys uh we also need

to uh show the preview which value the user has selected for the speed and the

same thing we will do this for the rotation as well so I will simply copy

this one more time just to save some time I will paste it and this time it

will be for the rotation rotation

angle and once again the minimum will be zero and the maximum will be 360 because

360 is the maximum angle you can rotate starting will be

zero and this will I will change this to handle rotation change this function

and apart from that the step value here will be one like this that's all and uh we now

need to Define these two methods it will give me error so we just need to Define these two methods right here handle

speed change and also our handle

rotation change

so if you just refresh now there will be two sliders which as you select your GIF animation this is a speed and this is

the rotation so one problem is there if I change the slider I'm not seeing any value right here so now to see the value

being updated you now need to go to your jsx just after this give it a Break Tag

and uh we need to add a div here right here where we can

actually SE which value the user has selected in the slider you will show the

speed here so it will be directly here give

speed we have declared a state variable of GI speed X and comma for the rotation

as well we will directly be embedding this inside Cy brackets give rotation these

are state level variables we are doing it so I will simply copy this symbol for

the degree just paste it right

here so initial value gift speed gift rotation if you check in the UST State hook we have declared these two

variables which we are using uh give rotation and GI speed now

in these two methods we now need to set these so we will get actually get the

speed which is selected by the user we will use the this method pars float to actually change the value from string to

zero to string string to integer we will use this method and then we'll set this

set GIF speed to the speed which is selected by

the user and also set processed GIF URL will also be changed to

nothing same thing for the rotation as well you will get the rotation value in the

slider by using pars for this we will use parent values

zero and 10 set GIF rotation to the actual

rotation and set processed give URL to nothing that's all so now if you see uh

if you reload your application it is saying that values is not defined

uh sorry guys because values will be automatically coming right here in this

it will be coming right here as an argument to these functions in the slider if you see on update it

automatically triggers this function and it will automatically send this value as an argument right here so we need to

catch this right here so if you refresh now there will be no

error now you can see that the value will change right here 2.4x as you

increase the speed if you change the rotation angle it will automatically show the live

preview to the user that they are changing the slider value now we need to

Simply a button is required right here to

actually just after this in the Js

six two Brak TXS after this we will have a button right here Flex space X4 margin bottom 4

and right here we will have a simple button which will simply say process give and this button will have some

classes attached to it so PX4 py2 padding to in the

X Y Direction sorry background will be green BG green

500 and uh text will be in white white color text white it will be

rounded you can see Tailwind CSS makes it very much easy to Shadow medium

devices when we hover onto it so this is actually a pseudo class we don't need to

write additional CSS for this so if you just see there will be this button added

you can see that a green button and nice little interface is ready now we just need to bind a on

click to it so when we click this button of process GIF this function we need to

write which is handle process GIF this is the main business logic of this

application so whenever you click this function uh sorry button this function will automatically trigger we need to

now Define this function handle process GI

so inside this we will actually be using fmpg web assembly commands to

actually change the speed and rotate the GIF so for doing

this guys it's a lengthy function it's very complicated somewhat but try to

understand it step by step I will just show you how it works please hit that

like button guys subscribe the channel as well if you are watching it for the very first time and now we will simply

have a if condition right here first of all we will check that if the script is loaded and also if the input file is

selected by the user if it is both these scenarios are correct then only we will

execute and first of all we will make this value set is processing from false to true because we are processing the

file so now we need to show a pro sorry alert box to the user that the file is

processing so we will use use the sweet alert function right here fire and right here we'll pass some options the title

of the window will be simply saying to the user that the file is processing please wait so processing dot dot dot

and the next thing will be the text right here simply please wait while we

process our your

GIF the third parameter the user we don't want the user to close

this so we'll say allow outside click to false so the user can't close this window they need to wait for the

processing to finish and automatically this alert window will go away so this

function is very important the user will not able to close this did open it's a

simple call function it will simply show the

show the loading procress file so now if you try to select input

file change the slider value and click on this button you will simply see this processing alert window please wait

while we process our give now we need to now actually process the GIF and then

hide this once we are done so right

here we will now be using the fmpg web assembly Library it's a complete project

guys step by step I'm telling you please hit that like button share this video with your friends as well so we will

basically fetch the name and the type from the gif file input gif file will fetch the name

and the type so here we will use the fmpg variable and it contains this file

system module automatically in web assembly so FS stands for file system

and it has its own internal memory in which it can read write files so we will

first of all need to write this input file in the memory the name of the file

and it will be a Asing function we will use it a wait keyword so window. fmpg do

fetch file it's it contains this method fetch file and uh we will fetch this

file which is GI file you will see this error right here so just make this

function as async right here just make it async

because we are using a weight keyword right here first of all guys we are actually

fetching and writing this file in the memory using uh fmpg web assembly this

line meant by this you're writing the file and fetching the file in the memory storing it so after doing this now we

need to Simply set the out output file name so the output file name will be

output underscore GI

speed cross and you can set this to any name I'm just uh

dynamically making the name here GI rotation degree GIF you can name your

own name as well it's not that important then comes the major part now we will

run this Command right here fmpg do run it basically contains a run function so

this will actually run this command dynamically in the memory

so- I stands for in giving input file comma you will give the input file name

which is the actual name of the file so name we are actually you can see we are

providing it as an argument right here then then we will actually be saying uh

Dash filter Dash

filter complex underscore complex and

here this is actual command guys which uh I will copy this and then explain to

you that is little bit complicated so try to understand line by line so we are

providing the name of the input file we are providing filter complex in fmpg if you want to provide a

complex animation you basically write here Dash filter complex then we are

setting we using these Dynamic parameters whatever the speed and whatever is the rotation angle we are

dynamically changing the speed in the rotation dividing it by pi 180 it is

little bit mathematics going on and then the output file name right here so whatever we set this output file in so

it will do the magic as MPG guys will process your file and it will actually write the output file name right here so

just copy the command right here that's all now we just need to convert this

uh output file name to blob so that we can show it in the browser so it's very

easy we have a function inside fmpg files assembly now we we need to read

the file so we will simply say read file and we will simply say output file there

and then we will simply convert this into a blob URL again we'll use this function create object URL and then

we'll simply say new blob you will say data do

buffer and this will be type that's so

and that's all guys and then we will again reset this value to set processing set processed give URL to be

the actual URL which we got and then set is processing again we

will set it to false and we will close the this alert window which is

processing window so in order to close it in order to hide did we use the close

function this will close it if you see right here it will act change the values it

will do the processing and the window will disappear now we need to display that output GI file in the jsx so right

here just go to your at the bottom right here right

here we will once again have

a qu bracket and right here you will say process GI URL if the in output file is

there then only in that case it will execute

uh this is actually the button right here right here you can see

that lastly we just need to show this uh we'll have this condition process GI

URL give it a class name here of margin top

4

H2 Excel font semi bold margin bottom

two text Center sorry text

gray 800 and the title will be processed GIF

so you showing the processed give to the user so again we'll use the image tag

image source and this time it will be processed GIF

URL just give it a class name Tailwind class which is fth full Max wmd

it will be rounded LG Shadow

LG margin bottom

4 so if you just refresh try to select your GI file change the

values you can now see the output file is displaying right here guys if you try to open it in the new window it will see

now we also need to display a download button so that we can download the GI file automatically as an attachment

we'll have an anchor tag HF will be equal to processed GI

URL and it should download as a file called as processed GIF I'll give it a

class name which is PX4 these are all Tailwind classes py

two background will be blue 500 text will be in white color it will be

rounded and uh we'll give it a shadow and when we hover onto this BG blue

600 it will say to the user simply download

gu uh that's all guys and the application is complete if I try to

increase the speed change the rotation angle you can see that so if I click

download GIF your file is downloaded with the modified changes that you have done so it's a complete web application

guys that we developed in react CH using fmpg web assembly it's say GIF animation

speed and rotation editor by which you can actually speed up

or change the rotation angle of your GIF animation at the same time and uh I have

also deployed this app application on my website freem mediat tools.com you can purchase the full source code of this

project you will get full documentation after purchase you will get full commercial right to actually modify this

code or deploy this code on your own website as well so the link is given you can go to proc Cod store.com and

purchase the full source code and you will actually before that you can try the full demo the demo is deployed on my

website freem mediat tools.com you can check out the live demo of this tool before purchasing it and just upload

your GI file simply select it and it all the processing is doing in the background using fmpg web assembly the

nice thing about this Library guys it works in the browser no need of backend it works really in the front end and uh

it makes really things really easier for developing these kinds of applications

so please hit that like button subscribe the channel and share this video with with your friends and also my channel as

well thank thank you very much for watching this video and I will be seeing you in the next video