getUserMedia（自拍）在移动设备上全屏

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?

解决方案

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

1. 没有画布

• 请求 720p 提要，如果 720 给出过度约束的错误，则回退到 480p 提要。这将适用于跨浏览器。
• 拥有一个 100% 宽度和高度的 div 元素，填满屏幕，并将叠加层设置为隐藏。
• 将连接到 MediaStream 的视频元素放在里面，使其达到容器的 100% 高度。隐藏的父 div 叠加层实际上会裁剪边。不会出现饲料失真。

1. 带画布

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

这将为您提供与您正在寻找的相同的效果。类似产品的生产示例。

• https://www.maxfactor.com/vmua/
• https://demo.holitionbeauty.com/

附：当我有时间时，我可以编写一个示例，这周的时间很短。

Answer 2

您需要了解有关移动 gUM() 的几个怪癖。

首先，如果设备是纵向的，事情就会很奇怪。您需要交换宽度和高度。因此，假设您使用的是 480x640 设备（这些设备是否存在？谁在乎？这是一个例子）。要获得您需要的适当尺寸的视频

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

我无法弄清楚为什么会这样。但它是。在 iOS 和 Android 设备上。

其次，很难让相机提供与设备屏幕尺寸完全相同的分辨率。我调整了宽度和高度，使它们能被 8 整除，我得到了不错的结果。

第三，我通过将<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

这使移动浏览器能够确定您实际需要的尺寸，并很好地适应浏览器的各种工具栏。