en essayant d'utiliser la contrainte de framerate getUserMedia

Question

J'essaye d'ajuster l'affichage de framerate du flux de webcam de getUserMedia. La méthode que j'essaie d'utiliser est

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

comme référencé dans le réseau de développeurs Moz.

Je voudrais créer plusieurs fonctions qui peuvent être appelées pour changer le framerate à différents paramètres, mais en essayant d'implémenter la contrainte cela ne semble pas avoir d'effet. Je l'ai essayé d'utiliser seul

function setFps1() { 
var constraints ... 
} 

et également dans les fonctions qui (re) déclarer le flux

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

et a essayé

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

pour faire bonne mesure, pensant peut-être la vidéo avait d'abord jouer avant qu'un framerate puisse être réglé.

Comment la contrainte frameRate doit-elle être utilisée, ou qu'est-ce qui m'empêche de l'utiliser?

Answer 1

La ligne:

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

initializates juste une variable locale constraints à l'objet spécifié. Aucun effet sur autre chose.

Vous définissez les contraintes sur un appareil photo avec les fonctions getUserMedia ou applyConstraints, .: par exemple

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

ou

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

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

Une fois que vous obtenez que le travail, notez que les navigateurs mettent en œuvre actuellement contraintes a bit differently.