Build a Node.js Express GIF Editor to Change Speed & Rotate GIF Using Fluent-FFMPEG in Browser

uh Hello friends welcome to this live stream so in this live stream I will basically show you a tool that I

developed inside browser which allows you to change the speed and uh the

rotate GIF animation so this is actually the tool that I developed you will see on my website free mediat tools.com so I

literally deployed this tool on my website so I've given the link in the description of this live stream you can

check out this live tool right here so if you reload this application it will look something like this here you need

to choose your GIF animation file so I will simply choose my file here you can

pick any gif file so as you select this file will be uploaded and it will be shown right here so these are the

sliders which are given here for the speed and rotation so if you want to increase or decrease the speed you can

use the slider so it will you can see that so as I change the slider automatically it will change the speed

of the GIF animation if I reduce the slider you will see that the speed of the animation you can see that the

animation of the speed will be reduced so as I just uh change the slider you will see the speed of the animation will

increase and if I decrease the slider you will see the increase the animation speed will decrease so this is happening

due to fmpg library we are actually making a simple ax called The backend Express server which is actually doing

this thing as I changing the value of the slider and same thing goes for rotation as well

so here you need to provide the angle so if I provide here 45° and click on this

button rotate GI as I click the button you will see the animation will be rotated 45° and now you can see that the

animation has been there you will see that we can see it will be you can do

this for the speed use the slider or you can rotate it at any angle 180° click on

this button so your animation will be rotated 180° and if you are interested

you can download this file as well after you make the modification simply click the download button so your gif file

will be downloaded with those modifications which are you have made right here so you will see that so the

animation GIF animation has been rotated you will see that 180° you can choose any degree uh let's suppose 170° if I

choose click on rotate again you will see that you can pick any angle 35° rotate

you will see that so you you can change the speed so the GIF animation will

reduce so let's suppose if I want to pick this one which is this animation

you will see that so GIF animation

is speed is increased if I want to rotate this you can see it will be instantly rotated no page refresh is

there because we are using Ajax we are actually making a post request as soon as I change the values of the slider or

this uh rotation angle as I just change the value click this button it is making a post request to the backend server

which is actually using the fluent fmpg package for both the speed and the rotation angle so you will see as I

decrease the slider the speed will be decreased of the GIF animation so you can increase it as well you will see

that it increasing it is decreasing as I choose it's a very simple application guys I developed this in the browser you

can check out the link is description is given of this tool you can check out on freem mediat tools.com /g speed changer

the link is given in the description of the live stream so if you're interested in the source code of this application

guys I have also given the link you can directly purchase it the link is given from my website proot store.com and

after you purchase it you will actually get the zip file which will be this directory structure this will be the uh

JavaScript code for nodejs Express and this is the index HTML file so if you

need the source code you can also purchase it the link is given in the description as well so now let's get

started by building this application so if you're watching it for the very first time please hit that like button

subscribe the channel as well so first of all let me show you the packages that we are using for this application we are

using a package called as fluent fmpg which is essentially a nodejs binary for

fmpg Library so it makes it very much easy to use fmpg library inside your

nodejs applications so it has readymade methods which are available to you to actually interact with the media files

such as video audio and gift files so it's a very good package uh it has

353,000 weekly downloads are there so we are actually using this package and then we are also using the express backend

server which allows you to make this rest API which allows you to build this application that's all these are the two

packages that we are using and also for uploading files to the backend server we are also using Walter package which

allows you to upload the GI files whenever the user selects it and we store them inside the backend server

it's also a very popular package so first of all you just need to go to your

command line and simply install these three packages Express fluent

fmpg and also you need to install molter so these three packages you need to

install it I already installed it you just need to install it so what I will

do is that I will delete all the source code and start from scratch

this is our starting point of this application index.js file is there so

first of all I will make our backend server so I will simply require this uh

Express and we will make this uh Express

app we will be listening on Port 5,000 and we can simply say

Here app is listenting on Port 5,000

so we can just make a simple get route so whenever someone goes to the homepage

we will simply

load we don't need to write this because we can basically make a public directory just make it as static so express.

static public so here inside the public directory just create a public directory

here you will store all your static assets so such as index. HTML CSS JavaScript code so here we can simply

make a just change the title which is GIF editor and we can have a

heading so if you just reload this application just start this application nodemon index.js it will start your

backend server on Local Host 5000 if I just say Local Host 5000 it will show

gift editor you will see that so now we will need to actually build this

application using a bootstrap for making the user interface so what you will do

bootstrap CDM just you need to go to W3 schools.com and uh you just need to pick

the CDN for only the CSS part so simply copy this CDN just after the title paste

it so after you just need to uh use the

container class of bootstrap and inside this we will give it a heading which is GIF

editor that's all so if you just refresh now it will

actually in the you can see it is appearing in the center screen so after this guys we will actually have a simple

form we we can have this form but we can actually have an inut field right here

input type file so this here we will allow the user to select your uh

file gif file so this will be required by the user so we can basically give it a label

that choose GI file we will basically give it a

bootstrap class of form control and we will only be accepting GIF files so

accept gif and uh we will give it a ID of file input so that we can Target in

JavaScript so if you just refresh now there will be this input field edit choose gif file it will only be

accepting the GIF files and uh you will see that so now after this we will also

be having a slider and this input type range so input type range so here we

will be accepting the user to actually provide the speed so we will give it a

label to the user just to choose

speed and uh we will also be showing a Spam tag right here just to show you the

user which speed that they selected as they change the slider it

will show you the current value of the speed so you will basically give it an ID to

it of speed value we can basically change this using dynamically using

JavaScript so initially I will simply set this to 0.5 whenever you reload the page you will now see a slider is there

so whenever you change the slider it will automatically change depending upon whichever value that you select of the

slider so this slider input type range accepts some values so first of all we

need to give it a form control class or bootstrap and it has some values that you need to provide such as the minimum

value the minimum value will be 0.1 so you can't select values below that and

also we have the maximum as well which is 10 you can set accordingly of your own choice but this is more than enough

which is maximum you can select 10 value of the speed and step value will be there which is 0.1 so it will be

increasing by 0.1% every time that you increase or decrease and the initial

value will be if you reload this initial value will be 0.5 that's all or you can set it to five

accordingly just depending upon if you reload now initial value will be set it to half value will see five

so now I can move the slider but this value will not change because we need to write some Javas script code for that so

this is our speed and then we have our rotation so we need to allow the user to

actually choose the angle so this will be the input type number field where the user can provide the rotation

angle so form control again bootstrap class and we will give it an ID to it of

rotation input so that we can Target in JavaScript minimum value will be 0 degree maximum will be 360 so you can

rotate it the maximum will be 360 and the initial value will be zero that's

all so if you see there will be this input field added choose angle initial value is zero and uh the maximum value

is 360 and minimum value is zero and if you see we

also input type we need to give it an ID to it also

for the speed which is speed input that's all so after you do this guys we

need to have two buttons right here first button will be for rotating it so rotate GIF so whenever you hit this

button we will actually make a post po request to actually rotate the gift we given an ID to it of rotate button and

we'll give it a bootstrap class of BTM BTN primary so this will be in blue color and the second button will be to

actually download the modified GI file so download and we will be giving a ID

to it of download button and a class of BTN BTN danger which will be of red

color so there will be two buttons added if you see right here guys rotate gift and download so this is actually the

user interface is almost complete guys and after lastly we just need to show the live preview of the GIF animation

whenever it is uploaded so we will give it an ID to it of preview and after

this we can have that's all we also need to include the sweet

alert Library guys which is essentially a very important Library which you if you want to show some uh

alert messages if your file is very huge gif file then it allows you to show

sweet little messages on the screen for the user to wait for the processing to

take place it's a alert Library sweet alert Library so we have actually included the CDN for this if you see in

the script tag so also we need to use the file saer Library which allows you

to download the modified file as an attachment in the browser so file saver is actually a

JavaScript third party package which allows you to actually download the files as an attachment whenever uh you

can see that so this is actually a JavaScript library it can even be used

as a CDN so I just included the CDN right here these are the two third party libraries that we using and also we will

be including our client side code which will be present client JS what I will do I will

make a folder in the public directory JS and I will write my code in client JS this will be the JavaScript code so

if I just alert high world and check out refresh the application and you can see

now it is working because we included this file script.js client.js so it is working so now inside our JavaScript

code guys so first of all we need to get all the references so what I will do is that

document. add event listener so whenever the Dom is loaded Dom content loaded

this event will automatically fire when all the elements are loaded in the browser so first of all we need to get

reference to all the elements by using document. getet element. ID which is file input and also we need to get speed

input so we have given all the these IDs in the HTML guys so we will also give

rotation input

then we have our download

button then we have our rotation

button so very simple code guys we are just basically getting the references of all the elements that we declared in the

HTML by using their ID and also preview live

preview and uh we have got our rotate button let me

call this as rotate button uh also the ID that be given is rotate button if you

check in the index. HTML we have given this ID rotate button download button

see rotation

input so that's all and now first of all we will Target our file input so we will

add this listener so whenever the file is changed this event will automatically fire this call back function will fire

whenever you allow choose this file this event will take place so what here we

need to Simply make a simple Ajax call to the backend server to actually

upload the file so for making this request we will actually use the fetch API first of all we'll get reference to

the actual input file that is selected by the user so file input. files zero this will actually get this

reference and then we'll make a simple form data object form data object and uh new form

data and we will basically append this file so form data append and we will append this file which is selected by

the user and uh now we will simply show the loading progress part to the user if

the file is really huge in that case we will use the sweet alert Library which is swell.

fire and here we can provide the title which is uh of the window which is uploading

GI HTML will be please wait dot dot dot

and so you can't click outside to actually close this so allow outside click property will be false so you

can't close this by clicking it so we have show confirm button will also be

false did open it will be a simple call back function here and here we will

simply show this loading essentially it will show this loading progress bar whenever you do it

now we will simply make a fetch API call so we will basically call this as

SL upload in the backend server we will actually make this end point where we will allow the user to Simply upload

this GI file this will be method will be post and body will pass this form data

and this will actually return a promise and this response will be coming right here you need to Simply convert this

response to Bon and this will again return a promise and this data will be

coming and now we can simply console log the

data so we also need

to just have the catch block as well if any sort of error take

place you can console log it and also we need to uh

have the finally block as well in that we will be hiding that progress bar so

we can simply hide that progress bar whenever your file is uploaded so we can

simply say uploading upload loading do close it will hide that bar that's all

so now we just need to make this fetch API call which in the backend server so

here first of all we need to include some middleware which is uh express. URL

encoded extended to false so this is required whenever you are working with forms body partel

middleware is required so express. Json so these two lines are required for if you're making an application which

involves HTML forms so this is required in the backend server you need to write these two middleware lines which allows

you to actually get the values which is selected by the form so these two lines

are necessary you need to write these two lines which is actually a body pass the middle so after you dri this we will

include the molter library which allows you to upload the file so molter so here

we will actually configure the Storage storage is essentially where you

will be actually be storing the files so molter provides this method dis storage

and here you will provide the destination where you will be actually be storing the file so request file call

back so here we will be providing the location so you will be storing it inside the uploads folder which will be

there in the public folder so public SL uploads so in the public folder you need to make a folder called as uploads so

here all your files will get uploaded so public SL uploads the second property is

the actual file name so what file name it will be given so request file call back and here again we will be giving

a unique file name so date. now so every time this value will be unique so file

do original name this is actual storage that we provided and now we can simply

make uh call the molter library pass the storage whatever the storage that you

define so we actually use the molter

function and provided the storage engine that's all so after we will actually make this

uh post request which is SL

upload so this we are calling it in the HTML file guys you will see that we are using fetch API and we are actually

making a Ajax call to this backend endpoint which is/ upload so right here in this we will actually be passing this

middleware which is upload. single it will first of all upload the file for US

upload file so this file it's a name parameter right here which you provided

right here in the right here this needs to be the same right here in the append folder whatever that you provide right

here file this needs to be the same right here so upload file so right here

we will declare a variable Global variable which will be original path we

just declared this variable we will use this variable in our code we will guess

original path is equal to request. file. paath and again we will be declaring

another variable which will be file path path dot for this we need to have our path

package like this so original path will be the actual

path and from this path we need to eliminate our public folder

so for that we can simply get the relative path path. relative public

and request. file. paath and then we can simply return this

as a Json so response. Json file path so it will actually upload this

file guys and it will return this path as a Json response back to the client site code so here we will be showing

this console log message data and let me try to refresh this application choose my GI file and uh you can see it just

happened uh the the file was pretty low and you can see the file is uploaded and

you will basically see uh in the browser this console log message will be

found a object is released and it contains this file path it Returns the full path of the file which is uploaded

which is there in the uploads directory upload SLG so now we just need to show this file in the browser in as a live

preview so how we can do that it's very simple so we have made this uh in the index

HTML we have given this diff which is we have given an ID to it of preview so what I can do we have actually have this

element so we can basically show it we can simply after this we can say

preview. inner HTML is equal to we can have a image tag image source is equal

to so we are using backtick symbol to actually dynamically put this data dot

file path we can close

this you can give an ALT parameter as well

review so if you refresh now if you select your file it will be shown in the

browser you will see that as a live preview so with this help of this code we are actually showing the live preview

so after that guys what we need to do is that we now need to make our speed input

so let's suppose if you change the slider we need to update the GIF with that values that you provide we need to

increase the speed or decrease the speed of the GIF animation so for doing this we actually we need to bind a

input for the

speed so right here

we can basically make a speed input we have have this element we can add an event listener to it of change so

whenever the slider value changes this event will automatically fire and right

here we can basically get the value of the speed input speed input. value of

the slider and we can say speed value do text content will be equal to speed

so we have actually given this pan you can see that we have given this pan an

ID which is speed value so we need to get get this uh speed value document.

get element by ID speed value so if you just

say speed value speed value do inner HTML

speed value do text content is equal to

speed speed input

dot uh if you see we have given this ID which is speed input input type range

speed input I just need to refresh here you can now see guys as I'm changing the

slider value it is automatically refreshing the value you will see 8.7 if I decrease it 0.6 again if I increase it

so you can see dynamically is it updating so whatever value that I select right here maximum is 10 and minimum is

0.1 so you can just see the automatically if I increasing or decreasing the value of the slider it is

automatically reflecting back inside the span time so now after doing this we

just need to after we get this value of the speed we need to just have a if

condition that if the value of speed is uh zero in that case we can simply say

to the user D speed can't be zero so we will not execute this code so we can

simply say return just for the safer site we are having the safe condition and then after

that we can simply again show a progress part to the user again this progress bar will simply

say processing give all these methods will be there you will

see we using sweet alert again the title will processing GI please wait so if

your file is pretty large in those cases it's very much mandatory that you show to the users some kind of a message so

that user can't navigate to a different page so it is very useful for user engagement so user Can See Clearly that

your processing the GI so after you show this message we'll make make a fetch

call SL speed to actually uh change the speed so

we'll make this method this will be a post method and we need to put the

headers we will send some information so this content

type will be equal to application SL Json because we are sending some Json

data that's why this header is important guys if you don't give this header you will get an error inside the body will

basically convert json. stringy and we will put the speed

will we will basically send this speed value whatever speed that we are getting

right here you will see speed we are sending it as a Json value so that's all guys after it

returns again a promise we need to convert this value to

Json or we can need to convert this into blob guys so sorry so this response will

be coming and here you can simply say if response dot if response is not okay in

that case we'll simply show a error message to the user that Network response was not

okay if no error take place in that case we need to convert this into a block so response.

block and again it will return a promise and this time we will actually get our

blob so that blob we can show that on the

screen just need to Simply console log it just to first of all make the backend

code so now we need to basically make this uh backend request which is inside

app. poost

speed so right here guys uh inside this

so now for this we need to import the fluent fmpg package so fluent

fmpg just make a variable require this Library fluent fmpg we installed this

package so right in this we will basically get the value speed request. body. speed after getting the value we

can simply declare a variable chunks and uh we can basically make this uh process

fmpg call it pass this original path that we stored if you see we have declared a global variable and we are

storing this original path request. file. path so whenever we upload the gif file so this path is stored inside this

variable so now we can use this variable in this fmpg method so this basically

contains some methods fmpg output options we can provide

this and this we can basically provide a filter Dash filter V and for the speed

we can say set pts and this will

be 1 divided by the actual speed

value and then we need to multiply this by pts that's all this is

actual mathematics that we need to use guys to actually increase or decrease

depending upon the speed value if the speed is larger in that case uh speed

will increase or if the speed is lower then the GIF animation will be

slow so after this this contains uh a on method which

you can basically listen for if any sort of error take

place we can say that a return a response 500 we can say error occurred

during processing if no error take place then we can

basically fmpg process. on and so if the

processing is completed then this automatically will execute this event end and here we can basically convert

the our output file to a buffer so we can say buffer do concat

and then we can provide chunks so chunks is actually the variable that we declared currently it is empty but uh

this buffer will actually have this chunks and we can say response. end

buffer so after that whenever we get some data this event will take place data and this chunk will be

there and you can simply push this chunks this push method is there in the arrays you can push the data right here

chunk which is there so whenever it is simply a pro process guys because we

don't want to create the output file in the backend server we are simply creating the output file from a blob and

then we can directly send that block back to the client site so we can also show a progress bar

as well so fmpg process and it also has this progress event

so this progress will be shown right here in the console log if you want to show it

processing you can show a progress

percentage like

this so lastly guys we just need to send this to back to the client response

right head and 200 status code and right here in the object we will simply send

content type so extension will be this will be a image GIF animation so image

/g this you need to set before sending the response so right here you say fmpg

process dot we need to convert this into a format called as GIF and then we need

to pipe this response so dot pipe to the response and then end will be false

WR this you can see that that's all that you need to do guys it is sending this uh GIF animation output GIF animation as

a blob and we are basically catching this blob you will see we are converting this to a blob and we are console

logging it if I just refresh here and try to show you if I select my GIF animation change the speed processing

GIF if you see please wait it is showing this one and it is saying network response

was not okay if I see uh fmpg Doon is

not a function on line number index 53 let me

see F sorry this needs to be fmpg process

sorry so again if I refresh here change the speed you can see

processing GIF again some error take place I think

now you can see that guys a blob object is returned to us which is this size is one type is image/ GI we need to hide

this processing GI message as well guys for that we just need to go to client.js and if you see uh we can have this uh

finally block copy this and paste it right

here so if you refresh now uh do this so you can see that so

now to reflect this now to reflect this live preview what we can do is that we

can uh inside

this now to show this SL preview console log blog after this we Cano you can

basically say object URL we can create

URL create object URL and we can pass the blob as an argument it will construct

this URL and then we can say preview do inner HTML and then we can simply inner HTML

will be equal to the image tag again image source and this will be equal to the

object URL that we constructed

so that's all that we need to do guys we have this method in JavaScript if you want to construct an URL from blob we

have this method called as create object URL we are simply using this to actually get this object URL and then we are uh

appending it to the image tag so if you refresh click on this

uh so if I want to decrease the speed so so I think

uh let me see what is the problem it is saying

that the blob is not fine let me see I think I made some error here uh console

log blog

index.js

image/ so the full source code guys is given in the description so what I will do is that I will not waste your time I

think I made a some typo mistake so I will simply copy this

code I think some tyo mistake is there and

uh paste it this is the actual thing right here

and so this code is correct guys this code is correct if you see it is pushing

it and I think

some uh speed input is

in programming guys sometimes you can make mistakes so what I will do I will

simply paste it uh format the document this is you can

see that we have speed input we are getting the speed input value

speed all this thing is there and if I refresh

it now you can see that so as I you can see that uh the reduce GIF animation is

speed is reduced you will see that if I want to increase it now you can see that

the speed is increased you will see that so using this technique guys the

advantage is that we basically don't create output file every

time if I just uh D so these files are uploaded whenever you upload your files

so now if I upload my file so this file will be uploaded in the uploads folder

you will see input file so the advantage of this if I decrease the slider the

GIF animation will decrease the speed will be decreased if I increase the

slider it will increase so every time if I make the change the output file not be it will not be created in the backend

server it will simply be converting into blob and we are basically using Ajax to

actually showing this output GI file this is the advantage of this technique we are not every time creating this

output file so this reduces speed so this increases speed and also so you

will see that so this slider is working guys you will see for the speed GIF animation you can do that very

easily and now I will come to the download part so if I want to download this uh modified changes so what I will

do uh just go to your we have this button called as download button we can

bind a onclick listener to it so whenever we click this button what should happen

so whenever we click this button we should download the image file so preview image

preview dot query selector image and uh we can basically construct

this URL which is from preview image do source

and then the file name whatever file name that you want to give which is result. give and then we can say fetch URL and

uh it returns a promise response you need to convert this

response to

blob and again it will basically have the blob right here and uh we can save

this save as we just need to invoke this method of of the file saver Library pass

the blog with the actual file name that you did file name that's all this will

actually download the modified changes guys if you do

this if you click download the file will get downloaded you will see that the GIF

animation speed has been increased you will see that if you want to decrease

it click on download again it will get downloaded the size will be increased

because the GIF animation speed has been decreased you will see that so in this

way download button is working so now we come to the rotation part rotation part is very easy guys again we just uh want

to do the same thing that we did for Speed

again I will simply copy this the format is very simple guys for

the rotation as well we will actually get the rotation part we will bind this listener to

it so if you see we are doing the same things we are getting the value of the

rotation angle rotation input do value whenever you click this rotate button

this bind we are binding this on click event handle we are showing this uploading progressing processing GIF and

then we are making a fetch call which is/ rotate it will be a simple post request we are passing this rotation

angle as a json. stringy F and then we are actually getting a blob again

creating create object URL again inside updating this image image source object

URL and then finally hiding the uploading progress bar that's all and

now go to your this one uh this will also be the same I will simply copy this part which

is

paste it and here we just need to modify something this will be for

rotate we will get this angle request body R angle change this to

angle and original path we will get this because we are storing this original path in a global variable we have

declared it so that we can use it in different functions and this line will change guys output

options for the rotate option fluent fmpg do provides us for the rotation as

well fmpg have all the methods

so this will be video filter not Dash filter so Dash video filter and this

filter will be uh actually for rotating the GIF this is rotate angle OB rotate

angle or rotate angle so angle value that we are getting you will see that

dynamically and again this process will be the same we are sending this value right

here this will be the same so again if you refresh

now 45° I want to rotate

it so it is saying that speed is not defined

sorry this needs to be

angle if I provide 45° click on rotate you can now see the GIF animation has

been rotated click on download and now if you see it will be downloaded as a rotated GIF animation so we have do for

everything guys if you see for if you want to reduce increase the speed of GIF animation right in the browser if you

want to rotate it with a specific angle just provide it click on rotate GIF it will be rotated then you can download

the GIF animation you can check out this tool guys I have deployed this tool on my website free media tools the link is

given in the description if you want the full source code you can directly purchase the full source code of this

application you will get a zip file after you make the payment from Google

Drive this ZIP file you will get from Google Drive after you make the payment so this is actual directory structure so

if you're interested the link is given so please H that like button subscribe the channel and I will be seeing you in

the next live stream