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

Question

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

Fai*_*eer 1 javascript google-chrome constraints webrtc getusermedia

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

jib*_*jib 5

您需要指定最小值和最大值。约束告诉浏览器您愿意使用的值范围。如果不指定下限，则表示您同意在 hdVga 情况下使用 0x0 到 1280x768 之间的任何分辨率。由于 Chrome 默认为 640x480，因此您将获得该分辨率。

要获得 1280x768，请指定最小值1280x768。

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

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

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

归档时间：	11 年，1 月前
查看次数：	3702 次
最近记录：	10 年，10 月前