Question

我有以下限制，这些限制在桌面版Chrome（模拟移动分辨率）上可以很好地工作

const constraints = {
    audio: false,
    video: {
        width: screen.width,
        height: screen.height
    }
};

navigator.mediaDevices.getUserMedia(constraints).then(stream => {})

但是，当在iPhone / Safari上实际尝试使用此功能时，相机根本不尊重它，并且变得非常小或变形-从约束条件中删除宽度/高度可以使其具有更好的比例，但根本无法全屏显示，而只是集中显示。

我也尝试过最小/最大约束，但并不幸运。

有什么办法可以在iPhone上使用它吗？

Answer 1

我建立了一些移动优先的AR网站。当您请求解决方案时，Web浏览器会查看该解决方案是否存在，如果不存在，则决定是否为您模拟提要。并非所有浏览器都可以进行仿真（即使它是规范的一部分）。这就是为什么它可以在某些浏览器而不是其他浏览器中工作的原因。 Safari不会使用您选择的摄像头（我想是前置摄像头）来模拟您要求的分辨率。

您可以在此处了解更多信息（不同的问题，但提供了更深入的说明）：Why the difference in native camera resolution -vs- getUserMedia on iPad / iOS?

解决方案

我解决这个问题的方法是：

没有画布

询问720p提要，如果720提供了过度约束的错误，则回退到480p提要。这将可以跨浏览器工作。
具有一个宽度和高度为100％的div元素，填满了屏幕，并将叠加层设置为隐藏。
将连接到MediaStream的视频元素放到内部，使其高度达到容器的100％。隐藏的父div覆盖实际上将裁剪边。不会有饲料变形。

使用画布

不显示视频元素，请使用画布作为视频视图。使画布与屏幕大小相同或相同的宽高比，并使用CSS使其填充屏幕（后期效果更好）。
计算顶部，左侧，宽度和高度变量，以将视频绘制在画布中（确保您的计算将视频居中）。确保进行覆盖计算与填充。目的是裁剪视频中不需要显示的部分（例如，https://css-tricks.com/almanac/properties/o/object-fit中各种方法的描述）。有关如何在此处将视频绘制到画布中的示例：http://html5doctor.com/video-canvas-magic/

这将为您提供所需的效果。类似产品的生产示例。

P.s。当我有时间时，我可以编写一个示例，这个星期的时间很短。

Answer 2

您需要了解有关移动gUM（）的一些怪癖。

首先，如果设备为纵向，则工作异常。您需要交换宽度和高度。因此，假设您使用的是480x640的设备（这些设备是否存在？谁在乎？这是一个示例）。要获得合适尺寸的视频，您需要

const constraints = {
   audio: false,
   video: {
    width: screen.height,
    height: screen.width
  }
};

我不知道为什么会这样。但它是。在iOS和Android设备上。

第二，很难使相机提供与设备屏幕尺寸完全相同的分辨率。我调整宽度和高度，使它们可以被八整除，然后得到不错的结果。

第三，我通过在CSS的小型Web应用程序中放置一个<video ...>标签来确定所需的大小，该标签使CSS填满了浏览器屏幕，然后使用

来查询其大小。

   const rect = videoElement.getBoundingClientRect()
   const width = rect.width > rect.height ? rect.width : rect.height
   const height = rect.width > rect.height ? rect.height : rect.width

这使移动浏览器可以确定您实际需要的大小，并且可以很好地适应浏览器的各种工具栏。

移动设备上的getUserMedia（Selfie）全屏

2 个答案: