Get media details(resolution and frame rate) from MediaStream object

navigator.mediaDevices.getUserMedia() method returns MediaStream object with you video and audio streams.This MediaStream object has getVideoTracks() and getAudioTracks() methods.

getVideoTracks()[0] returns video stream from local webcam. This videotrack object has getSettings() method returning some usefull properties like:

stream.getVideoTracks()[0].getSettings().deviceIdstream.getVideoTracks()[0].getSettings().frameRatestream.getVideoTracks()[0].getSettings().heightstream.getVideoTracks()[0].getSettings().widthstream.getVideoTracks()[0].getSettings().frameRate

Result, for example:

aspectRatio: 1.3333333333333333

deviceId: "e85a2bd38cb0896cc6223b47c5d3266169524e43b6ab6043d8dd22d60ec01a2f"

frameRate: 30

height: 480

width: 640

aspectRatio -- 4x3(1.3333333333333333) or 16x9 (fullscreen or not),

deviceId -- webcam Id,

framRate -- framerate of your videostream,

width -- video width,

height -- video height.

You can get video stream native resolution from the video element once the stream is attached to it via onloadedmetadata. This does not provide frame rate information.

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

Per the W3C draft, the media track within the stream should provide this information, but in practice browsers have yet to implement it.

The getCapabilities() method returns the dictionary of the names of the constrainable properties that the object supports.

here's my vanillaJS Promise-based solution to get a MediaStream video dimensions :

/** * @method streamSize : get MediaStream video dimensions * @param {MediaStream} stream : some stream with a video track */static streamSize(stream) {    return new Promise((resolve, reject) => {        let video = document.createElement("video");        video.muted = true;        video.srcObject = stream;                video.onloadedmetadata = () => {            let dimensions = {                width: video.videoWidth,                 height: video.videoHeight            };            video = null;            resolve(dimensions);        };        });    }