Up next in 10
Build a React.js Project to Get User Webcam Feed and Video Recording Using react-vision-camera in JS
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/a0251aeb9401fed84c3ee5b039d39f89
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
enable your web camera and show it
0:06
inside your react application without
0:09
using the Navigator API so by default
0:12
browser has a navigator API that you can
0:14
use directly inside JavaScript but in
0:17
react CH there is a specific package
0:19
that allows you to show all your web
0:20
cameras inside the select field so if
0:23
you are developing some kind of camera
0:25
application you can use this package
0:27
inside react shars to show all the user
0:29
web C so when the user loads their
0:32
application they will be allowed to
0:33
enable the permission for loading their
0:36
web camera and inside the select field
0:39
they will see all your web camera so you
0:41
can see in my case these are all my
0:43
cameras available to me and here in from
0:46
the select field I can toggle this I can
0:48
change to this camera this camera so we
0:52
have multiple cameras available so from
0:55
this package I can toggle and shift to
0:58
whatever camera that I want to in
1:01
different qualities as well so by
1:03
default when I load the application my
1:05
camera will load the default camera and
1:07
you can see my face the camera feed is
1:10
showing so all this will be coming from
1:12
this specific package which is uh if you
1:15
go to npmjs.com it's specifically
1:17
designed for reactj
1:19
application and if you just search for
1:21
this package it is called as react
1:24
vision camera so
1:27
react vision camera this is actually the
1:31
name of the
1:33
package if you just search for it this
1:36
is actually the command here I have
1:38
already installed it it's almost got a
1:40
fairly new package 324 downloads so I
1:44
will show you step byep example how to
1:46
use it just make a simple functional
1:49
component and after this we need to
1:51
import this module so you'll simply say
1:53
import and vision camera and it will be
1:56
coming from react vision camera so it's
2:00
the size of this package is 10 kiloby so
2:02
we are importing this component vision
2:05
camera and now we just need to have some
2:08
kind of preset resolution we will
2:11
declare this variable so here you will
2:14
be holding the a simple object an array
2:18
here and inside this array of objects
2:20
you will have different
2:23
labels in which resolution you want your
2:26
camera I I will give all the source code
2:28
in the description so if you need the
2:30
full source code you can go to the video
2:32
description so we have declared this
2:34
variable preset resolutions so it's an
2:36
array of objects each object is
2:39
containing uh the quality here if you
2:41
see the width is 1080p which is 1920 by
2:45
180 then we have the full HD which is
2:48
1280 by 720 and then we have 640 by 480
2:52
so we are holding the resolutions in
2:55
different qualities we have declared
2:57
this variable now we inside of a
2:59
function component we need to declare
3:01
some State
3:03
variables so for the camera activation
3:06
we have a variable active set is active
3:09
which will be a Boolean parameter using
3:11
the UST State hook initial value will be
3:14
true so whenever you load your
3:16
application the camera will be switched
3:18
on and then we have the variable for
3:20
pausing the camera so again this will be
3:23
a Boolean
3:25
parameter initial value will be false
3:30
then for showing the cameras of the user
3:34
we will have a
3:36
variable which will be an
3:39
array so initial value will
3:44
be a Mt array so inside this we will be
3:48
loading all the cameras of the user and
3:50
then we have the selected camera label
3:54
so whatever camera the users select
3:57
inside this variable we will simply
4:00
store it the label of that camera and
4:03
initial value once again use state will
4:04
be
4:06
nothing and then the desired
4:09
camera in whichever quality that the
4:12
user want we have declared these three
4:15
resolutions so whatever quality that
4:16
just select for this also we need to
4:19
declare a variable U State and initial
4:22
value will be founder so initial value
4:26
here will be founder and after this
4:32
we again will be having a the desired
4:36
resolution in which resolution the user
4:39
want to select their camera so again we
4:41
having this variable US state and here
4:45
you need to specify an object here which
4:48
contains the width of the camera by 1280
4:51
and the height is 720 so we have
4:54
specifying the resolutions right here so
4:56
when you load your application the
4:58
camera will be B and height like this
5:02
and lastly a variable for holding the
5:05
current
5:07
resolution current resolution of the
5:11
camera like this and for this U state
5:15
will be nothing so and then you again
5:19
need to attach two reference for the
5:22
resolution you will have use the user F
5:25
hook initial value will be null and
5:28
second variable for the camera selection
5:31
so we have another variable camera
5:34
selection and we'll be using the US ref
5:37
again one reference for the actual
5:40
camera and one reference for the actual
5:42
resolution so we have declared these two
5:45
variables now we need to go to the jsx
5:49
so right here wherever you need to
5:51
select this component we will actually
5:55
have some classes as
5:57
well just I will just def find this
6:00
class in the CSS file so container and
6:04
inside this you will have another div
6:07
which will have a class name
6:11
of Barcode
6:18
Scanner again inside this div we will
6:21
have a class of
6:23
vision so all these classes that we are
6:25
defining guys I will Define it in the
6:27
CSS file so don't worry about and now
6:30
this is the actual component that we
6:32
imported early on if you see vision
6:35
camera so as soon as you embed this
6:37
component uh if you refresh your
6:39
application so what happens is that your
6:41
camera will be switched on because you
6:44
can see it is essentially using my
6:46
camera it has been turned
6:48
on so now to actually show the camera
6:51
feed we do need to pass some options to
6:53
this component the very first option it
6:56
takes is is active we need to activate
6:58
this it takes boan parameter so we are
7:01
actually passing the value here of the
7:04
variable is pause also it a boodan
7:07
parameter if you want to pause it again
7:09
be passing this value for is pause this
7:13
is essentially false and the desired
7:16
camera here you need to specify we
7:19
passing all these variables that we
7:20
declared and desired resolution also and
7:24
whichever resolution that you want you
7:26
will pass this variable and then we we
7:29
have some call back functions so
7:31
whenever the camera is opened we will
7:32
Define this function on opened
7:35
function and whenever the camera is
7:38
closed this call back function will be
7:40
executed on closed and on device list
7:45
loaded so whenever you need to show all
7:48
the cameras of the user I will show it
7:50
inside this call back function so these
7:53
are the three functions when the camera
7:55
is opened when the camera is closed and
7:57
when you want to show the list of the
7:59
user cameras so now we just need to
8:01
Define these three call back functions
8:04
right here so one by one I will Define
8:10
it so first function is that on
8:15
device list loaded and it will contain
8:18
the
8:19
devices automatically passed to it so I
8:22
can just console log
8:23
it then the second function will be on
8:27
closed when you close the camera what
8:30
happens and then whenever you open the
8:34
camera so we have this function on
8:41
opened so right here inside onopen
8:44
function we pass the actual camera and
8:46
the camera label so these two fun
8:49
variables automatically pass in and here
8:52
we can simply console log a simple
8:55
line you see we have binded this
8:57
function on open so right here you will
9:00
just write a simple console loog line
9:02
that camera opened and
9:05
then set the current resolution to
9:10
camera. width of the camera we can get
9:13
easily like
9:15
this and this will be value inside X and
9:19
then
9:21
camera dot video
9:27
height so that's all and then we use the
9:29
set selected camera label which will be
9:33
the actual camera label so if you just
9:36
refresh now so what happens is
9:38
that if you go to console and just
9:43
see it basically opens the camera and
9:46
also shows the list of devices on my
9:50
system so we have 10 cameras available
9:52
to us now we just need to show it in the
9:55
select field so each camera has some
9:57
information which is device ID uh this
9:59
is a label of the camera and now we just
10:02
need to show this information in the
10:04
HTML so the user can uh see that
10:07
information in the select field so right
10:10
here first of all we need to define the
10:12
classes so I will just import my CSS
10:16
file so I will just also attach the CSS
10:19
code as well so inside my app.css you
10:22
will see all the uh classes I have
10:25
declared it so I I will give the link in
10:29
the the
10:30
description you can see all these
10:32
classes have been styled just given a
10:34
width and height to the camera so just
10:36
you need to give it and now you will be
10:39
able to see your camera appearing so
10:41
this is my web feed you can see my
10:44
picture appearing right here in the
10:45
camera feed so in this way you can show
10:48
your camera and now we just need to
10:50
Simply show the select field as well in
10:53
the HTML so I will just go to the
10:56
app.jsx file and just after
11:00
this component we will have
11:04
another div tag and inside this you will
11:08
have your select
11:13
field and inside this select field you
11:16
basically give first of all the
11:19
reference so reference will be the
11:22
resolution
11:23
selction and here the value will be the
11:26
current resolution
11:29
and we'll bind this on change event
11:31
handler so whenever you change the
11:33
camera we will execute this function on
11:38
resolution selected so I will just
11:40
Define this function so whenever you
11:43
change the resolution of
11:45
the camera we we will have all these
11:48
choices available to us so we will
11:52
simply say option and uh the actual
11:56
value which will be the current
11:58
resolution
12:00
which is contained inside the
12:03
variable so we will have this
12:09
option and then you Loop through
12:12
basically inside this qu bracket inside
12:15
this variable preset resolutions and we
12:18
will map through each resolution and it
12:20
will have its idx variable as
12:23
well so like
12:27
this so for this for each resolution we
12:30
will create this option tag and I will
12:33
just attach this key parameter and ID
12:36
will be attached to the key and then the
12:39
actual value of the camera so
12:42
resolution. value
12:44
dot
12:45
width and just multiply this by the
12:49
height and resolution do value
12:54
dot height so this will the label will
12:58
be contained inside this variable which
13:01
is resolution do label label is nothing
13:03
but the camera name so now if you see in
13:06
your application there is Select field
13:08
will get added and you will see all
13:11
these options available to
13:15
us
13:17
so now we need to just Define this
13:20
function on resolution selected I think
13:24
on resolution selected we haven't
13:30
on resolution selected so I haven't
13:32
defined this
13:34
function so on resolution selected I
13:37
will just Define this
13:40
function so whenever you change the
13:43
value you will
13:45
get the width so whatever resolution
13:48
that you select I will just make
13:50
it the inside the state so whatever
13:54
resolution that you select we call this
13:55
function set desired resolution we pass
13:58
the width and the height and it will
14:00
change the camera resolution as well if
14:04
you change to 1920 by the resolution
14:07
will get
14:11
changed so I've given all the source
14:14
code guys in the
14:15
description so you also will see these
14:19
select field now it will actually show
14:21
all your cameras which are there inside
14:22
your system apart from that we also get
14:25
these two buttons if you want to stop
14:27
your camera it will stop the web camera
14:29
feed again you can click the start
14:31
button to start the camera feed and you
14:34
can click the pause to pause the camera
14:36
feed and again you can play it so in
14:38
this way you can interact with your
14:40
camera directly by using this package
14:43
inside react CH which is react vision
14:45
camera so I've shown you a complete
14:48
example and thank you very much guys for
14:50
watching this video and do check out my
14:52
website as well free mediat tools.com uh
14:56
which contains thousands of tools
14:58
regarding audio video and image and I
15:01
will be seeing you guys in the next
15:02
video
#Camera & Photo Equipment
#Other
#Open Source