web-dev-qa-db-ja.com

MediaStreamオブジェクトからメディアの詳細（解像度とフレームレート）を取得します

ユーザーのカメラをキャプチャしています。可能な限り最高の解像度で写真を撮りたいので、コードは以下のスニペットのようなものです。

着信ストリームから解像度の詳細を読み取りたいので、スナップショットをクリックするために使用するビデオの高さと幅として設定できます。スナップショットをストリームによって提供される最高の品質にしたいのですが、これは可能です（ stream変数から解像度の詳細を読み取ります）？

EDIT：webrtcを使用してビデオを送信しているので、送信されたビデオストリームのフレームレートも調べたいと思います。

$(document).ready(function(){

navigator.getUserMedia = ( navigator.getUserMedia ||navigator.mozGetUserMedia ||navigator.webkitGetUserMedia  ||navigator.msGetUserMedia);


if(navigator.getUserMedia){
  navigator.getUserMedia({ video: true, audio:true}, function(stream) {
    var video =  $('#video')[0];
   video.src = window.URL.createObjectURL(stream);
    video.muted=true;
    //$('#video').hide();
  },  function(){
    showMessage('unable to get camera', 'error');
  });
}else{
    showMessage('no camera access mate.', 'error');
}



function showMessage(msg,type) { // type 'success' or 'error'
    $('#msg').text(msg);
}

})

htmlコード：

<div id='msg' class'message'></div>
  <div >
    <video id='video' autoplay></video>
  </div>
javascripthtmlwebrtcgetusermedia
12
mido

navigator.mediaDevices.getUserMedia()メソッドは、ビデオおよびオーディオストリームとともにMediaStreamオブジェクトを返します。このMediaStreamオブジェクトにはgetVideoTracks()メソッドとgetAudioTracks()メソッドがあります。

getVideoTracks()[0]はローカルWebカメラからのビデオストリームを返します。このビデオトラックオブジェクトには、次のようないくつかの便利なプロパティを返すgetSettings（）メソッドがあります。

stream.getVideoTracks()[0].getSettings().deviceId
stream.getVideoTracks()[0].getSettings().frameRate
stream.getVideoTracks()[0].getSettings().height
stream.getVideoTracks()[0].getSettings().width
stream.getVideoTracks()[0].getSettings().frameRate

結果、例：

aspectRatio：1.3333333333333333

deviceId： "e85a2bd38cb0896cc6223b47c5d3266169524e43b6ab6043d8dd22d60ec01a2f"

frameRate：30

height：480

width：640

aspectRatio-4x3（1.3333333333333333）または16x9（フルスクリーンかどうか）、

deviceId-ウェブカメラID、

framRate-ビデオストリームのフレームレート、

width-ビデオ幅、

height-ビデオの高さ。

22
Eugene

Onloadedmetadataを介してストリームがビデオ要素に接続されると、ビデオ要素からビデオストリームのネイティブ解像度を取得できます。これはフレームレート情報を提供しません。

  navigator.getUserMedia({ video: true, audio:true}, function(stream) {
    var video =  $('#video')[0];
    video.src = window.URL.createObjectURL(stream);
    video.muted=true;
    video.onloadedmetadata = function() {
      console.log('width is', this.videoWidth);
      console.log('height is', this.videoHeight);
    }
    //$('#video').hide();
  },  function(){
    showMessage('unable to get camera', 'error');
  });

W3Cドラフト によると、ストリーム内のメディアトラックはこの情報を提供する必要がありますが、実際にはブラウザはまだそれを実装していません。

GetCapabilities（）メソッドは、オブジェクトがサポートする制約可能なプロパティの名前のディクショナリを返します。

13
mygzi