Question

使用此设置时，视频宽高比为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？感谢

Answer 1

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

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

你还没有说过为什么你关心方面，但我怀疑你仍然希望球看起来像圆形而不是椭圆形，所以如果你的网站想让我的相机的视频适合广场，那么它就是这样的。我需要裁剪视频的左右两部分，或者在上方和下方使用黑条。没办法。

如果只是关于布局，请单独留下捕捉方面，然后使用CSS裁剪播放元素（用btw缩放视频）。这使您可以完全控制（在Chrome中使用https fiddle）：

＆＃13;

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>";

＆＃13;

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

＆＃13;

<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>

＆＃13;

另外，请注意浏览器的不同之处，有些浏览器（Chrome）会为您拍摄（裁剪）相机捕获，而其他浏览器（Firefox）将始终为您提供原生模式。

Answer 2

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

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

在这种情况下，如果用户的相机支持 1:1 的纵横比，则网站将使用它。如果它不受支持，它将使用不同的。

此外，如果您的相机分辨率最大为 720p，但它确实支持 1:1 的比例，则它将以 720x720 的分辨率开始视频。

Answer 3

之前的答案可能是正确的，但现在错了。相机的分辨率并没有真正影响这一点，更多的是关于所使用的浏览器和最终用户计算机上的驱动程序。

摄像头分辨率会影响返回的流的质量，但是如果你可以强制实施宽高比则是一个很大的浏览器问题。

我将在这里使用的示例基于我目前正在使用的设置... Tecknet 1080p网络摄像头（便宜又开朗，不提供16：9/4：3以外的任何方面，但驱动程序支持1 方面），Win7，Chrome，Firefox和IE。使用Chrome浏览器的Android手机（一加x）

我想要达到的目标与1以上的人相同，至于为什么我这样做对于那些对跨浏览器和跨设备设计的现代世界没有启发的人来说是由于出现的问题设备在纵向和横向之间旋转时的移动设备。在切换这些视图类型时，浏览器将自动切换流的高度和宽度，这意味着无论您希望强制执行什么，移动设备都会回避它并强制执行其自己的维度集，这意味着开发人员的结果不一致

我们如何解决此问题？

轻松实施1个方面的含义，无论设备旋转如何，您的图片将始终返回方形图像，从而为您提供一致的结果。真正的问题，WebRTC的方面实施仅限于Chrome（Android和PC），IE Edge显然也可以做到这一点，但是由于我使用的是win7，我无法验证这一事实。遗憾的是，支持WebRTC的Firefox在约束条件下效果不佳，并且如果可能的话，将返回一个流，无论它是否满足您的约束条件，因为chrome将返回一个错误说明超过约束。这个问题的存在主要是因为WebRTC在所有浏览器中仍然没有标准化，因此意味着你仍然可能遇到奇怪而美妙的结果和不一致的结果，但是当闪存出来时你有限制选项，而不是希望他们最终获得api无论浏览器如何，都能提供一致的结现在你需要回到检查元数据，一旦你的蒸汽开始弄清楚你是否得到你在firefox中要求的那么，如上面建议裁剪，如果它纯粹是视觉或如果它的实际使用然后添加一个帖子的主机处理以使结果符合您的要求。

我自己正在拼命尝试制作跨设备，跨浏览器系统来处理流媒体。

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

3 个答案: