react-webcam (npm package) video sizing

Question

I'm using the npm package react-webcam in my react app,

the <Webcam /> component is wrapped in a div that has {width: 100vw, height 100vh}

I want the video element to take after the parent div's dimensions and take up 100% of the screen view at all times, including when browser is resized, but there seems to be a certain ratio restriction.

^ the video element in the middle should take up the whole space that's coloured black.

Things I've tried:

set <Webcam />'s height and width to 100%
set <Webcam />'s height and width to 100vh and 100vw
set videoConstraint's height and width to auto (this does nothing)
set videoConstraint's height and width to 100% (this just gives me error)
remove videoConstraint's height and width specification altogether

I've come to a speculation that videoConstraint must have some default specifications but i'm not sure how to overwrite it.

Code:

const videoConstraints = {
   width: 1280,
   height: 720,
   facingMode: "user"
}


ReactDOM.render( 
 <div className = 'webcam' >
  <Webcam 
  audio = {false}
  height = {100 + '%'}
  width = {100 + '%'}
  screenshotFormat = 'image/jpeg'
  videoConstraints = {videoConstraints}
  /> 
 </div>,
  document.getElementById('root')
);

.webcam {
  padding: 2.5rem 3.5rem;
}

video {
  background-color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
<script src="https://unpkg.com/react-webcam/dist/react-webcam.min.js"></script>
<div id="root"></div>

official react-webcam npm page

https://www.npmjs.com/package/react-webcam

@Selo, did you ever find a solution to this issue? Or did you find a better image capture approach? — Phillip Stack, Jul 10 '20 at 14:31
yeah I'd like to know the same. I'm working on this library now and I wonder how to fit the webcam content equal to its parent height and width — Akhil, Jul 14 '20 at 04:23
Is there any way to set up Zoom and Magnification with this? — Mars2024, Mar 11 '22 at 01:09
check what browser you are using, mozilla firefox did NOT work for me. Safari and Chrome did. — Wizard, Jul 14 '22 at 05:55

Hudhaifah Zahid · Answer 1 · 2020-09-13T01:21:23.280

You may benefit from using a hook to retrieve screen size:

  const isLandscape = size.height <= size.width;
  const ratio = isLandscape ? size.width / size.height : size.height / 
  size.width;

  // Hook
    function useWindowSize() {
    // Initialize state with undefined width/height so server and client renders match
    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
    const [windowSize, setWindowSize] = useState({
      width: undefined,
      height: undefined,
    });

    useEffect(() => {
        // Handler to call on window resize
        function handleResize() {
          // Set window width/height to state
          setWindowSize({
            width: window.innerWidth,
            height: window.innerHeight,
          });
        }
        
        // Add event listener
        window.addEventListener("resize", handleResize);
        
        // Call handler right away so state gets updated with initial window size
        handleResize();
        
        // Remove event listener on cleanup
        return () => window.removeEventListener("resize", handleResize);
      }, []); // Empty array ensures that effect is only run on mount
    
      return windowSize;
    }

You can then use the size for the Webcam dimensions and aspect ratio:

        <Webcam 
        height={size.height} 
        width={size.width}
        videoConstraints={{facingMode: 'user', aspectRatio: ratio}
        ref={camera => window.camera = camera} />

Reference: https://usehooks.com/useWindowSize/
Demo: https://carmodity-camera.netlify.app/

This is probs the only real way to set webcam to fullscreen on mobile. Messing around with css always seems to fail somewhere and somehow. — wanna_coder101, Oct 23 '22 at 03:07

score 1 · Answer 2 · answered Jul 17 '20 at 08:19

1

Try to add your style to the video element inside the react-webcam like this. I have tried it and working fine

 <div id="video-stream">
        <Webcam
          audio={false}
          screenshotFormat="image/jpeg"
          forceScreenshotSourceSize="true"
        />
</div>

style

#video-stream {
  video {
    width: 100%;
  }
}

answered Jul 17 '20 at 08:19

riyasyash

174
3
10

Style css did not work for me, instead setting `className = "my-webcam-class" ` for `Webcam` Component allowed me to select it and then set width to 100% – Jean Bouvattier Oct 26 '20 at 13:31

score 0 · Answer 3 · answered Jul 16 '22 at 17:34

You can write like this, this will change the default video size parameters, add these in the webcam styles

position: "absolute" height: "100vh", width: "100%", objectFit: "fill"

For example, You can write like this, this will change the default video size parameters, add these in the webcam styles

position: "absolute" height: "100vh", width: "100%", objectFit: "fill"

For example,

<Webcam
ref={webcamRef}
muted={true}
          videoConstraints={videoConstraints}
          style={{
          position: "absolute",
            textAlign: "center",
            zindex: 8,
            right:0,
            height: "100vh",
             width: "100%",
             objectFit: "fill",
          }}
        />

react-webcam (npm package) video sizing

3 Answers3

Linked