javascript 从 MediaStream 对象获取媒体详细信息（分辨率和帧速率）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26076259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get media details(resolution and frame rate) from MediaStream object
提问by mido
I am capturing the user's camera, i want to catch the picture with the best resolution possible, so my code is something like the snippet below,
我正在捕捉用户的相机，我想以尽可能最佳的分辨率捕捉图片，所以我的代码类似于下面的代码片段，
I want to read the resolution details from the incoming stream, so i can set it as video height and width, which I ll use to click snapshot, I want the snapshot to be of best quality offered by the stream, is this possible( to read resolution details from streamvariable) ?
我想从传入的流中读取分辨率详细信息，因此我可以将其设置为视频高度和宽度，我将使用它来单击快照，我希望快照具有流提供的最佳质量，这是否可能（到从stream变量中读取分辨率详细信息）？
EDIT :I am transmitting the video using webrtcso I would also like to find out the frame rate of the transmitted videostream
编辑：我正在使用传输视频，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);
}
})
the html code:
html代码：
<div id='msg' class'message'></div>
<div >
<video id='video' autoplay></video>
</div>
回答by Eugene
navigator.mediaDevices.getUserMedia()method returns MediaStreamobject with you video and audio streams.
This MediaStreamobject has getVideoTracks()and getAudioTracks()methods.
navigator.mediaDevices.getUserMedia()方法返回MediaStream带有视频和音频流的对象。这个MediaStream对象有getVideoTracks()和getAudioTracks()方法。
getVideoTracks()[0]returns video stream from local webcam. This videotrack object has getSettings() method returning some usefull properties like:
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
Result, for example:
结果，例如：
aspectRatio: 1.3333333333333333
aspectRatio: 1.3333333333333333
deviceId: "e85a2bd38cb0896cc6223b47c5d3266169524e43b6ab6043d8dd22d60ec01a2f"
deviceId：“e85a2bd38cb0896cc6223b47c5d3266169524e43b6ab6043d8dd22d60ec01a2f”
frameRate: 30
frameRate: 30
height: 480
height: 480
width: 640
width: 640
aspectRatio-- 4x3(1.3333333333333333) or 16x9 (fullscreen or not),
aspectRatio-- 4x3(1.3333333333333333) 或 16x9（全屏与否），
deviceId-- webcam Id,
deviceId-- 网络摄像头 ID，
framRate-- framerate of your videostream,
framRate-- 视频流的帧率，
width-- video width,
width-- 视频宽度，
height-- video height.
height-- 视频高度。
回答by mygzi
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.
一旦流通过 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');
});
Per the W3C draft, the media track within the stream should provide this information, but in practice browsers have yet to implement it.
根据W3C 草案，流中的媒体轨道应提供此信息，但实际上浏览器尚未实现它。
The getCapabilities() method returns the dictionary of the names of the constrainable properties that the object supports.
getCapabilities() 方法返回对象支持的可约束属性的名称字典。
