javascript - 如何保持 1 :1 aspect ratio video all the time in WebRTC

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) 将始终为您提供 native 模式。