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 不会使用您选择的摄像头（我假设是正面）模拟您要求的分辨率。

您可以在此处阅读更多相关信息（不同的问题，但提供了更深入的解释）：

解决方案

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

没有canvas

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

与canvas

不显示视频元素，使用 canvas 作为视频视图。使 canvas 与您的屏幕大小相同或纵横比相同，并使用 CSS 使其填满屏幕（后者性能更高）。
计算顶部、左侧、宽度和高度变量以在 canvas 中绘制视频（确保您的计算使视频居中）。确保你进行了覆盖计算与填充。目的是裁剪视频中不需要显示的部分（即像https://css-tricks.com/almanac/properties/o/object-fit) . Example on how to draw video into a canvas here: 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 设备上。

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

第三，我通过在我的小网络应用程序中放置一个 <video ...> 标签来计算我需要的大小 CSS 使其填满浏览器屏幕，然后使用 [=13= 查询其大小]

   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（自拍）手机全屏

getUserMedia (Selfie) Full Screen on Mobile

getusermedia