问如何在WebRTC中始终保持1:1宽高比视频

EN

你在这里询问的是getUserMedia，它实际上是关于相机分辨率的。

相机捕捉视频的分辨率取决于您的硬件。例如，我的相机可以在许多模式下拍摄，它们都是4:3模式，直到大约640x480，更高的是16:9。它没有1:1模式(我检查过了)。

你还没有说为什么你关心aspect，但我怀疑你仍然希望一个球看起来是圆形的，而不是椭圆形的，所以如果你的网站希望我的摄像头拍摄的视频适合一个正方形，它需要要么裁剪掉我视频的左右两部分，要么在上面和下面受到黑条的影响。没有办法绕过它。

如果只是关于布局，那就让捕获方面保持不变，而用CSS裁剪播放元素(它会为你缩放视频)。这使您可以完全控制(在Chrome中使用https fiddle )：

​

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => video.srcObject = stream)
  .then(() => new Promise(resolve => video.onloadedmetadata = resolve))
  .then(() => log(video.srcObject.getVideoTracks()[0].label +
                  " ("+ video.videoWidth +"x"+ video.videoHeight +")"))
  .catch(log);

var log = msg => div.innerHTML += msg + "<br>";

.crop{
  overflow:hidden;
  display:block;
  width: 120px;
}
#video{
  margin-left: -15px;
}

<div class="crop"><video id="video" width="160" height="120" autoplay></video></div>
<br><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

​

此外，请注意这里的浏览器差异，一些浏览器(Chrome)会为您更改(裁剪)相机捕捉，而其他浏览器(Firefox)将始终为您提供本机模式。

可以使用aspectRatio属性设置纵横比。

​

video: {
 width: {max: 1024},
 height: {max: 1024},
 aspectRatio: {ideal: 1}
}

​

在这种情况下，如果用户的摄像头支持1:1的宽高比，网站将使用它。如果它不被支持，它将使用一个不同的版本。

此外，如果你的相机分辨率最高为720p，但它支持1:1的比例，它将开始一个720x720分辨率的视频。

之前的答案在当时可能是正确的，但现在是错误的。摄像头的分辨率并不会真正影响这一点，这更多地取决于所使用的浏览器和最终用户计算机上的驱动程序。

摄像头的分辨率将影响返回的流的质量，但如果您可以强制使用宽高比，这在很大程度上是浏览器的问题。

我将在这里使用的示例是基于我目前正在使用的设置...Tecknet 1080p摄像头(价格便宜，令人愉悦，不提供超过16:9/4:3的任何方面，但驱动程序支持1的方面)，Win7，铬，火狐和IE。使用chrome浏览器的Android手机(一加x)

我试图实现的是与上面的人相同的1的方面，至于为什么我为那些不了解现代世界的跨浏览器和跨设备设计的人这样做是由于当设备在纵向和横向之间旋转时在移动设备上出现的问题。在切换这些视图类型时，浏览器会全力以赴地自动切换数据流的高度和宽度，这意味着无论你希望强制执行什么，移动设备都会绕过它，强制执行它自己的一组维度，这对开发人员来说意味着不一致的结果。

我们如何解决这个问题？

很容易，你强制执行1的一个方面，这意味着无论设备旋转，你的图片总是会返回一个正方形的图像，从而给你一个一致的结果。真正的问题是，WebRTC上的方面强制执行仅限于Chrome (包括安卓和pc) IE Edge显然也可以做到这一点，但由于我使用的是win7，我无法验证这一事实。不幸的是，支持WebRTC的火狐不能很好地处理约束，如果可能，它将返回一个流，而不管它是否满足您的约束，而chrome将返回一个错误，声明over constraint。这个问题的存在主要是因为WebRTC仍然不是所有浏览器的标准，这意味着你仍然可能遇到奇怪的、奇妙的结果和不一致的结果，但随着flash的退出，你有有限的选择，除了希望他们最终得到的api给出一致的结果而不管浏览器。现在，你需要退回到检查元数据，一旦你的流开始弄清楚你在firefox中是否得到了你想要的，然后按照上面的建议裁剪，如果它纯粹是视觉上的，或者是实际使用的，然后添加一系列的后处理，以使结果符合你的要求。

我自己也在不顾一切地尝试生产一种跨设备、跨浏览器的流媒体处理系统。