javascript - 如何强制一个 16 :9 ratio with getUserMedia on all devices?
<p><p>当视频设置为以 <strong>16:9 分辨率</strong>录制时，我需要使用 <code>getUserMedia</code>。</p>
<p>我的代码适用于大多数台式机和 Android 7 及更高版本:</p>
<pre><code>navigator.getUserMedia( {
audio: true,
video: {
mandatory: {
minWidth: 380,
minHeight: 214,
maxWidth: 380,
maxHeight: 214
}
}
})
</code></pre>
<p>但在 Android 6 及更低版本以及某些台式机上(无法确定具体是哪一个)，<code>getUserMedia</code> 会中断，并且相机中没有可用的图像。</p>
<p>这适用于<strong>所有设备</strong>和桌面，但默认分辨率为 4:3，而我需要 16:9:</p>
<pre><code>navigator.getUserMedia( {
audio: true,
video: true
})
</code></pre>
<p>我尝试省略<code>强制</code>，没有成功。</p>
<p>让我更加困惑的是，iOS 设备(11 测试版)和 Android 需要传递 <code>faceMode</code> 参数:</p>
<pre><code>video: { facingMode: 'user' }
</code></pre>
<p>因此，在某些桌面和设备(如 Android 5 和 6)上，传递 <code>width</code> 和 <code>height</code> 参数似乎会破坏 <code>getUserMedia</code>。</p>
<p>有没有办法在所有设备上强制使用 16:9 的比例？捕获具有特定尺寸的视频的正确和常规方法是什么？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您假设所有相机都支持 16:9，或者所有浏览器都会为您裁剪视频。不是这样。您还使用了过时的 API。试试 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" rel="noreferrer noopener nofollow">the latest API</a> ( <a href="http://jsfiddle.net/jib1/9t3szw0L/" rel="noreferrer noopener nofollow">fiddle</a> , <a href="https://webrtc.github.io/samples/src/content/peerconnection/constraints/" rel="noreferrer noopener nofollow">samples</a> ):</p>
<pre><code>var constraints = {video: {width: 320, height: 180, facingMode: "user"}};
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => video.srcObject = stream)
.then(() => new Promise(resolve => video.onloadedmetadata = resolve))
.then(() => log(video.videoWidth +"x"+ video.videoHeight))
.catch(e => console.log(e));
</code></pre>
<p><code>getUserMedia</code> 的核心是一个摄像头/麦克风 <em>discovery</em> API:所有的 <code>min</code>、<code>max</code>、<存在 code>exact</code>、<code>ideal</code> 关键字来描述您的约束，即您对 <strong><em>not</em></strong> 得到您想要的东西的容忍度。</p >
<p>我建议使用 <code>aspectRatio</code> 约束，除非还没有人实现它，这只是降低容忍度的另一个约束。</p>
<p>目前我相信只有 Chrome 会缩小相机输出并将其裁剪为您想要的确切尺寸。事实证明这是大多数人想要的，但对用户的相机却知之甚少。其他浏览器可能会紧随其后，因为对其他东西的需求并不大，但它们目前并没有缩小规模。</p>
<p>请注意，即使 Chrome 也不会升级，所以如果您在 Android 上使用 Chrome，您可能要求比 Android 6 设备输出的分辨率更高。在这种情况下检查 <code>OverconstrainedError</code>，然后用较小的值重试。</p>
<p>简而言之，您并不总是能得到您想要的确切尺寸，因为它最终取决于用户的相机和他们的浏览器。</p>
<p>但是 HTMLVideoElement 无论如何都会在播放时缩小比例，您可以 <a href="https://stackoverflow.com/q/36961228/918910" rel="noreferrer noopener nofollow">use CSS</a>裁剪。</p></p>
<p style="font-size: 20px;">关于javascript - 如何强制一个 16 :9 ratio with getUserMedia on all devices?，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/45781882/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/45781882/
</a>
</p>
页:
[1]