如何在移动网络应用程序上全屏查看网络摄像头 [重复]答案

【问题标题】：How do I make webcam view fullscreen on mobile webapp [duplicate]如何在移动网络应用程序上全屏查看网络摄像头 [重复]
【发布时间】：2020-01-21 10:26:03
【问题描述】：

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

我应该使用什么样式来实现这一点，还是需要编写一些 javascript 来提供帮助？

到目前为止，我只有以下几点：

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

    background-color: #666;
}

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

【问题讨论】：

不能强制视频全屏，用户可以全屏

标签： javascript html css progressive-web-apps webcam

【解决方案1】：

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

所以 CSS 会变成这样：

 #videoElement 
 {
   width: 100%;
 }

【讨论】：

我试过了，但它没有显示手机相机应用程序在全屏模式下的全部情况

【解决方案2】：

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

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

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

【讨论】：

到目前为止，这似乎效果最好?我将把它打开一天，看看其他人是否有其他解决方案，以便他们可以发布她。但绝对做到了我想要的。现在将其居中并删除滚动选项?
vh 效果很好。就像我说的，我遇到了很多这类问题，它是一个很好的工具。

【解决方案3】：

将此属性添加到视频标签

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

【讨论】：

全屏不是指整个浏览器，而是指整个窗口，没有浏览器chrome
@JuanMendes 你明白解释我想要什么比我做的更好?
@MarcoFernandes 我几乎明白这条评论是什么意思? 你是说你只是要求视频占据整个浏览器吗？如果你这样做了，那与视频无关。任何标签都有相同的解决方案。无论哪种方式，这两个问题在堆栈溢出时都已经有了答案。
@JuanMendes 我基本上只是希望用户在手机上打开网站并且相机占据整个屏幕。不允许用户滚动浏览器或任何东西。基本上试图通过网站复制普通手机相机应用程序会做的事情。我知道最好的方法可能是构建一个 Flutter 应用程序，但这个应用程序太基础了，我想构建一个渐进式 Web 应用程序。