Question

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

qvga：320 x 240， vga：640 x 480， hdVga：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>

Answer 1

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

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

约束不是＆＃34;提示＆＃34;正确使用时， 将失败 如果您需要相机无法满足的值，请注意过度约束，因为人们拥有不同能力的不同相机。相机也是单一资源，因此您可能必须与其他标签共享它。这就是为什么以这种方式构建约束的原因。

使用约束，可以指定您更喜欢更高分辨率而不用放弃低分辨率相机，而这只是用户所拥有的所有内容，但我不愿意进一步详细说明，因为Chrome使用的是过时的约束语法与标准略有不同，标准更优雅地解决了这个问题。有关详情，请参阅this answer。

规范最终已经稳定，即将推出的 adapter.js 版本（跨浏览器polyfill）应尽快解决这个问题。在此之前，请参阅here以获取Chrome限制的有效示例，但需要注意的是，它们无法在其他浏览器上运行。

getUserMedia（）的解析约束无法正常工作（WebRTC）

1 个答案: