Build a React.js FFMPEG WASM Video Timeline Editor to Trim & Cut Videos in Browser Using Javascript

uh hello guys welcome to this live stream so in this live stream I will actually building a video editor inside

react CHS using fmpg web assembly library and uh I have deployed this tool

on my website freem mediat tools.com so you can check out the live demo of this

tool and basically it's a video editor kind of application where you can actually select your MP4 Avi all

extensions are supported you just need to select your video file and uh if you go to free

mediat tools.com this is actual latest tool that I added on the website if you navigate to the bottom side section of

the website you will see this is actually the tool right here Advanced video trimmer and cutter editor if you

just go to this tool so this will be the UI of the tool user interface and you

will have this choose file button and here you need to select your video file

so the maximum amount of video that you can upload is 2 gigabyte so this is

actually the limit of fmpg web assembly Library so you can select video files up

to 2GB so let me simply select a video file so as you will see as I selected

the actual video file it has shown the input video file in a video player and

also we have a simple timeline here where you can simply select whichever portion that we want to trim or cut

inside this so the nice thing about this editor is that it allows multiple cutting operations you can just

cut whichever portion that you want by using the mouse here you can drag this timeline here let's suppose I want to

cut this portion from you will also see the start duration and the end duration right here if you just navigate these

sliders right here let's suppose I want to cut this portion right here and you will need to click this button of add

section so if you click this button you will basically see one section has been there now you can do another section

right here you can do multiple trimming right here at simultaneously at one time let's

suppose I want to cut this portion as well simply click add section so now there are two sections out there

now again I need to cut this portion as well from 411 to 434 so three sections are there and

lastly I want to cut this portion as well you will see overall we have provided four trimming operations that

need to be processed by fmpg so fmpg will go one by one first of all it will

process the section one then section two then section three then section four and then it will concatenate and merge all

these trimming that you have done into a single video so that you can download it

so now you simply need to click this trim and merge button so you will see this alert window appearing that

processing your video is being processed by fmpg so please wait on this page so you will see this uh notification will

come your video has been processed successfully and now if you see this output file will be there so the length

of the output file will be 1 minute 21 second you will see exactly what you have

trimmed here you can calculate here so this is actually uh if you play this file

here you will basically see you can play this file in this video

player let me turn on the volume is also present I increase or

decrease the of the of theft with this application I have you can see that

multiple trimming is allowed here you can just uh cut multiple sections if you

want to concatenate into a single video file we don't need to upload every time just trim portion so this allows

multiple trimming you can do it inside timeline just select the portion click this button of add section and it will

add all these sections right here and then simply click this button of trim and merge so it will basically process

each section and we are doing it inside react CHS it's a fully fleshed single

page application and you don't need any third party editor or a desktop application you can process your videos

entirely in the browser by navigating to this address uh this application that I

deployed here and in this live stream I will show you step by step on how I developed this application from scratch

so if you also need the full source code with with documentation you can purchase the full source code from my website

procot store.com the link is given in the description of the video so after you purchase you will be automatically

be redirected to Google Drive where you will actually get the documentation and how to use this project how to deploy

that each and every instruction will be there you will get a zip file and this is actually the source code of this you

will see that it's a pretty lengthy project around about 300 265 lines of

code is there so it's a lendy project so if you need to purchase you the link is

given in the description so now I want to tell you the techn

techologies that I used for building this so the very first thing I used is react Chas as you all know it's a UI

library for building user interfaces number one Library UI framework so we are building

it inside react chairs and also we are using fmpg web assembly Library fmpg as

you all know it's a open source audio and video processing Library available

in the command line but this fmpg do web assembly allows you to use this awesome

library right directly in the browser so you don't need fmpg installed in your

machine you can directly use it in the browser using this software called as fmpg web assembly we will be using this

also these are the two technologies we will be using in this project so now let's get started by building it so I've

already created this react Chase project using a v development environment so what I will do is that I will simply

delete everything from here let me just create a file right here uh

just store this and just delete everything from

app.jsx just make his functional component and simply write here hello world so if you just refresh now it will

automatically refresh and if you go to Local Host 8173 by default it runs in this for

number so just need need to refresh it npm runev we are developing it in the

local environment 5173 sorry this is 5173 so you will see hello world is

printed out so if I show you the package.json file we are just using One external

dependency to for the sliders that you see inside the application the name of the LI library is no UI slider Das react

this is specifically made for using these sliders that you see if you select your input file in order to this is

actually the timeline these are the sliders that you see right here so now to use this we do need to install this

third party Library so if I show you the package name which is no UI slider that

Dash react so it specifically made for react Shar so this is actually the

command here simply navigate to the command line and simply install this package npmi no UI slider this is actual

command so after you do this simply start your

development environment so we will basically write step by step guys so just I navigate to

app.jsx so so the very first thing we need to do right here in this project is we need

to import all the libraries so the very first Library we will import is no UI

slider from no UI slider - react for the sliders and also we need to uh import

the CSS f file as well so this is present no UI slider. CSS we have

imported that also that's all so after this we just need to declare a global

fmpg variable so we will be initializing the fmpg web assembly Library so for

that you just need to declare this Global variable outside your app level component so just declar that and now we

will go to the jsx part right here and we will simply be using Tailwind CSS

I've already included uh inside our HTML file the CDN of Tailwind CSS so just

include CDN or you can simply copy paste all the minified code of Tailwind CSS CDN so just included inside index HTML

so that we can directly use it inside our react Chase project so we'll give it

some Tailwind classes right here which is app padding 6 P6 background color will

be gray the shade will be 100 minimum height screen Flex Flex column item

Center and inside this we will actually be having a simple

heading The Heading size will be 3 XEL and font will be

bold and margin bottom six the color of the text will be in

light gray text Gray shade will be 800 and uh the heading will be simply

video trimmer editor so if you just reload your

application you will basically see here this heading is showing you right

here at the center of the screen and we have a light background gray color as well so the nice thing about Tailwind guys

you don't need to write external CSS you just need to there they have readymade classes available so you just need to

directly attach these classes to the HTML so no need to write external CSS

this saves a lot of time in development and after this you need to have a input

field where we will allow the user to actually select your video file and

we'll give it a class name of margin bottom 4 padding to and we'll give it a

border the color of the Border will be GRE 300 and uh it will be rounded on medium

devices and also Shadow on medium devices small devices so responsiveness

is also built inside these classes you can build responsive websites using Tailwind CSS as well no need to write

external CSS so it will be margin bottom four and also we also need to attach on

change event handler as well so whenever you select any file this event this function will automatically trigger

handle file upload you can name any anything of your function I will name it handle file upload so I just need to

Define now this function right

here so this event will be passed

automatically so now we just need to Define our state variables guys which we will be using for this application first

will be the end time you will be using UST State hook for managing the state of

react Chas application so it will be zero and similarly you'll have the start time as well set start

time these are all the state variables you using new state again zero initial value will be

zero and video Source this will hold actually your input file

Source initial value will be nothing

and then it will be video file value set video file value so this is

responsible for storing the actual input file which is selected by the user again

the initial value will be nothing and then we will have uh a Boolean parameter simply check if the

fmpg script is loaded in the browser or

not so the initial value of this Boolean parameter will be false because we

haven't loaded our fmpg library so this will be

false and uh then we will have a video trimmed URL the output that we will show

to the user when the processing is done this will be stored in this variable so the

initial value here will be null

again so then we will also be having a way to actually store all those sections

that you add if you want to add multiple sections we need to add them so this

will be a simple array the initial value will be empty array so this will be empty array when you load the

application for the very first time so this will be responsible for storing all the trimming operations that you will

perform inside your input video so this will be a empty array and lastly we also

need to have a video f a reference to our input video for that we will be using the US ref hook of react chairs so

you will see at the top it will automatically be imported from react the Base Library so you will see that so

these are all the state variables that we have declared guys for react CH application for managing the state of the application and apart from that we

also need a one more variable which is initial slider value so whenever you

select your slider value uh this initial value will be zero whenever you open the

application for the very first time so we have declared all these variables one more thing we need to initialize our

sweet alert Library as a global

variable so if you don't know about sweet Alert 2 it's basically a alert

Library all these alert messages that you see the the video is processing the

video is processing done so this alert message that you see it is brought to

you by a sweet to library so we are actually imported the

CDN of this Library so you just need to copy paste the CDN of both JavaScript and CSS inside your index.html I've

already included the CDN and that's all we just need to declare this uh comment

right here if you don't declare this comment you will get a error so just declared this comment right here at the

very top to prevent some errors so

just as it is write this that I'm writing right

here so again this will be a global variable Global

swell so just write these two common lines in order to use your alert

boxes uh now we just need to load the fmpg web assembly library in the same

channel guys in the previous video I use the fmpg web assembly library to

actually code a gif editor if you haven't watched that video please watch that video I basically started from

scratch I just told you how what is fmpg web assembly Library how I loaded that

Library so I will not repeat this same process once again it's

a it's not uh it will basically waste time so I will simply copy paste this

code you will get all the source code whenever you purchase it so we are actually using the use effect hook guys

you will see that use effect will you need to import it from The Base

Library so I developed that code at GIF editor right inside react Chase so if

you haven't watched that video it's a hour long video so watch it first of all before watching this

so in that video also we I use the same code right here to actually load the F

of MPG web assembly library from this URL and uh we now need to actually make

this function which is load script so this will essentially will actually make

a simple Dynamic script element and load this uh Source rare right

here so we will simply Define this method you will see that it is taking

the source as an argument and returning a promise making a script element dynamically and making it a async deer

and setting this Source attribute like this so and then lastly we are adding this

element to the Head element that's all so essentially we have used the same code in the previous video as well so if

you want to watch it the previous video that I uploaded on this channel so watch

that before watching this so now if you reload your

application go to the browser you will actually see go to Local Host 51

73 and uh if you go to inspect element you will basically see the fmpg core

library has been loaded we are using version 0.1.2 11.2 so all these core libraries

have been loaded in the browser inspect you will see that so this confirms we

have successfully loaded the fmpg web assembly library now we need to write

this handle file upload so whenever we select the file we need to sub first of

all e. target. files get access to the file that we selected and then we need

to convert that into a blob URL using url. Create object URL so this is

available for every browser this method we take the file and convert this

into a blob and now we'll simply set this set video file value to be the file

and set video source to be back ual blob URL so here the this video Source it is

simply set by using this uh usate hook method now we need to display this video

Source in a image tag so that whenever we select any file this video file will

be displayed to the user coming back to the jsx we will simply be writing a

simple condition right here inside cly bracket we will have this condition

if the video Source variable is there then only execute this code inside

parenthesis so we will have this and inside this we have the video

tag and so the source is equal to video

Source reference we will provide the video ref that we declare

variable I'll give it a class name so these are all tailin classes margin bottom W full Max width on medium

devices it will be rounded Shadow LG it will be having the

controls of the video player such that you can play the video pause the video all that stuff view the video in full

screen mode as well so there is uh if you just reload your

application choose any video file and now you will see that the video is displayed in the video player so that

the user can clearly see which video the user has selected so it is displaying

this conditionally so whenever you select the video it is displaying it in the video player so the now the next

task is that you need to Simply attach this ontime update event handler so I

will simply call this function as handle pause video so just need to make this function

right here essentially what this function does is

actually let me write this function right

here so for the time being just declare this function we will come to later on

so after this video we also need to display a slider as well for the timeline to actually trim the video so

just write after this uh video tag just after

this we will have another div tag right here and this time we will give it a class W full the slider will have full

width you'll use this Library which is no UI

slider and it has some options right here in this Library we have some options which is the behavior which will

be tap drag the step value will be I will

select as one the range so range is important you need to select the minimum value that

you can select is zero and the maximum value you can select is present inside the video duration

so max value will be video duration or two so this variable video

duration we need to declare and also the start it will be

started from zero up till the video duration so video duration will actually

hold the total number of seconds which the video has connect and also it has a on update as

as well so whenever the value is changed of the slider this function will execute

uh just calling this function as update on slider change so whenever you change

the slider value decrease it increase it this value will this function will automatically trigger now we need to

Define this function right here on update slider

and for this duration variable that you seeing right here this video duration we need to actually write a use

effect hook right here again a use effect hook this time this will be

dependent upon one variable so inside second parameter so this will be holding

video source so this is dependent upon the video source so whenever you have

selected the input video file then only this use effect will execute so this is dependent upon this

video source so whenever this variable has some value then only this use effect will execute and now inside this use

effect we now need to actually get the input video

ref and if video ref if the current video has the current property right

here in that case only this code will execute and we will get access to the current value current video which is

selected by the user by using this current property and then we will calculate the duration of the total

video so we have this uh event right here on loaded

metadata we need to find the metadata about the video set video duration so I think we

missed a state variable which will be responsible for storing the video

duration so just declare it video duration and set video

duration initial value will be zero so here we are calling this function right

here set video duration and we are basically saying current video

duration and also we are setting the ending time as well set end time to be again current dur the duration of the

video that's all so now this uh video duration that

you are accessing right here it will be

available so if you just see if you select your video file they will see

basically uh it will actually the slider will be prepopulated with the total

number of uh seconds that the video EX so the video is 6 Minute 20 seconds long

video so automatically the slider will be having the end time equal to 6 Minute 20 seconds so then you can actually

navigate to whichever portion that you want to trim your portion this is actually the logic

behind it you do need to prepopulate your slider to the total duration of the

video and after doing this guys we also need to initialize this update slide

change value so whenever you change your slider this automatically these two

variables will be passed inside this function values and handle and then we need to Simply say

set video trimmed URL to be nothing and then we will simply read the

value from the slider and if handle has some value in

that case we will read the value we initialize this read value to be values

handle or zero and we will simply check that if

the end time is not equal to the read value this simply means that uh if the

slider value is less than equal to end time of the video then simply set the end time to

be read

value or if the handle doesn't have any value in that case the read value

will be coming this is slightly complicated code guys but we are simply fetching the

value which the slider that you move from left to right so we are simply

setting the end time and the start time in this function so you simply say

initial slider value which we declared this variable we

have declared early on if you see inside here initial slider value is zero this

is the start time that we are setting here we are Simply Having a if condition that if it is not equal to the read

value then in that case initialize it to the read

value and simply have a if condition right here video

F video ref do current and then we'll simply say video

ref dot current dot current time is equal equal to read value and

then we need to set the start time as well like this set start time to be read

value so we have set the start time and the end time you will see that in this function that's all that we want in this

function and also after we said this we also need to show the live preview of the slider

whenever we change the values we also need to show what is the start time what is the end time that the user has

selected so right here just after that you have the

slider just after this you again have another div so here you will show the live preview of the start and

TR and we have the start

duration and for this we need to declare a simple function guys we need to Define

we need to convert this into this format hour minute second so here we need to

pass the start

time this is actual code right here so let me copy

this so it will say the start duration and the end duration so for this we need to actually make this method which is uh

convert to so this method is responsible for converting your time that you select

into this format our minute and second so just declare this method

uh like this is actual method so it will return this uh time in this format in

the specific format that we want so if you just refresh now simply select the video and if you

change right here you will basically see the start duration it will show 1.45 end duration is exactly equal to

the total duration of the video so that's exactly I'm talking about so if you also change the end duration it will

decrease as you decrease the slider value if you increase the slider value will increase and also it is reflected

here also so our state variable side binded here inside react Chas

application now we simply need a button to actually trim this portion using web assembly library of fmpg so after you do

this we also need to have a trim button so

that just after this we will also be

having a button which will be first of all there will be a play button if you want to play the

video so whenever we click this button we will Define a function which

will actually start the video handle play we'll give it a class name PX4

P2 background will be blue BG blue 500 text will be on white color

rounded these are all Tailwind classes it will have Shadow

so when we over onto this button it will change to

600 so we inside this we just need to Define this handle

play and just after this button we also have a second Button as well which uh

basically allows to add the section

so we have this

uh inside this div sorry so just the buttons will appear side by

side so these are two buttons for playing and then adding the section handles add section so we need to Define

this function as well

so these two functions are responsible for actually playing the video so for playing the video it's very simple we

will first of all getting reference to the video ref if the video ref contains the

current property then we need to Simply play it so video. current. playay there

is a play function which will actually play the video file whenever you click this button and then the second function

is uh handle add section so here here we will simply use the hook function of set

sections and we will simply basically adding it to the empty

array will dot dot dot so this is actually the previous array and we will add it this object which is having the

start property which will contain the start time and the end property will

contain the end time and the third property in this object will be the actual file

name which will be Dynamic

section it will look something like yeah section and then we have

this sections. length +

one do MP4 this is actual file name we are

dynamically putting a file name as a third part argument in this object and

we are adding it to the sections array which is empty by default so we are actually adding it whenever you adding a

section using this button if you just see you will see now the there are two buttons out there if you simply need to

add the sections one section will be displayed there will be two sections now we need

to display these sections right in the browser how we can do that so just after

this we do this we have the jsx right here

so right here we will have this condition curly bracket we will simply

say if sections do length is greater than zero then in that case we need to display the total number of sections so

here we will actually be using a for Loop mb4 text

grate and it will be 700 and W full

Max width medium the title here we need to give it a title right here which is

sections text Gray 800 so now inside uh after this h2 tag

we need to have our UL tag and here we will we simply map sections. map and for

each section for each section we will have

the Alli tag right here and we will basically give it a key here which is

index and here we will have our section we will display the section right

here index + one and then we will basically be simply

be displaying uh what with which duration you have selected the

section which section you want to trim so again we'll call this function to actually display the time so section do

start there is a start property as I showed you so whenever we were inserting

the values in the array we have three properties start end and uh the third

one will be the file name again we have convert to this time section.

end so we are displaying the start time and the end time and uh if you just reload and select your video file and

let's suppose you want to select this portion click on ADD section one section will be displayed so again the second

section the second section will be displayed you will basically see 1.01 to

1.33 there will need to be as little bit space right here so what we need to do

right here

so if you just reload right here

so now you can see it is displaying perfectly so you have selected this portion 2.12 to 2.25 so the section one

is selected if you want to now trim another portion this portion the second

selection will be there 3.55 to 4.08 so now we need to have a third button

displayed right here after this to actually trim this and concatenate to a single file and trim this video based

upon the section selected now after this we will be

having a button right here right here after this

so if you see basically here uh just after

this we will actually be having a button right

here just after this there will be a simple button and uh the text will be

simply trim and merge and we are basically attaching this onclick event handler to it so whenever you click this

button now we need to simp l define this function which is handle trim so we will

Define this handle trim so whenever now you click this

button we actually need to assign the use the fmpg web assembly library to

actually go all the sections one by one and actually concatenate the video so

for the very first time we'll simply say if the script is loaded if this value is true in that that case we will simply

show a alert message to the user by using sweet alert and here we will simply show the title here which is

processing dot dot dot and the second property here will be

HTML please wait while the video is being

processed allow outside click this property will be false we we don't want

to use it to close this and lastly we have did open and this will actually

start the show loading function that's all so

if you see now uh basically select a video and

uh click on that you will see this window process processing please wait while the video is being processed so

now we need to hide this also when whenever it is finished so for hiding it first of all we need to do the

processing so we need to actually extract the name from the video file

value and we'll extract the name of the file and then just make it Asing

function this is actually a Asing

function just write here so it's Asing function so that we

can use it a here so it contains a file system module inside fmpg web assembly

so we will be writing the file in the memory with this name and then you'll simply say window. fmpg do fetch

file to actually F fetch this video file value the actual value the actual video

file which is selected by the user so we are fetching it and writing it in the memory so here we don't have any sort of

backend server fmpg web assembly Library works in the memory so it actually fetches the file input file and read it

write it in inside it using this function which is file system after this we now need to

actually go to all the sections that we selected sections is actually a array we

will Loop through each section and actually fetch the start time end time and the actual file name of each section

like this and then we will simply run the command of there is a run function right here in fmpg web assembly

similarly - I we will provide the input name of the file and then there is this

Command right here- SS for starting time what you need to trim and you will

simply need to trim you will convert this to the time period

start and uh we will simply say again this flag will

be dash2 again you will convert this to end time

like this and this is really important we don't need to re-encode the video so you'll simply say- C colon V and inside

this we'll copy the settings so this will speed up the process we don't need to re encode the video in fmpg so it

will speed up the process we just need to write copy right here and then the output file name so output file name

will be file name that we put right here file name you will see this this

will be this for each section we are actually executing this

command so after this Loop right here we will simply need to

concat or merge all these sections into a single video and then show it to the

user so it's very easy you'll simply say concat list and sections. map and for

each section we will simply be you will simply say

file and inside section. file

name in single quotes this is actual thing how we can

concatenate and then we need to write just use the join function to actually

do it in a single line so we are simply appending the new line character

so this will actually form this file and now we need to write this file in the

memory so file system once again we'll write this file write file and we will

basically give it a file name concat list.txt and the actual data which will be concat

list so it will go to each section and it will basically do this every time and

then we will write this file concap list.txt to with

this so after this for merging it it's very easy a Wait fmpg

run- f we'll use the concat filter and dash save

z- I concat list.

txt Dash C again for encoding we need to copy it and lastly the output file name

which is output. MP4 you can call this anything and then we need to show this output file name in the browser so

you'll simply say file system you will read this file because now we are reading the file

we are not writing it so that's why we'll put read file right here we reading the file the output file name is

output. MP4 and then we are simply need to convert this into a blob URL so we

again use url. create object URL new blob and this time it will be data.

buffer and then it will be type parameter which is a MIM type video/ mpp4 that's all lastly we need to set

the video trimmed URL to the actual blob URL which we constructed URL that's all

and now we need to Simply close the alert box sweet alert bars and then

simply show a notification message to the user that done your file has been processed

successfully your video has been processed

successfully icon we can put the icon of success confirm button text we can

say it's

okay so again this property allow outside click I will set to two flaws

that's all so the user can't click or uh close this alert box it should press the

okay button only that's all guys in this function this function is complete now

if you reload your application the file will not be displayed the output file in the next

section we will do this let me just show you if I add this section add this

section as well click on this button you'll see processing if you go to inspect element you will see all the

processing is going on in the Soul the fmpg is doing its

job it is saying concat list txt no such file or

directory uh I think I made some kind of typo mistake guys concat

list concat

list uh I don't want to waste your time guys so I will simply copy paste this function so I just make some type of

mistake right here that's why I will simply copy this function

once

again so just paste it so this is actual function and you will see all the code

is same I just made I think a too mistake you will basically get all the source code in description so don't wor

don't worry about it you can purchase it you will see that you will now need to

click on ADD section multiple sections you can say and trim merch so you will see the

processing is going on so you can see that it's really fast

because we are not re-encoding the video so you will see this notification message your video has been processed successfully now we need to also display

the output video so that the user can download the output video inside your local machine so it's very easy we have

uh need to display it inside the jsx just go to the HTML part right here and

right after the trim button if you see so there will be a simple condition

right here if you see after this button after this div tag you will have

this condition video trimmed URL if if it value exist in that case only execute

this code and uh we'll give it a class margin top

4

H2 these are all Tailwind classes guys and merged

video merged and trimmed

video so we'll have a video tag and

uh so inside this video tag it will have the source tag and

Source we have a source property as well so it will be with

video trimmed URL and the type here will be video/

MP4 that's all so that I think this completes the application guys and uh if

you just see right here it's a very awesome application that we developed simply select your video file you can

insert multiple trimming you can do it add section from here then you can add

from here here if you want to do bulk editing at once click on that and now your video is

processing and the video time stamps that you mentioned based upon that fmpg will do its processing one section by

one and it will build out your output video you can play this output video right here 1 minute

06 so now you can download this file by simply clicking these three buttons

download button your pl Play the output file in the video

player so you can try this application I have deployed this tool guys on my free media tools website you can try out

before purchasing the full source code you can you will have full commercial right after you purchase it you can

deploy this inside your website as well you will get full documentation on how to deploy this and you will get full

support of me if you face any sort of problem as well you can basically modify this code extend this code functionality

as well so this will be a very good project so please hit that like button subscribe the channel and I will be

seeing you guys in the next video Until then thank you very much