I am trying to adjust the framerate display of getUserMedia webcam stream. The method I am trying to use is

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

as referenced in the Moz developer network.

I would like to create several functions that can be called to change the framerate to different settings, but in trying to implement the constraint it does not seem to have an effect. I've tried using it alone

function setFps1() {
var constraints ...
}

and also within functions which (re)declare the stream

    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);
    });
    }

and tried

    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);
    });
    }

for good measure, thinking maybe the video had to first be playing before a framerate could be set.

How is the frameRate constraint meant to be used, or what is preventing me from using it?

I am trying to adjust the framerate display of getUserMedia webcam stream. The method I am trying to use is

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

as referenced in the Moz developer network.

I would like to create several functions that can be called to change the framerate to different settings, but in trying to implement the constraint it does not seem to have an effect. I've tried using it alone

function setFps1() {
var constraints ...
}

and also within functions which (re)declare the stream

    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);
    });
    }

and tried

    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);
    });
    }

for good measure, thinking maybe the video had to first be playing before a framerate could be set.

How is the frameRate constraint meant to be used, or what is preventing me from using it?

• javascript
• getusermedia
• frame-rate

1 Answer 1

The line:

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

just initializates a local variable constraints to the object specified. No effect on anything else.

You set constraints on a camera with the functions getUserMedia or applyConstraints, e.g.:

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

or

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

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

Once you get that working, note that browsers currently implement constraints a bit differently.