getUserMedia() 的分辨率限制无法正常工作 (WebRTC)答案

【问题标题】：Resolution constraints to getUserMedia() not working properly (WebRTC)getUserMedia() 的分辨率限制无法正常工作 (WebRTC)
【发布时间】：2015-02-12 14:56:58
【问题描述】：

我是 WebRTC 的新手，正在 Chrome 中测试一个简单的视频流应用程序。我有以下三种不同类型的约束：

qvga: 320 x 240, VGA：640 x 480，高清VGA：1280 x 720。

当我捕获媒体时，它运行良好。但是当我以qvga 分辨率开始并单击任何其他按钮时，它会很好地加载对象，我什至可以使用console.log 观察约束。其他两个分辨率设置，即 vga 和 hdVga 它不反映窗口中的任何变化。同样，当我重新加载页面并从hdVga 按钮开始时，它会在屏幕上反映vga 分辨率，而对象属性显示hdVga 的约束，我无法找出问题所在。

HTML：

<head>
<!--<link rel="stylesheet" href="style.css" type="text/css"/>-->

</head>
<body>
    <video id="localVideo" controls poster="images/posterImage.png" ></video>
        <div id="buttons">
<button id="qvga">320x240</button>
<button id="vga">640x480</button>
<button id="hd">1280x720</button>
</div>
    <video id="remoteVideo" poster="images/posterImage.png" ></video>

    </script src="videoplayer.js"></script>
    <script src="adapter.js"></script>
    <script>
        var qVga = document.querySelector("button#qvga");
        var vga = document.querySelector("button#vga");
        var hdVga = document.querySelector("button#hd");
        var qVgaConstraints = {video:{
            mandatory:{
                maxWidth: 320,
                maxHeight: 240
            }
        },audio:true};

        var vgaConstraints = {video:{
            mandatory:{
                maxWidth: 640,
                maxHeight: 480
            }
        },audio:true}

        var hdVgaConstaints = {video:{
            mandatory:{
                maxWidth: 1280,
                maxHeight:720

            }
        },audio:true};

        function successCallback(stream){
            window.stream = stream;
            var video = document.querySelector("#localVideo");
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }
        function errorCallback(error){
        console.log("error: ",error);
        }
        qVga.onclick = function(){getMedia(qVgaConstraints)};
        vga.onclick = function(){getMedia(vgaConstraints)};
        hdVga.onclick = function(){getMedia(hdVgaConstaints)};
        function getMedia(constraints){
        console.log(constraints.video.mandatory);
        getUserMedia(constraints,successCallback,errorCallback);
        }

    </script>

</body>

【问题讨论】：

你的浏览器是什么？ Firefox 并不像 Chrome 那样真正支持这样的约束。此外，webrtc 受到相机驱动程序在特定操作系统上允许的限制。
我将在这里与 benjamin 一起使用：约束只是“提示”，所以无论您提出什么要求，GUM 都会返回相机可以执行的“更接近”您请求的操作。 “更紧密”的定义尚不清楚（即使在标准委员会成员中也是如此）。
@BenjaminTrent 我在 win 8.1 上使用 chrome。我必须提交任何仍然搞砸的项目。有什么建议在特定情况下该怎么做？
针对您的特定相机、操作系统、chrome 版本向 chrome 提交错误
Firefox 确实支持约束，只是不支持 Chrome 使用的非标准约束。见this answer。

标签： javascript google-chrome constraints webrtc getusermedia

【解决方案1】：

您需要同时指定最小值和最大值。约束通知浏览器您愿意使用的值范围。通过不指定下限，您同意 hdVga 情况下 0x0 和 1280x768 之间的任何分辨率。由于 Chrome 默认为 640x480，这就是您将得到的。

要获得 1280x768，请将 min 值指定为 1280x768。

正确使用时，约束不是“提示”，如果您需要相机无法满足的值，会失败，所以要小心过度约束，因为人们已经具有不同能力的不同相机。相机也是单一资源，因此您可能必须与其他选项卡共享它。这就是以这种方式构建约束的原因。

使用约束，可以指定您更喜欢更高的分辨率而当用户只有这些时，不放弃较低分辨率的相机，但我不愿进一步详细说明，因为 Chrome 使用了一个过时的约束语法与标准有很大的偏差，标准更优雅地解决了这个问题。请参阅this answer 了解更多信息。

规范终于稳定下来了，即将发布的 adapter.js 版本（跨浏览器的 polyfill）应该很快就能解决这个问题。在此之前，请参阅 here 了解 Chrome 约束的工作示例，但需要注意的是它们不适用于其他浏览器。

【讨论】：