'Make screenshot fit window size (full-screen)

I'm using react-webcam to take a photo (screenshot) and set that screenshot to the size of the window. With the code posted below, I'm able to make the screenshot fit the full size of the window for some devices (Galaxy S5 emulator (360x640) and on my PC (1707x956px)). However, it doesn't work on the iPad (768x1024)/iPhone/Pixel 2 emulators. With the style attribute (see the code below) I am able to make the camera (before capture) fit the window size fully on any device. Why is it that I can't do the same for the screenshot?

Here is a link to the sandbox: https://codesandbox.io/s/8to8e?file=/src/App.js

This is my webcam component:

        <Webcam
          audio={false}
          screenshotFormat="image/webp"
          videoConstraints={{
            height: this.state.screenHeight,
            width: this.state.screenWidth
          }}
          minScreenshotHeight={this.state.screenHeight}
          minScreenshotWidth={this.state.screenWidth}
          ref={this.setRef}
          style = {{width: "100%", height: "100%", position: "absolute", left: "50%", marginLeft: "-50%", objectFit: "cover", objectPosition: "center"}}
        />

Any help would be appreciated!

javascriptcssreactjsimagewebcam


Solution 1:[1]

My current project uses react-webcam too. I added a style class for the video tag in index.css.

video {
  max-width: 100%;
  object-position: center;
  object-fit: cover!important;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Neda Peyrone

Related Questions