如何在WebRTC中始终保持1:1的纵横比视频

How to keep 1:1 aspect ratio video all the time in WebRTC

本文关键字：视频 WebRTC 始终保持      更新时间：2023-09-26

使用此设置时，视频纵横比为1:1。

constraints = {
  audio: false,
  video: { width: 240, height: 240 }
};

但是，如果存在，我希望WebRTC选择更好的分辨率。当我把它改成这个

constraints = {
  audio: false,
  video: {
    width: { min: 240, ideal: 720, max: 1080 },
    height: { min: 240, ideal: 720, max: 1080 }
  }
};

演示jsfiddle

在我的情况下，有时会变成4:3，也就是640*480。我认为这是因为640和480都在240和1080之间。

如何始终保持1:1？感谢

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

相机拍摄视频的分辨率取决于硬件。例如，我的相机可以在多种模式下拍摄，它们都是4:3模式，最高可达640x480，高于此模式的都是16:9。它没有1:1模式（我检查过）。

你还没有说你为什么关心方面，但我怀疑你仍然希望一个球看起来是圆形的，而不是椭圆形的，所以如果你的网站希望我的相机拍摄的视频适合方形，它需要裁剪出我视频的左右部分，或者上下都有黑条。没有办法绕过它。

如果只是关于布局，请不要使用捕捉方面，而是使用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、chrome、firefox和IE。安卓手机（一加x）使用铬浏览器

我试图实现的目标与上述1的一个方面的人相同，至于我为什么要为那些不了解跨浏览器和跨设备设计的现代世界的人这样做，是因为当设备在纵向和横向之间旋转时，移动设备上出现了一个问题。在切换这些视图类型时，浏览器会自动切换流的高度和宽度，这意味着无论你想强制执行什么，手机都会避开它，强制执行自己的一组维度，这对开发者来说意味着不一致的结果。

我们如何解决此问题

你可以很容易地执行1的方面，这意味着无论设备旋转如何，你的图片都会返回一个正方形的图像，从而给你一个一致的结果。真正的问题是，WebRTC上的方面强制仅限于Chrome（包括android和pc）。IE Edge显然也可以做到这一点，但由于我使用的是win7，我无法验证这一事实。不幸的是，支持WebRTC的Firefox在约束条件下不能很好地工作，如果可能的话，无论它是否满足您的约束条件，都会返回一个流，其中aschrome将返回一个错误，说明过度约束。这个问题的存在主要是因为WebRTC仍然没有在所有浏览器中标准化，这意味着你仍然可能会遇到奇怪而美妙的结果和不一致的结果，但随着flash的推出，你除了希望他们最终获得api来提供一致的结果之外，还有其他限制选项。现在，一旦你的steam开始弄清楚你是否在firefox中得到了你想要的东西，你就需要重新检查元数据，然后按照上面的建议，裁剪它是纯粹用于视觉还是实际使用，然后添加大量的后处理，使结果符合你的要求。

就我自己而言，我正在不顾一切地尝试生产一个用于处理流媒体的跨设备、跨浏览器系统。

相关文章：