Is there a way to display a placeholder while the camera is loading ?

[JeanPaul1789]

Hello, i'm trying to do a photobooth app, i'm using it on a tablet that is not very efficient, so the camera is loading during 3/4 seconds before showing the video feed.

I was wondering if there was a way to display a placeholder while the camera is loading. I tried to use a simple title but with the css attribute z-index to show. Here is the code i use:

The return of my page

return (
        <header className="App-header">
            <div className='content'>
                <div className='webcam'>
                    <Webcam
                        audio={false}
                        ref={webcamRef}
                        screenshotFormat="image/jpeg"
                        width={windowSize.width - 300}
                        videoConstraints={videoConstraints}
                        screenshotQuality={1}
                        mirrored={true}
                    />
                </div>
                <p className='placeholder-camera'>Camera is loading</p>
            </div>
            <button className='button' onClick={capture} disabled={isDisabled}></button>
        </header>
    )

css:

.button {
    position: absolute;
    top: 80%;
    border-radius: 100%;
    background-color: transparent;
    border: 10px solid white;
    height: 150px;
    width: 150px;
    z-index: 3;
}

.webcam {
    z-index: 2;
}

.placeholder-camera {
    position: absolute;
    top: 50%;
    left: calc(50% - (196.950px/2));
    z-index: 1;
}

This method don't work, but because I'm a beginner in html/css you could see what's wrong.

So do you know any other method to display a placeholder when the camera is loading ?

Thank you

[alperkilickaya]

witt MaterialUI components

........
const [isCameraLoading, setIsCameraLoading] = useState(true);

const handleCameraLoaded = () => {
    setIsCameraLoading(false);
  };

return(
.......
{isCameraLoading && (
      <Typography
        color={(theme) => theme.palette.neutral[700]}
        variant="subtitle2"
        sx={{
          fontWeight: 700,
          textAlign: "center",
        }}
      >
        Loading Camera...
      </Typography>
      )}
      <Webcam
        audio={false}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        screenshotQuality={1}
        width={240}
        height="auto"
        onUserMedia={handleCameraLoaded}
        />
  )