懂点c++语言的同学就能看懂，上面其实配置了一些参数，可以看到默认的获取摄像头的品质是480p。在这段代码里还有几个特别的属性minAspectRatio（最小宽比）、maxAspectRatio（最大宽高比）、maxFrameRate（最大每秒帧数）、minFrameRate（最小每秒帧数），似乎我们所能想到的都已经定义了。
于是我们可以如下定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
navigator.getUserMedia({
video: {
mandatory: {
minAspectRatio: 1.40,
maxAspectRatio: 1.78,
minFrameRate: 15,
maxFrameRate: 25,
minWidth: 1280,
minHeight: 720
}
}
}, function (stream) {
//xxxx
}, function (error) {
console.log(error);
});

需要说明的是FrameRate是不生效的，AspectRatio是生效的，但设定的最大最小值一定要能取1.333333(4:3)及1.777777777(16:9)这两个值其中一个。因为video元素输出时，会认得这两个宽高比，如果计算得不出这两个比值，那你会看到一片漆黑！
特别说明：
上面的配置方式，经过测试，截止本文发表日期，目前最新的手机浏览器Chrome或Opera都是不支持的，使用上面的配置，可以打开摄像头，但是获取不到数据。而使用以前的配置可以：

1
{video: true,audio:false}

MediaStreamTrack.getSources 是HTML5提供的MediaStreamTrack对象，用以跟踪多媒体的输出源。

MediaStreamTrack.getSources方法需要一个回调函数,并向该回调函数传入本机器所有的（音，视频）多媒体源。

使用代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var exArray=[];
MediaStreamTrack.getSources(function (sourceInfos) {
console.log("sourceInfos:%o", sourceInfos);
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
//这里会遍历audio,video，所以要加以区分
if (sourceInfo.kind === 'video') {
exArray.push(sourceInfo.id);
}
}
});

navigator.getUserMedia({
video: {
mandatory: {
minAspectRatio: 1.40,
maxAspectRatio: 1.78,
minFrameRate: 15,
maxFrameRate: 25,
minWidth: 1280,
minHeight: 720
},
optional: [
{
sourceId: exArray[0]
}
]
}
}, function (stream) {
//xxxx
}, function (error) {
console.log(error);
});

在打印的sourceInfos数组里面的确可以看到设备流，但是上面的sourceId配置并不生效，在浏览器询问是否允许摄像头设备后，依然使用的是前置或后置摄像头，这个在Chrome浏览器上有的选项可以选择，手机上Opera提供前置或后置的选择。

上面通过getUserMedia接口获取视频流之后，将该视频流传给video标签，然后在网页上就可以显示实时视频。
代码如下：