javascript - 尝试使用 getUserMedia 帧速率约束

Question

我正在尝试调整 getUserMedia 网络摄像头流的帧速率显示。我尝试使用的方法是

var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };

如 Moz 开发者网络中所引用。

我想创建几个可以调用的函数来将帧速率更改为不同的设置，但在尝试实现约束时它似乎没有效果。我尝试过单独使用它

function setFps1() {
var constraints ...
}

以及(重新)声明流的函数内

    function useVideo(){
    // Query user for device permission
    navigator.mediaDevices.getUserMedia({video: true})
    // If granted
     .then(function(stream) {
         // Stream & play video from webcam
          var video = document.getElementById('userVideo');
          var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
          video.src = window.URL.createObjectURL(stream);
          video.play();
        })
    // If not
    .catch(function(error) {
        alert(error.message);
    });
    }

并尝试过

    function useVideo(){
    // Query user for device permission
    navigator.mediaDevices.getUserMedia({video: true})
    // If granted
     .then(function(stream) {
         // Stream & play video from webcam
          var video = document.getElementById('userVideo');
          video.src = window.URL.createObjectURL(stream);
          video.play();
          var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
        })
    // If not
    .catch(function(error) {
        alert(error.message);
    });
    }

为了更好地衡量，我想也许必须先播放视频才能设置帧速率。

如何使用frameRate约束，或者是什么阻止我使用它？

Answer 1

行:

var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };

只是将局部变量constraints初始化为指定的对象。对其他任何事情都没有影响。

您可以使用函数getUserMedia或applyConstraints对相机设置约束，例如:

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    var video = document.getElementById('userVideo');
    video.srcObject = stream;
    video.play();
  })
  .catch(error => console.log(error));

或

var track = video.srcObject.getVideoTracks()[0];

track.applyConstraints(constraints).catch(e => console.log(e));

一旦你开始工作，请注意浏览器当前实现了约束 a bit differently .