Access Webcam in ReactJS. Camera access in React

Access Webcam in ReactJS

[sudhanshu]

hahaha bro is like "i taught enough, figure that shit out yourself". great tutorial thanks

[cherubinth]

I get the same resolution as the preview in the browser, not the real image. Like if the preview is small the image will be small. Help?

[vishnuuplenchwar]

You just have to store image in state and also use if statement

[KikeVanegas]

It was an excellent tutorial. Never mind the slip at the end, it happens to all of us.

[rafaelleafar]

I tried the exact code and package. but the camera didnt open. it was allowed in the browser. how to fix it?

[crazydevSTL]

great tutorial. To get the img variable, you can use const [img, setImg] = useState(null); and set the value like this const showImage = () => {

}

[SK_M_u_s_i_c]

you just use the usestate and image will be visible due to component refresh

[ABHIJITMSAWANT]

const[img, setImage] and <img src={img}/> displays the image

[kapiloliveti]

This won't work for multiple image capture ...

[yoyopo]

The basic: when you want to render new data to the page, you must use and store it in state, with useState hook.

Thanks for the video tutorial

[jubalm]

you forgot to store the image in a state

[רקפתקונפורטי]

this is what i wrote - working
import Webcam from 'react-webcam'
import { useRef, useState} from 'react';



const WebcomComponent=()=>{
const [imgSrc, setimgSrc] = useState(null);
const webRef = useRef(null);
const capture =()=>{

}

return(
<div>
<Webcam audio={false} ref={webRef} screenshotFormat="image/jpeg" />
<button onClick={capture}>Capture photo</button>
{imgSrc && (<img src={imgSrc} alt='take an emotion ' />
)}
</div>
)
};
export default WebcomComponent;