Up next in 10
Build a Next.js WebRTC Webcam Video Recorder & Editor in Browser Using TailwindCSS in TypeScript
0 views
Jun 19, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-next-js-webrtc-webcam-video-recorder-editor-in-browser-using-tailwindcss-in-typescript/ Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:03
uh hello guys welcome to this uh live
0:05
stream so in this live stream I will
0:07
show you a web RTC
0:11
camera screen recorder and uh a video
0:15
recorder that I've built inside NexJS
0:17
which is actually a framework of ReactJS
0:20
so I'm running this application on
0:21
localhost 3000 port number as you can
0:24
see on your screen so this is actually
0:26
the application interface that looks
0:28
something like this
0:30
as you can see here you actually have
0:32
your camera so if you're running it for
0:34
the very first time you need to grant
0:35
access to your camera and microphone
0:38
permission i already granted this so
0:40
this is actually the interface where
0:43
your video stream will show you can zoom
0:46
in you can zoom out all these controls
0:50
are there then we have the button to
0:52
start the video recording and if you
0:55
also only want to take screenshot you
0:58
can also do that as well or you can
1:00
enable crop mode as well you can take
1:03
the screenshot of a particular section
1:05
so here you can crop that section
1:09
and then if I say take screenshot so it
1:12
will take the screenshot and save it
1:14
inside this you can view the screenshot
1:17
like this you can see this is the name
1:18
of the screenshot the name is given and
1:21
then you can download that screenshot by
1:23
clicking the download button and then
1:25
you can save this screenshot inside your
1:27
machine
1:29
so in this way this is for screenshot
1:33
now if you also want to record video of
1:35
that specific portion
1:38
you have the button start recording so
1:41
now the recording has started as you can
1:43
see here recording is started so you
1:46
have this button of stop recording and
1:49
as soon as you click the stop recording
1:51
button started recording is started so
1:55
you have this button of stop recording
1:58
and as soon as you you can see all the
2:01
recording has been saved you can play
2:04
pause or you can download the recording
2:06
inside your machine so it will download
2:08
your recording as an MP4 file so this is
2:11
a complete camera recorder kind of an
2:13
application built inside entirely in the
2:16
browser
2:20
so you can see that so
2:25
it is built inside NexJS so this is
2:28
actually the source code of this
2:29
application if you want the full source
2:31
code the link is given in the
2:33
description of this video you can
2:34
directly go to my website
2:35
procodestore.com and directly purchase
2:38
the full source code and as you can see
2:40
the whole application is divided into
2:42
multiple components all components are
2:45
coded inside TypeScript so once you get
2:47
the code here you will easily can modify
2:50
the source code or add additional
2:51
features on top of it as well so you can
2:54
see each component in the UI is divided
2:56
into multiple components and now to run
2:59
this application it's very easy let me
3:01
show you the package.json file we also
3:04
using Tailwind CSS as well and we are
3:07
using the latest version of react which
3:09
is 19 and this next JS version which is
3:12
15.2
3:14
and this is a web RTC webcam video and a
3:17
audio recorder kind of application which
3:20
runs entirely in the browser so once you
3:22
get the source code after you purchase
3:25
it you will get from Google drive
3:26
automatically and now to run this you
3:29
first of all install all the NodeJS
3:32
modules by npmi and then you run this
3:35
application by executing the command
3:37
which is npm rundev this will start the
3:41
development server on localhost 3000 so
3:44
I've already started the server right
3:46
here so as you can see we are having
3:49
this server started on localhost 3000 so
3:53
here your application will load and the
3:56
web camera will show right here you can
3:58
see you can zoom in zoom out you can
4:02
click the start recording button you can
4:03
enable the crop mode as well
4:07
and as soon as you click the start
4:09
recording button you will see the video
4:10
will get started
4:13
and as soon as you click the start
4:14
recording button and as recording button
4:17
you will see the video will get started
4:22
so if you want to edit this recorded
4:24
video we have this option of edit video
4:26
you can trim out any unnecessary portion
4:29
that you don't want to listen you can
4:31
trim out this portion
4:34
so from this
4:37
this is the starting slider this is
4:39
ending slider then you can say download
4:41
trimmed so now your video has been
4:44
trimming and then you can download at
4:49
specific location so in this easy way
4:52
you can have this camera recorder kind
4:54
of application which runs entirely in
4:57
the browser and if you need the full
4:58
source code and you can apply any sort
5:02
of uh export format it can be AVI MP4
5:06
3GP and you can even edit your videos as
5:11
well by selecting it also have a video
5:15
recorder and video editor as well built
5:18
in you can apply blur effect pixelated
5:22
effect as well so and uh you can select
5:27
the portion where you need to apply this
5:29
effect
5:30
you can select the all these factors
5:34
it's a complete video editor and camera
5:37
recorder with light review in the
5:39
directly in the browser so inside nextJS
5:42
so if you are interested in purchasing
5:44
the source code of this application the
5:46
link is given in the description and you
5:49
can select the screenshot type as well
5:51
png JPG you can zoom in zoom out mirror
5:55
effect also you can flip your video as
5:58
well and then you can also select the
6:01
aspect ratio 16x9 is selected by default
6:04
but you can even change by 9 by 16
6:08
which is for shorter video types 4x3
6:13
various
6:15
this uh aspect ratios are supported you
6:18
can do this so if you are interested in
6:20
this you can definitely can see you can
6:23
take the screenshot
6:26
all your screenshots will be saved right
6:28
here and uh
6:32
so if you're interested guys the link is
6:34
given in the description you can
6:36
directly purchase the full source code
6:38
of this application and thank you very
6:40
much for watching this video uh please
6:42
hit that like button subscribe the
6:44
channel as well and also check out my
6:47
website free media tools.com
6:52
uh which contains thousands of tools
6:54
related to audio video and image
6:57
and I will be seeing you in the next
6:59
video