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%;}
 }

Chrome 手机摄像头100%屏幕尺寸？

Chrome mobile camera 100% screen size?

html

javascript

css

android

android-camera