CODEWITHSUNDEEP
javascriptreactjswebcam
DGomez
DGomez

Reputation: 399

problems with react-webcam

I have a problem with react-webcam which is when I open my page immediately it asks me for permission to open my camera, but what I need is to ask for my permission only if I press the button to take a picture

const WebcamCapture = () => {
  const webcamRef = React.useRef(null)
  const [imgSrc, setImgSrc] = React.useState(null)

  const capture = React.useCallback(() => {
    const imageSrc = webcamRef.current.getScreenshot()
    setImgSrc(imageSrc)
  }, [webcamRef, setImgSrc])

  return (
    <div>
      <div className="w-full bg-dark-20 flex justify-center items-center relative ">
        <AiOutlineCamera className="text-6xl py-60 h-auto absolute m-auto" />
        <Webcam
          className="w-full h-64"
          audio={false}
          ref={webcamRef}
          screenshotFormat="image/jpeg"
        />
      </div>
      <div className="flex justify-end mt-5">
        <button
          className="text-xs flex justify-center items-center px-4 py-2 border-2  border-dark-80 rounded"
          onClick={capture}>
          Usar Camara web <BiWebcam className="ml-2 text-base" />
        </button>
      </div>
      {imgSrc && <img src={imgSrc} />}
    </div>
  )
}
export default WebcamCapture

Upvotes: 2

Views: 5131

Answers (1)

Seth Lutske
Seth Lutske

Reputation: 10676

In your app, the Webcam component is loaded when WebcamCapture mounts. When Webcam loads, it will ask for perimission. If you want to not load the Webcam component until the user presses the button, you need to conditionally render the Webcam based on a state variable that is controlled with a button. For example, have a button that once pressed, renders the webcam and the button to take a photo:

const WebcamCapture = () => {
  const webcamRef = React.useRef(null)
  const [camOpen, setCamOpen] = React.useState(false)
  const [imgSrc, setImgSrc] = React.useState(null)


  const capture = React.useCallback(() => {
    if (webcamRef){
      const imageSrc = webcamRef.current.getScreenshot()
      setImgSrc(imageSrc)
    }
  }, [webcamRef, setImgSrc, webcamRef])

  return (
    <div>

      {camOpen && 
        <>
          <div className="...">
            <Webcam/>
          </div>
          <div className="flex justify-end mt-5">
            <button
              className="..."
              onClick={capture}>
                Usar Camara web <BiWebcam className="ml-2 text-base" />
            </button>
          </div>
        </>
      }

      <button onClick={capture}>Open the camera</button>

      {imgSrc && <img src={imgSrc} />}

    </div>
  )
}
export default WebcamCapture

But you can't have the Webcam already being in use, then only ask for permission to use it once the user wants to take a photo. You can create a custom modal that says something like "Are you sure you want to take a photo?" once the user clicks the button to capture a photo, but in order for the webcam to render, it needs permission first.

Upvotes: 1

Related Questions