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

uh hello guys welcome to this live stream so here we are actually building

basically a video editor in react CH where we will

actually be trimming or cutting videos inside browser so it's a realtime editor

you can see right here on your uh screen right here so we have actually building right here a video timeline editor in

reacts using a very popular Library called as

fmpg fmpg guys as you all know it's a command line utility for video and audio

the this is their official DOC website and you can basically install

this library on your command line but we will be using it in the browser so I

have already installed it you will see that works in the command line very well but uh this application that I developed

which is a video trimmer which allows you to cut your videos so this application is developed in react here

so we have a simple choose file button so as I click this choose file button guys what will happen it will allow us

to open our file picker where I can actually pick out my video file that I want to trim so all extensions are

supported M MP4 Avi mov you can actually select your video video file let me

select my video file so as I select my video file guys you can see it will actually create this nice little slider

or timeline from which we can actually using our Mouse we can directly cut out the portion that we

want using this so as I am changing these sliders you will basically see that the start duration is changing as

I'm moving the slider the video is also moving here and also the ending duration

so you can basically just using these sliders you can just trim out the

portion that you want in the video so as you do this right here let's suppose I

want this portion so there are three buttons either you can play this portion something like this you can control will

play second button is for the pause so if you click this button pause the video will stop again if you click play the

video will play again if you click the pause button it will pause the third button if you see trim button so if you

want to basically cut this portion that I selected in the video Simply select that portion so now fmpg web assembly

Library will be loaded and it will actually trim out this portion using fmpg so as I click this button guys

instantly your video will be cut using this 59 seconds you can calculate here

from this portion this is a starting duration this is the ending duration this is the actual difference of these

two things and we have successfully this is our output video something like you can simply play this output video which

is and right click and download this video so inside your local machine so

now you can play this video you can if I open so without having to install any

third party video editor guys you can directly do this video trimming part in the browser itself using this awesome

application that I developed and in this live stream I will going to develop this application in react CH step by step

guys I will show you a complete process of building a this video trimmer with

timeline editor using this nice little sliders and react CHS I will show you which libraries packages we will use it

this makes it very much easy to select which portion and for the user experience it's very good because user

is able to select the portion very easily and click on the trim portion the video is cut and shown to you instantly

so the main advantage of using fmpg web assembly guys

your basically whenever you select your video file it is not uploaded to a third party server it is directly all the

processing is done right in the browser itself so no video is uploaded to a

server so it is all happening in the browser so this is the actual main advantage of using fmpg web assembly

Library so all the things all the processing is happening right in the browser itself so this is actually the

advantage of using this this library and the package that we are using guys you

can just type fmpg web assembly this is their official documentation you can

read more about it but it is developed in typescript which is a superscript of JavaScript and web assembly guys as you

all know it's a just a Intermediate Language to binary code so it is in

human readable format so what it does it actually compiles your fmpg library into

web assembly code that we can run in the browser itself so it has a documentation

you can check out all the methods that we will be using so I developed this application using this documentation so

if you are interested in the full source code guys the link is given in the description you can directly purchase it

if you need any kind of confusion if you have at the end of this live stream you can the link is given you can directly

purchase it you will get a zip file this will contain the overall directory structure of the application so now this

is our uh application which I'm running it on Local Host 30001 so what I will do

is that I will stop this application so I will delete all this source

code I will rename this

to like this so what I will do I will create a new file

app.js so so this is our functional component will be there so I will say

hello world so now I will do I will start

restart this application so npm Run start this will start your react CH

application and the default port number will be 3,000 so this functional

component that we made right here so if you see in the package.json

file guys we are actually using these packages

uh which is the package we are using no use UI slider so the slider that you see

right here this slider we are actually using it uh no UI slider this is

actually the name of the library no UI slider react this makes it really useful

if you want to trim the portion you can allow the user to actually use

this so 20,000 weekly downloads are there simple command npmi no UI slider

react this is actual package that we are using right here so this this is actual

package alongside with fmpg web assembly Library it is just starting the

development server so just wait for this to start

so these are different kinds of scripts that are required for starting this

application so the very first thing guys you will actually do right

here so you will now see this hello world is sh right here to

us so now what we need to do is that we now go to app.js so this is actual

single file which will be needed for this application so what I will do guys first of all I will show you how to load

our uh this load the fmpg web assembly

Library this is the actual library that we are using for actually carrying out the conversion for video trimming and

cutting process so first of all we actually want to use uh the use effect hook in react CHS

which will act automatically run whenever your react Chase component will load we

will use this use effect hook so this will automatically

will execute so here we need to provide empty parenthesis empty square brackets

so this simply means that whenever your uh uh react Chase component loads for the very first time this code will

automatically execute and this will only execute once this will not execute uh

multiple times so this will only execute for the very first time and here we will write the code for actually loading the

fmpg web assembly Library so here we will actually called a simple method

which will be responsible for loading the script so we will actually make this

method load script and here we will actually pass the CDN from which we will actually be pulling the

fmpg web assembly live JS deliver. net

npm at the rate fmpg fmpg at the rate

0.1.2 /d fmpg

min.js this is a overall CDN guys uh if you copy this CDN open this in browser

you will simply see this is the actual minified

JavaScript code for

your I think we forgot to add the https you can see that so this is the

actual minified code for this Library which is fmpg web assembly Library so we

are actually uh

loading this script so after you do this this uh function will actually return a

promise to you we will say dot

then this will be Asing function so this will return the promise so we can handle this using dot

then and uh we can here just compare if type of

window is not

equal to undefined so we can just simply first of

all console log window that's all so here uh we need

to make this function which is load uh script which will be responsible

for loading the script and adding it to the Dom so it will

actually accept this argument that we are passing in the source right here guys we are passing this CDN URL to this

right here if you can see right here let me disable my volume

here so inside this function guys so what what we need to do we need to now return a simple promise so return new

promise and there will be two things right here in this function it will be

returning either the promise can be fulfilled or it could be rejected so on

fulfilled and this one this will be Arrow function so right here we will

simply be creating a element Dynamic element which will be a script tag

because we just need to add the script element dynamically using this function so this

will be a async so script. async

and we also need to use defer attribute so script.

defer is equal to defer and script. set attribute this is actual function which

allows you to set the source for property of the script tag is equal to source so

whatever URL that you are passing in the uh function right here it will get dynamically attached using this line

and this basically contains this uh on ready State

change function so on

ready on ready State change script.

onload so right here we will simply say if not loaded in that we will fulfill

the promise pass the script and make this to load it to be

true if any sort of error take place on error we can basically just say that the

script failed to load and finally we will uh just add

this element to the Dom so we can say document. get element by ID get Elements by tag

name which will be head we will basically add this to the

head you can add it to the first element so dot

zero append child

script so this is the overall function guys so the link is given guys you will

get full source code after you face any problem so this is the overall function

that we written so right here guys we do need to

have uh I think all the things are correct we do need to declare some

variables State variables guys which is needed for this we will declare it later on for the

time being if I reload this application in the browser Local Host

3000 cannot read properties of undefined reading then

uh let me see guys what is the problem here

uh let me write this one again load script

so now you can see that we are basically loading this if you refresh

now so it is saying that fmpg is not

defined okay we need to declare the state variables guys that's the problem it is say so

we just need to declare this one state variable which is responsible is script

loaded and uh set is script loaded this will be a Boolean parameter

simply use State hook we will use it initial value will be false but this will be responsible for storing if the

fmpg script has been loaded successfully or Not by default the value will be

false and here we are actually making this value to be true if you see set is

script loaded to be

true so it is saying that uh line 34

and we do also need to declare this variable which is uh fmpg it's a global

variable just declare it outside here we will be storing the instance of fmpg

just make sure that you declare it and if I go into my inspect element go to

console you will basically see guys there will be this message here uh this

use fmpg web assembly versions 0.1 1.2

this is actual object which is returned guys this contains all the methods which are supported by fmpg web assembly so

the core library of fmpg has been loaded and you can just see this message fmpg

core library has been loaded so we are actually calling this function create

fmpg which is a function that we are actually calling it if you see fmpg do create

fmpg so if you don't want to see these log

messages you can put this log property to false then it the log log messages

will not show in the browser so it's very helpful that you want to see it so just make sure log to true we are

executing this create fmpg that's why your fmpg library first of all gets loaded in the browser as you load your

react Chas component you will see that now your library is loaded now we can actually

perform our video trending part so after this is loaded guys now we will actually

write our jsx instead of hello world what we will

do we will basically have a div tag here and just give it a class name of

app and here you'll simply be having a input element and where we'll be getting

the file input input type

file and we will be giving an on change to it on change when the file is changed

this param this function will get execute it we will basically call this function as handle file change we'll

call this function as handle file change now we just need to Define this function

handle file change and obviously if you see open

this there will be a choose file button which will be appearing and we do need

to have our state variables guys so I will just go and simply add my more

State variables so one will be for calculating the video duration how many

total seconds the video is there so set video duration which will be the function

State hook we will again use initial value will be 0 second this

will be the duration of the video when we start the application and

then the end time because in video trimming we need to set the start time and the end time for both these

variables U State initial value will be zero and also for the start time there

will be this function set start time initial value will again be

zero and then we will also be having video source for setting the input video

Source initial value will be nothing so once you select the input file name we

will actually convert that into blob so that it can be displayed in the browser

and then there will be this video file value for the for displaying the output

video Once the video has been successfully trimmed so for that we are

actually declaring a variable set video file value initial value once again it

will be uh empty we will use U State

hook we just say iscript loaded all that and also video trimmed URL so once the

video is trimmed we will be converting it to the blob for that also we will

declare as UST State set video trim URL initial state will be

nothing so here we will basically also be declaring a variable for the slider

initial slider value will be zero like this and also we will be

declaring sharing a reference for the video element video reference will be us

ref you will use the US ref hook like this so these are all the

state variables which are needed guys for this we have use use effect us use

state in react CH so after declaring all these variables we can actually

now do our jsx so

we now need to write this handle file change method which will be responsible when we actually input our input video

file so right here inside this function so here this code will execute

when the user selects the

video so here first of all we'll get access to that video using so this

automattic ically will e parameter will be passed here which we can call this as

event so event. target. files zero so this will get a reference

to that particular file the user selected and then we will convert this file to blob you can simply say

blob URL and we can say url. create object URL this is actual method

available in JavaScript to actually convert the video to blob we can pass

the actual file which is selected video file and then we can call this hook function which is set video file value

to be blob URL and also set video source to

be blob URL sorry here this will be file the

actual input file and the video URL will be the actual blob URL with this help we will

be displaying this in the video player so if you just execute your application

nothing will happen if you select your file it will not be displayed in the video player for displaying it in the

video player we do need to add some GSX so right

here just outside your we will simply have a break

tag and after this we will have this uh curly bracket and here we will have a

simple condition we will only be displaying this uh video player once the file is

selected by the user so we will say video Source if it contains some value

if the length is greater so right you can see we are writing some conditional statement here

tary

operator if the video hasn't been selected in that case you can simply say

nothing so right here we do need to write

here we can simply say our react

fragment so inside this react fragment we will be displaying a video tag The

Source will be equal to the video Source variable

and uh we have also have reference which will be equal to the video

ref variable that we declared if you see video ref is equal to use

ref and inside this video tag we will have the Source

tag and the source will be equal to Here video Source once

again and the type will be equal to the video file value that we

have and it contains a property called as type which will be the MIM type so in

this case if you're selecting MP4 it will be the extension MP4 Avi mov so

with the help of this if you now select your video file it will be showed in the video player you can see that so now it

is showing in the video player so now to actually play this uh we can

basically uh you can style this you can import our index. CSS

file if you want to you can import

this and just Target it or you can import app

dots just make sure that you import app. CSS so it will be right in the middle

and it will show something like this so we inside this app.css we just given a

height of 30 pixel 300 pixel only so the video player will be slightly shorter it

looks good after you do this guys we just need to

uh after we will also be showing a slider where you can actually provide

the starting time and the ending time so this will be a Break Tag and then we will actually use this no UI

slider it will be automatically be imported by V vs code this no UI slider

guys has some properties that you can do first is the Behavior this will be tab

drag you can drag it drag the slider using your mouse this is a default

behavior and by default it comes with this with

these options you do need to provide some start time and the end time these are mandatory parameters so step will be

one you can give any value step is actually whenever you increase the

slider in which Step it needs to increase so it will be increasing by one

value at a time so margin we can give it one and the range range is very

important here we need to provide the minimum value of the slider and the maximum value so minimum will be zero

and the maximum will be the total duration of the video so it will be coming in the video duration if the

video duration is undefined you'll simply set it to two so also we need to provide the starting

duration of the slider so it will be at the zero comma video duration same value

that we given to the range

so if you now select your file

there we need to provide connect as well and on

update update on slider so whenever the slider

changed the value guys this function will automatically execute so we now need to Define this function update on

slider change

and uh this uh file will be imported if you see no UI slider from no UI slider.

react but we do need to import the CSS file as well this will be imported manually by yourself just write this

import statement No UI slider SL distribute SL no slider. CSS this will

import the CSS file for this Library so if you now select the input file there will be this nice little slider guys

which will be in sync by you can see that so we can't move the

slider but the slider is showing you can see that you can do

this but uh this for updating this values it is really important that we

Define this function that we defined it which is update on slider change

so here two values will be there the values

and the handle these values will be automatically passed so first of all what we will say set video trimmed URL

to be nothing and we will say read value

Define this variable and also we will check the value for hand

if it is having some value will then you will simply read the read values of

handle if it is not defined then we will set it to zero and here we will check the end time if it is equal to

undefined sorry if it is not equal to read value then we will set the end time to

be read value

this is uh the logic guys which is responsible for doing it so this is slightly complicated so I will simply

copy and paste it and then explain to you what is happening so essentially what it is doing right here whenever we

increase or decrease the value for slider as we pick the video file it is automatically doing what it should do

so as you pick your video file guys this slider we do need to make

sure now we need to add this this part which is start duration and the end duration so as we move the slider in the

right duration and the right and left whatever part that we

want to trim or cut we need to sync it with the start duration and the end duration we need now need to display

this as we move the slider we need also need this value to be changed so that

the user can see your start duration and end duration so inside this code right here after this

we need to add this start duration you can see that we added this start duration and this

actually you can basically purchase the full source code guys if you find it complicated the link is given you can

directly purchase this full project so here guys what we are doing we are actually writing this convert to H uh

convert to hour minute second we are providing the start time and the end duration and the end time we are

providing this passing it to this this function so we have defined this function if you

see uh this function is responsible for converting to this format which is hour

minute second we actually take passing the value of the time for calculating

the seconds we are dividing the whole value by 3600 so this will give the value in hours

minutes second for calculating in minutes we are dividing this value by again 60 and then we are multiplying it

by 60 to get the SEC seconds this will have we simply at the end we are returning the

time so this is the actual thing if you

see so one more thing that we are doing guys

this is really important if you see in this function this is basically to actually

get the duration of the video using video ref so if you see

uh to actually get uh this uh duration of the video we actually

again using the use effect hook so now this time this

will execute every time this value changes which is the video

source so video Source if you see we have declared the state variable so

every time this value changes which is video Source essentially which is uh

responsible for the blob URL if you see every time this

changes this will execute so now here we are

actually so if you don't uh write this there will be a problem if you see if I

select my video file the slider will not move smoothly if you see the slider if I

try to move the slider it is not moving

perfectly so this is useful for the slider

work if you don't write this the slider will not work so here we are first of

all just saying if video

ref and uh if video ref dot

current here we are actually getting reference to the current

video dot current current video.

onload metadata this is actual event which will actually take place when you want to

calculate the duration of the video so here we will simply set video duration

to the current video do duration and we will set the end time to

be current video. duration like this so we are basically

calling this hook methods that we declared that's all that is needed for this

function so if you now see uh it is saying video ref is not defined

so just make

sure video ref Sorry video

ref so if you now select your input five now we can move the slider I

think so you can now see now we can move the slider very easily so the part is

really important guys for these the button which is trim portion so if you click the trim portion automatically

Ally your video is trimmed so now I will focus my attention of this function which is handle trim so whenever you

call this function guys this is the actual logic which is taking place if you see we are actually running this

command which is this fmpg command we are first of all loading the script and

we are actually calling this FS method which will actually write this file it is all happening in the browser so it is

not saving this file anywhere in the memory it is all happening in the memory

so it is basically writing this file using this function which is fmpg web assembly Library function which is fetch

file so we are fetching the video file value and then we are getting the MP4 or

extension of the video and then we are running this command Dash I which is the name of the video- SS for the starting

time and then to the end time and then we are not re-encoding the video we are

using the same encoding settings for the audio and video and this is your output file name which

is dot the extension after that we are uh reading

the file and then we are creating url. create object URL creating a simple blob

and then we are setting this video trimmed URL to be URL this is a simple logic of this handle trim function after

we trim the video we show this video in the video player by converting it to the blob URL and then showing it in the

video player if you see in the jsx we are actually showing it a simple condition if the video trimmed URL is

there then only show the video in the video player we have the controls out there in the source here we are showing

the video trimmed URL so you can see that so this is actual video so you can simply play this

video file right click download this video

so it's a very simple project guys but it's really powerful you will get a very

good base in understanding fmpg web assembly project so you can directly purchase the full project with source

code the link is given in the description of the video you can go to my website procore.com after you

purchase it you will actually get the full source code alongside the zip file which will get will contain the full

directory structure from Google Drive automatically after the payment is done

and uh you will actually have this nice little slider where you can actually

select it will be sync with this start duration the end duration you will automatically see in the real time as

you change the slider value and there will three options are there you can play the video you can pause the video

and then you can trim the portion of this it is really fast guys really efficient as you click the trim button

automatically your video has cut and trimmed and now it is showing it in the video player and now you can actually

play this trim portion or you can actually download

this so this is a very simple project in react CHS guys if you are interested the

link is given in the description you can directly purchase it and in the please

hit that like button subscribe the channel as well and uh I will be seeing you guys in the next live stream