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!
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;
}