如何在WebRTC中始终保持1：1宽高比视频 [英] How to keep 1:1 aspect ratio video all the time in WebRTC

问题描述

当我使用此设置时，视频宽高比为1：1。

When I use this setting, the video aspect ratio is 1:1.

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

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

However, I want WebRTC choose better resolution if exists. When I changed it to this

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之间。

In my case, sometimes, it becomes 4:3, which is 640*480. I think it is because both the number 640 and 480 are between 240 and 1080.

我怎样才能一直保持1：1？谢谢

How can I keep it 1:1 all the time? Thanks

推荐答案

你在这里询问 getUserMedia ，这是有效的关于相机分辨率。

You're asking about getUserMedia here, which is effectively about camera resolutions.

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

What resolutions your camera captures video in depends on your hardware. My camera for instance, can capture in a number of modes, they're all 4:3 modes up to about 640x480, and above that they're all 16:9. It has no 1:1 modes (I checked).

你还没有说出为什么你关心方面，但我怀疑你仍然希望一个球出现在圆形和不是椭圆形的，所以如果你的网站希望我的相机中的视频适合广场，它需要裁剪我的视频的左右部分，或者遭受上下黑条。没有办法解决它。

You haven't said why you care about aspect, but I suspect you still want a ball to appear round and not oval, so if your site wants video from my camera to fit in a square, it'll need to either crop out the left and right parts of my video or suffer black bars above and below. No way around it.

如果它只是关于布局，请保留捕获方面，然后使用CSS裁剪回放元素（用btw缩放视频）。这使您可以完全控制（在Chrome中使用 https小提琴）：

If it's just about layout, leave the capture aspect alone and crop the playback element (which scales the video for you btw) with CSS instead. This gives you full control (use https fiddle in Chrome):

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）将始终为您提供原生模式。

Also, please be aware of browser differences here, some browsers (Chrome) will mutate (crop) the camera capture for you, while others (Firefox) will always give you native modes.

这篇关于如何在WebRTC中始终保持1：1宽高比视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！