Chrome移动相机100％的屏幕尺寸？

Question

我正在使用以下代码访问摄像头并显示流。由于某种原因，它是100％宽度，但只有70％的高度。让它填满屏幕的最佳方法是什么？

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();

这最终看起来像这样：

更新

我将.video CSS更改为以下内容：

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

这使得它填满了屏幕，但是，现在容器比屏幕宽，这会导致一些溢出问题。

Answer 1

看起来像添加容器解决了这个问题。

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

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