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

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，高于 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) 将始终为您提供本机模式。

Answer 2

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

摄像头分辨率会影响流的质量 returned，但如果您可以强制执行纵横比，则在很大程度上是浏览器问题。

我将在此处使用的示例基于我当前使用的设置... Tecknet 1080p 网络摄像头（便宜又好用，不提供 16:9/4:3 以外的任何方面，但驱动程序支持 1 的方面），Win7，chrome，firefox和浏览器。 Android 手机 phone（一加 x）使用 chrome 浏览器

我想达到的目标和1上面的人是一样的，至于为什么我要为那些对跨浏览器和跨设备设计的现代世界不了解的人这样做是因为一个问题当设备在纵向和横向之间旋转时，会出现在移动设备上。切换这些视图类型后，浏览器会以其所有智慧自动切换流的高度和宽度，这意味着无论您希望强制执行什么，移动设备都会避开它并强制执行其自己的一组尺寸，这对开发人员来说意味着不一致的结果.

我们如何解决这个问题？

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

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

Answer 3

您可以使用 aspectRatio 属性.

设置纵横比

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

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

此外，如果您的摄像头分辨率最大为 720p，但它确实支持 1:1 比率，则它会以 720x720 分辨率开始播放视频。

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

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

javascript

webrtc

getusermedia