从MediaStream对象获取媒体详细信息(分辨率和帧速率)

Question

我正在捕捉用户的相机,我想以最佳分辨率捕捉到图片,所以我的代码就像下面的代码片段,

我想从传入流中读取分辨率详细信息,因此我可以将其设置为视频高度和宽度,我将使用它来点击快照,我希望快照具有流提供的最佳质量,这是可能的(对于从stream变量中读取分辨率细节)？

编辑:我正在使用传输视频,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>

Answer 1

navigator.mediaDevices.getUserMedia()方法返回MediaStream带有视频和音频流的对象.这个MediaStream对象有getVideoTracks()和getAudioTracks()方法.

getVideoTracks()[0]从本地网络摄像头返回视频流.这个videotrack对象有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 - webcam Id,

framRate - 你的视频流的帧率,

width - 视频宽度,

height - 视频高度.

Answer 2

一旦通过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()方法返回对象支持的可约束属性的名称的字典.