如何在移动网络应用程序上全屏显示网络摄像头

Question

我正在尝试将我的网络摄像头视图拉伸到全屏，但我似乎无法在不降低质量或拉伸图像的情况下正确处理。

我应该使用什么样式来实现这个，或者我需要写一些 javascript 来帮助？

到目前为止，我只有以下内容：

#CSS FILE
/* Camera */
#videoElement {
    /*width: 500px;*/
    /*height: 100%;*/
    min-height:100%;

    background-color: #666;
}

#HTML FILE
    <video autoplay="true" id="videoElement"></video>

Answer 1

尝试仅将 #videoElement 的宽度设置为 width: 100%。

所以 CSS 会像这样：

 #videoElement 
 {
   width: 100%;
 }

Answer 2

尝试将视图高度设置为 100%，这让我解决了很多此类问题。

https://www.w3schools.com/CSSref/css_units.asp

/*CSS*/
{
  width: 100vh;
}

Answer 3

将此属性添加到视频标签

 webkit-playsinline="true" playsinline="true"

如何在移动网络应用程序上全屏显示网络摄像头

How do I make webcam view fullscreen on mobile webapp

javascript

html

css

progressive-web-apps

webcam