So in this live stream I'll show you I
basically built out a NexJS uh video
timeline editor similar to Viva video
which is a very popular app for editing
your videos applying different kinds of
effects. So this application I developed
in nextjs as you can see we are using
ffmppg web assembly library remotion as
well and you can see we are using nextjs
latest version and once you purchase it
I've given the link in the description
of the video you will get this directory
structure each and every component is
coded inside its appropriate typescript
file here and now to run this project
it's very simple you go to the command
line after you purchase it npm rundev So
this will start this next year's local
development server at localhost 3000.
It's really simple to run and also
deploy as well. So
if I show you localhost 3000.
So once the project starts you will be
granted with a welcome screen where you
can create multiple projects using the
timeline. So this is a welcome screen.
Here you click on get started and here
you can create multiple projects.
You can basically trim your videos. You
can adjust settings of the video as
well. Click on add project.
Once you click this, you will be granted
with the timeline editor.
Right here you will add your media
files. whatever image file, video files
you want to add.
After that you can add the video to the
canvas or the timeline.
Uh hello guys, welcome to this
background from image kind of a offline
editor that I developed inside HTML and
JavaScript as as you can see
you just need to select the voice is now
coming in the browser itself.
So this is the video you can add to the
timeline.
So it's really simple to add the video
to the timeline. After that you can also
split the video by just placing the
marker to wherever you want to split
this. So now you can basically delete
this portion if you don't want this. So
it's really simple. You can delete
videos as well. Hello guys, welcome to
the and then if you want to export this
video you have the export button as
well.
So I have given the link guys you can
directly purchase the full source code
of this nextjs project. The link is
given in the description. So once you
purchase it, you will get this full
directory structure and uh you click on
export and here you can change the
quality of the video as well. Click on
render and now the FMPG will start
processing your video and will show you
this progress bar. So once it completes
you will basically see your output video
file created. So this will hardly take 5
to 10 seconds and this is similar to
Viva video mobile app.
This is a clone that I developed similar
Viva video which is a very popular app
for editing your videos.
So it basically executes directly in the
browser. It doesn't have any sort of
back end. It's a single page
application. And now you can see the
video is rendered successfully. And here
you can save the video file.
Uh hello guys, welcome to this video. So
it's really simple. Uh you also have the
option to add text.
Just click the add text button. And here
you can add the text and just select the
text and if you want to change
the color of the text, you can even do
that using this color picker. And you
can adjust the positioning. Everything
is possible here
and same goes for images as well. You go
to library and here you can add your own
images as well.
So it's really simple and then you can
export it. So this is a fully fleshed
editor guys. If you are interested I've
given the link you can directly purchase
the full source code. If you have
knowledge, you can even modify this or
add additional features on top of it as
well. So definitely try this.