Currently, I am using the code below to access the camera and display the stream. The width of the element is 100%, but the height seems to be around 70%. Is there a better way to make it fill the entire screen?
HTML
<video autoplay class="screen"></video>
CSS
video {
height: 100%;
width: 100%;
border: 1px solid blue; //used for visualizing the size
}
JS
var video = document.querySelector('video');
function startStream() {
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
/*video.play();*/
});
}
}
startStream();
The current appearance is shown in the link below:
https://i.sstatic.net/wCxXr.png
Update
I have updated the CSS for .video as follows:
video {
height: 100%;
overflow: hidden;
max-width: 100%;
}
This adjustment successfully fills the screen, but now the container extends beyond the screen causing issues with overflow.