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

Posted 2023-05-07

【中文标题】如何在移动网络应用程序上全屏查看网络摄像头 [重复]

【英文标题】：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>

【问题讨论】：

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

【参考方案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 应用程序。