Build a CAMERA APP in REACT JS! | Easy Tutorial!

Learn how to build a camera web app using React JS. We look into how you can utilize React's "useRef" method to access DOM elements and create a web camera app in your browser!
// JOIN THE NEW DISCORD SERVER!
/ discord
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@jonatasfreitas3823]

Amazing! It helped me a lot with my college work. Greetings from Brazil 🇧🇷, Tyler

[@TylerPotts]

I'm happy it helped!

[@DouglasG96]

Thank you man, greetings from El Salvador! 😎✌

[@therollingambit5222]

Awesome video, even better sense of humour 🤣

[@TylerPotts]

Glad you enjoyed it! I do try to be funny, it doesn't always end up that way though xD

[@kresnofatihimani8402]

awesome tutorial. i see you're a man of culture as well from your wallpaper xD

[@TylerPotts]

You know it!

[@AnkitTiwari-dq7qm]

I love your intro😍

[@Ahm3dAshour]

goooooood we need more creativity video like that use react

[@TylerPotts]

Thank you

[@craiggerhardstein7305]

you could have just move to the directory the project was in inside your terminal and then just type code . then hit enter the project will open in VScode

[@KeshavBhardwaj-eu5tx]

do you know how can i access this on my phone

[@huanth]

can you add overlay on camera, when take a photo, the photo will have that overlay

[@cheeseburgers4970]

nice and clear tutorial !, now can we end the usage of camera?

[@waleedsharif618]

Could you make video on rtsp live streaming using reactjs?

[@ThunderboltPath]

Awesome, I like your style!

[@TylerPotts]

Thank you! Cheers!

[@daga-shiya9454]

Thanks for the amazing video! I was wondering if there's a way to record video and audio using this method, instead of just taking a photo

[@emmanuelakogwu7761]

nice and super helpful, thank you tyler. how can one get the snap and send to a backend?

[@TylerPotts]

Good question! I can't explain it over text so I'll add it to my videos to create :)

[@IUsamaKhan]

@@TylerPotts kindly add it asap

[@shobitkhatri9242]

Thank you so much buddy for this video

[@TylerPotts]

You're welcome

[@davidhernandez9275]

Thanks! Does this also work if I am on mobile or for that I would need to use react native?

[@geraldofebrian7119]

Thanks Tyler !

[@TylerPotts]

No, thank you, Geraldo!

[@mihirdoshi1262]

Thank you for amazing content, executed perfectly.

[@TylerPotts]

You're very welcome!

[@KeshavBhardwaj-eu5tx]

the video isn' t visible on my phone WHY?

[@sakshamjaiswal4025]

amazing man loved it

[@mfoxtv49]

Great video!

[@usamakhan8611]

How the video module be on? And where will it be stored? If there is any link giving such information. Kindly share.

[@Ebizzill]

how would I store the image?

[@dineshm3856]

how to use flash on/off/auto which needs to support Android and iOS

[@mayank27aswal]

Really awesome. Could this work with a mobile app through a PWA though? I am making a PWA right now and looking for camera

[@ArunaY-p6d]

excellent vedio

[@mohsinsayyad6347]

Getusermedia is not working in iphone 14

[@lingeshvirinmoonsamy8692]

awesome video, thanks so much!

[@TylerPotts]

Glad you liked it!

[@gnrtr]

is anyway to get the base64 image of the photo?

[@TylerPotts]

hmm from the top of my head I have no idea but I'm pretty sure you can! I can't remember how I done this tutorial but I'm sure we use base64 or maybe that was the vuejs version

[@sebastiangrosswang7141]

Did you find a solution?

[@gnrtr]

@@sebastiangrosswang7141 I used react-webcam from npm

[@leolima3757]

So good, thank you.

[@Cocoprep]

uhm idk how to open the black screen thing...

[@hayfachouchene1285]

amazing tutotrial !! i really enjoyed it ! keep rocking 🔥🔥🔥

[@TylerPotts]

Glad you liked it!!

[@ahmedelgamal4741]

Hi Mr please can you tell us how you colored code !? Ext name please!?

[@ryanmanchikanti6310]

Is there a way to save the captured image or download it ? , i'd really appreciate your help !

[@TylerPotts]

Good question, you can but I cant explain via text so I'll put it in my video list!

[@tunjimubarakazeez8300]

Have you done a video on how to save the pictures snapped?

[@IUsamaKhan]

@@TylerPotts kindly share the video of this, i am working on my Final Year Project that is detecting lips, and i have to record the video using reactJS. Through it, the video should be stored in the database from where i'll be able to train my model.

[@ArturoN]

Great!

[@magikarp2063]

Will this work with ios and android cameras?

[@rahuldutta8386]

did it work bro... want to add in pwa

[@magikarp2063]

@@rahuldutta8386 I think so haha, sorry I don't really remember.

[@rahuldutta8386]

@@magikarp2063 ok bro no problem

[@yugeshkk3062]

How do you stop the camera.

[@rangabharath4253]

Awesome

[@yugeshkk3062]

How do you save that photo in localstorage.

[@khoilam7569]

hey bro, how to avoid rotate video

[@TylerPotts]

Sorry I'm not sure? You may have to rotate the canvas?

[@programmerrdai]

Cool

[@zihanbayeed42]

hey man great stuff. one question, have you thought about sharing a link to the code?

[@alisood9200]

Thanks bro

[@TylerPotts]

:D

[@luisfelipemedinarodriguez8478]

Code pls

[@chayanont.charoen8071]

Thankyou for tutorial , If I want to save the image from photography as file png jpg, how do I write it?

[@bryanjesuscastrocoello2791]

hi brother i wanna do that could you help me please

[@dansh]

Super helpful video. May I please ask how can I make it open on mobile? I used yarn and Vite to setup the app, and ran the dev server using "yarn dev --host", yes it doesn't load on mobile as it does on desktop

[@KeshavBhardwaj-eu5tx]

did you got any solution

[@alexlavertyau]

can you upload the code to a github repo ?

[@suphotnarapong355]

Thank you

[@karthicrajan8234]

getUserMedia() is not working in mobile browser it shows some error. Is there any other way to access the camera ?

[@KeshavBhardwaj-eu5tx]

did you got any solution?

[@tusharpasricha]

How to save this snap on any database?

[@munnakhandakar1724]

do you get any help?

[@TylerPotts]

Good question, normally you'd save images to a server and then add a reference to the image via a database but I can't explain this over the comments.

[@MandosaWright]

I think there might be a way to save it as a binary or something like that, otherwise you would have to use service the digital ocean provides.

[@dakshagarwal3997]

How to store the image???

[@hanjarraess2923]

so emezing, can i got exemple code

[@prasannashivakoti3989]

I think it is not working in..mobile devices

[@paraggaikwad01]

Can anyone of you please share the code? I'm getting errors.

[@soulfilip]

so much satisfaction pressing the 'm' while reproducing the video ~~

[@ChandraRam]

give me github link for this code

[@TylerPotts]

Sorry if its not in the description then it was probably deleted.

[@dalandan8300]

lol

[@igdagusryankurniantara1053]

It doesnt work if i open from phone, it cant access phone camera

[@KeshavBhardwaj-eu5tx]

did you got any solution?