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

当我使用此设置时，视频宽高比为1：1。如何在WebRTC中始终保持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？谢谢

来源

2016-04-30 Hongbo Miao

请注意，您的提琴不工作在Firefox。只需使用'video.src = URL.createObjectURL（stream）'，或者从Chrome 52开始，您可以在两个浏览器中使用'video.srcObject = stream'。 – jib

你在这里问关于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）将始终为您提供原生模式。

来源

2016-05-01 01:59:47 jib

非常感谢你的详细解答！我会尽快回复！ –

我刚刚有时间测试，我认为这是一个好方法。非常感谢！ –

我正在直接录制文件，是否可以设置裁剪x，y，x2和y2？因为否则，我将不得不弄清楚如何让每个帧到一个画布，然后裁剪每个帧，然后将其保存回webm。 – Noitidart

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

相机分辨率会影响返回的流的质量，但是如果您可以强制执行宽高比，则会成为浏览器问题。

我将在这里使用的例子是基于我与当前正在使用的设置... Tecknet 1080网络摄像头（便宜欢快，不提供任何方面超越16：9/4：3，但驱动程序支持方面1），Win7，chrome，firefox和IE。使用Chrome浏览器的Android手机（一个加x）

我想实现的目标与上面的一个方面的人一样，至于我为什么要为那些对现代世界的十字架浏览器和跨设备设计是由于在设备在纵向和横向之间旋转时出现在移动设备上的问题。在切换这些视图类型时，浏览器会根据其所有智慧自动切换流的高度和宽度，这意味着无论您希望如何实施移动设备，都会避开它并强制执行其自己的一组维度，这意味着对您而言不一致的结果开发商。

我们如何解决这个问题？

易要实施的1个含义方面无论装置的旋转你的图片总是会返回一个正方形图像从而给你一个一致的结果。真正的问题，基于WebRTC技术方面的执行仅限于Chrome浏览器（Android和PC）IE边缘显然可以做到这一点还，但我使用win7的我无法验证这一事实。支持WebRTC的Firefox很遗憾不能很好地处理约束，并且如果可能的话，将返回一个流，无论它是否满足约束条件，而铬会返回一个错误，指出约束。这个问题主要是存在的原因的WebRTC仍然没有在所有浏览器的标准化，因此意味着你仍然可能遇到的神秘和奇妙的结果不一致的结果，但在其出路闪光您有比其他限制选项，希望他们最终得到的无论浏览器如何，API都能提供一致的结果。现在你需要回落到检查元数据，一旦你的蒸汽开始弄清楚，如果你得到了什么你在Firefox问那么无论是作为建议以上的作物，如果其纯粹的视觉或者其实际使用，然后添加主机后处理以使结果符合您的要求。

自己我是在拼命产生跨设备，用于处理流媒体的跨浏览器的系统做两。

来源

2017-11-01 16:53:53 IDED

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

回答

相关问题