getUserMediaフレームレート制約を使用しようとしています

Question

getUserMedia Webcamストリームのフレームレート表示を調整しようとしています。私が使用しようとしている方法は、Moz開発者ネットワークで参照されているように

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

です。

フレームレートを異なる設定に変更するために呼び出すことができるいくつかの関数を作成したいと思いますが、制約を実装しようとすると効果がないようです。私が使って試した、それだけで（再）ストリーム

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

を試してみました

function setFps1() { 
var constraints ... 
} 

とも関数内

フレームレートを設定できるようになる前に最初に再生すること。

frameRate制約はどのように使用されるのでしょうか、それとも私の使用を妨げているのでしょうか？

Answer 1

ライン：

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

だけで指定されたオブジェクトにローカル変数constraintsをinitializates。他に何の影響もありません。

あなたは例えば、機能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を実装することに注意してください。