如何在 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，在此之上它们都是 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) 将始终为您提供本机模式。