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?
解决方案
我解决这个问题的方法是:

无 Canvas

请求 720p 提要，如果 720 给出过度约束的错误，则回退到 480p 提要。这将跨浏览器工作。

有一个 100% 宽度和高度的 div 元素，填充屏幕，并将覆盖设置为隐藏。

将连接到 MediaStream 的视频元素放在里面，使其达到容器的 100% 高度。隐藏的父 div 叠加层实际上会裁剪边。不会有饲料失真。

带 Canvas

不显示视频元素，使用 Canvas 作为视频 View 。使 Canvas 与屏幕大小相同或纵横比相同，并使用 CSS 使其填满屏幕(后者性能更高)。

计算顶部、左侧、宽度和高度变量以在 Canvas 中绘制视频(确保您的计算以视频为中心)。确保您进行了覆盖计算与填充。目的是裁剪视频中不需要显示的部分(即像 https://css-tricks.com/almanac/properties/o/object-fit 中各种方法的描述)。此处有关如何将视频绘制到 Canvas 中的示例:http://html5doctor.com/video-canvas-magic/

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

https://www.maxfactor.com/vmua/

https://demo.holitionbeauty.com/

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