how to make react webcam responsive - reactjs

Question

[`
import React, { useCallback, useRef, useState } from 'react';
import Webcam from 'react-webcam';
import RadioButtonUncheckedIcon from '#material-ui/icons/RadioButtonUnchecked';
import { useDispatch } from 'react-redux';
import { setCameraImage } from './features/cameraSlice';
import { useHistory } from 'react-router-dom';
import './WebcamCapture.css';
var elem =
document.compatMode === 'CSS1Compat'
? document.documentElement
: document.body;
const videoConstraints = {
width: elem.clientWidth,
height: elem.clientHeight,
facingMode: 'environment',
};
function WebcamCapture() {
const webcamRef = useRef(null);
const dispatch = useDispatch();
const history = useHistory();
const capture = useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot();
dispatch(setCameraImage(imageSrc));
history.push('/preview');
}, [webcamRef]);
return (
<div className="webcamCapture">
<Webcam
audio={false}
height={videoConstraints.height}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={videoConstraints.width}
videoConstraints={videoConstraints}
/>
<RadioButtonUncheckedIcon
className="webcamCapture__button"
onClick={capture}
fontSize="large"
/>
</div>
);
}
export default WebcamCapture;
.webcamCapture {
position: relative;
width: 100%;
}
.webcamCapture__button {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
color: white;
}
`]1
`I want the video element to take after the screen's dimensions and take up 100% of the screen view at all times, including when browser is resized or when done on mobile but there seems to be a certain ratio restriction.
for mobile devices its not taking up the entire screen
please help me with the entire code so that it's responsive on all devices

Answer 1

To apply a custom style for mobile screens, you will have to detect mobile screens first using
#media then apply custom style.
I have added a solution below which I expect to work, detecting 640px & 768px max width devices and I have added height:100%;, width:100%;.
.webcamCapture {
position: relative;
width: 100%;
}
#media only screen and (max-device-width : 640px) {
.webcamCapture {
position:fixed;
height:100%;
width:100%;
}
}
#media only screen and (max-device-width: 768px) {
.webcamCapture {
position:fixed;
height:100%;
width:100%;
}
}