Caméra mobile Chrome Taille de l'écran 100%?

Question

J'utilise le code suivant pour accéder à la caméra et afficher le flux. Pour une raison quelconque, il s'agit d'une largeur de 100%, mais seulement de 70% de hauteur. Quel est le meilleur moyen de le faire remplir l'écran?

HTML

<video autoplay class="screen"></video> 

CSS

video { 
    height: 100%; 
    width: 100%; 
    border: 1px solid blue; //so I can see the size of the element 
} 

JS

var video = document.querySelector('video'); 

function startStream() { 
    // Get access to the camera! 
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
     // Not adding `{ audio: true }` since we only want video now 
     navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) { 
      video.src = window.URL.createObjectURL(stream); 
      /*video.play();*/ 
     }); 
    } 
} 

startStream(); 

Cela finit par ressembler à ceci:

---

Mise à jour

J'ai changé le .video CSS à ce qui suit:

video { 
    height: 100%; 
    overflow: hidden; 
    max-width: 100%; 
} 

Cela en fait remplir l'écran, cependant, maintenant le conteneur est plus large que l'écran qui cause certains problèmes de débordement.

Answer 1

Il semble que l'ajout d'un conteneur a résolu le problème.

<div id="videoContainer"><video autoplay class="screen"></video></div> 

#videoContainer { 
    box-sizing: border-box; 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
    video { height: 100%;} 
}