getUserMedia(） 无法正常工作的分辨率约束 (WebRTC）

Resolution constraints to getUserMedia() not working properly (WebRTC)

本文关键字：分辨率 WebRTC 工作 约束 常工作 getUserMedia      更新时间：2023-09-26

我是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>

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

若要获取 1280x768

，请指定最小值 1280x768。

正确使用约束不是"提示"，如果您需要相机无法满足的值，约束将失败，因此请注意过度约束，因为人们有不同的相机具有不同的能力。相机也是单个资源，因此您可能需要与其他选项卡共享它。这就是以这种方式构建约束的原因。

使用约束，

可以指定您更喜欢更高的分辨率，而不会放弃较低分辨率的相机，而用户拥有的只是这样，但我犹豫是否要进一步详细说明，因为 Chrome 使用了过时的约束语法，与标准有很大偏差，并且标准更优雅地解决了这个问题。请参阅此答案了解更多信息。

规范终于稳定下来了，即将推出的适配器版本.js(跨浏览器 polyfill(应该很快就会解决这个问题。在此之前，请参阅此处以获取Chrome约束的工作示例，但需要注意的是，它们不适用于其他浏览器。

相关文章：