Estoy usando react-webcam para tomar una foto (captura de pantalla) y configurar esa captura de pantalla al tamaño de la ventana. Con el código publicado a continuación, puedo hacer que la captura de pantalla se ajuste al tamaño completo de la ventana para algunos dispositivos (emulador Galaxy S5 (360x640) y en mi PC (1707x956px)). Sin embargo, no funciona en los emuladores de iPad (768x1024)/iPhone/Pixel 2. Con el atributo de estilo (vea el código a continuación) puedo hacer que la cámara (antes de la captura) se ajuste completamente al tamaño de la ventana en cualquier dispositivo. ¿Por qué no puedo hacer lo mismo con la captura de pantalla?
Aquí hay un enlace a la caja de arena: https://codesandbox.io/s/8to8e?file=/src/App.js
Este es mi componente de cámara web:
<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"}} />¡Cualquier ayuda sería apreciada!
Mi proyecto actual también usa react-webcam. Agregué una clase de estilo para la etiqueta de video en index.css.
video { max-width: 100%; object-position: center; object-fit: cover!important; }