Up next in 10
Build a Next.js Canva Webcam Video Recorder & Editor in Browser Using WebRTC API in TypeScript
231 views
Jun 19, 2025
Buy the full source code of the application here: https://procodestore.com/index.php/product/build-a-next-js-canva-webcam-video-recorder-editor-in-browser-using-webrtc-api-in-typescript/ Official Website: https://freemediatools.com
View Video Transcript
0:05
uh hello guys uh welcome to this uh live
0:07
stream so in this live stream i will
0:09
show you a camera recorder kind of an
0:11
application something like canva i
0:13
developed inside the browser and i've
0:16
used the framework of reactjs which is a
0:19
very popular framework which is reactjs
0:21
so as you can see on your screen this is
0:23
actually the application we will be
0:25
building uh which is a simple camera
0:28
recorder kind of an application where
0:30
you can take a screenshot or you can
0:31
record your video using your web camera
0:34
so this is actually the demo of the
0:36
application we are running this
0:37
application on localhost 3000 and uh it
0:41
has two sections first of all the camera
0:43
recorder and then we have also the video
0:46
editor as well so this all happening in
0:48
the browser itself uh so here your as
0:53
you load your application you need to
0:54
grant the permission
0:57
so as you just open localhost 3000
1:02
uh this will use your web camera and
1:04
microphone so whatever you are saying
1:06
right here it is recording and it has
1:09
two buttons here start recording and
1:11
then take the screenshot if you only
1:14
want to take the screenshot then it will
1:15
actually take the screenshot and then it
1:18
will save all your screenshots inside
1:20
this section
1:22
either we can view the screenshot
1:25
or we can download this and here you can
1:28
select the location it will save your
1:30
screenshot as a png image file then we
1:34
also have the functionality to record
1:36
your own video if i click the button
1:38
start recording now you will see your
1:40
video is recording and at any moment of
1:43
time you can click the stop recording
1:45
button the button start recording now
1:47
you will see your video is recording and
1:49
at any moment of time you can click the
1:52
stop recording
1:53
so you can download the recorded video
1:55
inside your machine so again it the
1:58
video will be downloaded and uh
2:02
if you're interested guys in purchasing
2:04
the source code of this application the
2:05
link is given in the description i
2:07
basically coded this inside this nextjs
2:10
and it's all comp uh application is
2:13
divided into respective components here
2:16
you can see each and every section is
2:18
divided into its respective component
2:21
and once you get the source code you can
2:23
easily modify the source code or add
2:26
additional features as well so the link
2:28
is given in the description so after
2:30
purchasing it you will be redirected to
2:31
google drive where you will actually get
2:33
the zip file of this project and uh you
2:38
can see this is the overall project so
2:40
once you get the source code it's very
2:42
easy to run this so first of all just
2:44
say npmi this will install all the
2:46
nodejs modules and it will create this
2:48
folder node modules folder and then you
2:51
just need to say npm rundev this will
2:54
start the development server on
2:56
localhost 3000 so this will start your
2:58
application so if i show you the
3:01
package.json file we are using the
3:03
latest version of react here which is
3:05
the 19 version and uh also the next js
3:10
which is next.js 15 so it is compatible
3:13
with the latest version and uh if i now
3:16
show you the application you will see
3:19
you can record export this in any format
3:22
avio 3gp and uh or you can even
3:27
have the video editor as well after
3:29
recording the video we can trim the
3:31
video accordingly with using these
3:34
sliders
3:35
so
3:37
so now your video will be trimmed here
3:39
and it will get this notification inside
3:42
this model window
3:44
so this is the overall you also have the
3:48
video effects so here you can upload
3:50
your existing video if you have an
3:52
existing video that you want to edit you
3:55
can apply various filters out there as
3:57
well to the entire video you can blur
3:59
out certain sections in the video by
4:01
having different kinds of blurs using
4:04
the slider you also have the pixelated
4:06
feature as well you can apply it to se
4:09
selected section and then we have the
4:11
button to process and download so it
4:14
also have this uh video editor feature
4:16
as well apart from this camera recorder
4:19
feature and here you can take the
4:21
screenshot in the png or jpg or you can
4:24
have a timer as well let's suppose 3
4:27
seconds you can set the timer right here
4:30
so as soon as you click the
4:34
button right here
4:37
to take the screenshot now it will have
4:40
this timer here 3 2 1 after that your
4:46
so here you can put a 3 second timer so
4:49
if you click the take screenshot so now
4:51
it will have 3 2 1 and then the
4:53
screenshot will automatically be taken
4:54
and saved so you can even have this
4:57
feature as well so it's a complete
5:00
project here webcam audio video recorder
5:02
application so if you are interested the
5:05
link is given in the description you can
5:07
even zoom in zoom out inside your web
5:10
camera as well you can apply a blur as
5:13
well
5:15
if you want to record video using these
5:18
effects you can also have the pixelated
5:20
effect as well so
5:23
like this and then you can start your
5:25
recording as well you can start your
5:27
recording
5:29
all these features are there guys and uh
5:32
so the link is given it's a professional
5:35
camera webcam recorder with different
5:37
kinds of effects that you are seeing
5:39
right here it is coded inside nex.js and
5:43
uh
5:45
thank you very much for watching this
5:46
video also check out my website which is
5:49
freemediatools.com
5:51
uh which contains thousands of tools
5:53
related to audio video and image and i
5:56
will be seeing you in the next live
5:59
stream