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 - 网络摄像头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 draft，流中的媒体轨道应该提供此信息，但实际上浏览器尚未实现它。

getCapabilities（）方法返回名称的字典对象支持的可约束属性。

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

2 个答案: