Get media information (resolution and frame rate) from a MediaStream object

Question

I am assembling a user’s camera, I want to catch the picture with the best possible resolution, so my code is something like a fragment below,

I want to read the resolution details from the incoming stream, so I can set it as the height and width of the video that I will use for the snapshot of the click, I want the snapshot to be of the best quality offered by the stream - it is possible (read the permission data from the variable stream )?

EDIT: I am transferring video using webrtc , so I would also like to know the frame rate of the transmitted video stream

 $(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 code:

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

Answer 1

You can get your own resolution of the video stream from the video element as soon as 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'); }); 

In the W3C project, the media track in the stream should provide this information, but in practice the browser has yet to implement it.

The getCapabilities () method returns a dictionary of names of limited properties supported by the object.

Answer 2

navigator.mediaDevices.getUserMedia() returns a MediaStream object with your video and audio streams. This MediaStream object has the getVideoTracks() and getAudioTracks() methods.

getVideoTracks()[0] returns the video stream from the local webcam. This video capture object has a getSettings () method that returns some useful properties, such as:

 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 

Result, for example:

aspectRatio : 1.3333333333333333

deviceId : "e85a2bd38cb0896cc6223b47c5d3266169524e43b6ab6043d8dd22d60ec01a2f"

frameRate : 30

height : 480

width : 640

---

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

deviceId - Id webcam,

framRate - frame rate of your video stream,

width - the width of the video

height - the height of the video.