在90年代中期，聊天是在网络上可用的最好的产品之一。 举起你的手，如果你还年轻，以为这将是多么酷的是开发自己的聊天应用程序。 他们的一个最好的功能是他们把握一个摄像头麦克风音频和/或视频，它通过Internet发送能力。 为了实现这些功能，开发人员一直依赖如Flash和Silverlight插件很长一段时间。 然而，Flash和Silverlight可能是一个问题，如果你没有正确的权限，或者你不精通技术。 今天，这样的插件不需要再感谢WebRTC项目及其相关的API。 本文将介绍getUserMedia的API，从WebRTC项目所产生的API之一。
什么是getUserMedia API
该getUserMedia API提供了多媒体流(视频，音频，或两者)从本地设备。 有几个用例这个API。 第一个是显然的实时通信，但我们也可以用它来录制教程或网上课程的经验教训。 另一个有趣的用例就是你的家或工作场所的监视。 就其本身而言，这个API是唯一能够获取的音频和视频，不发送数据或将其存储在一个文件中。 为了有一个完整的工作聊天，例如，我们需要在Internet上发送数据。 这可以用做RTCPeerConnection API 。要存储的数据，我们可以使用MediaStreamRecorder的API 。
该getUserMedia API是惊人的开发者和用户。 开发人员现在可以访问音频和视频信号源与一个函数调用，而用户不需要安装额外的软件。 从用户角度来看，这也意味着减少的时候开始使用的功能，也是软件的非精通技术的人越来越多地使用。
虽然getUserMedia API已经存在了一段时间了，截至12月，30 日 2013它仍然是一个W3C工作草案。 因此，规范可能会受到一些变化。 该API仅公开一个方法， getUserMedia()属于window.navigator对象。 该方法接受作为其参数约束的一个目的，一个成功回调和失败回调。 该constraints参数是具有任一方或双方的属性的对象audio和video 。 这些属性的值是一个布尔值，其中true手段要求流(音频或视频)，以及false不要求流。 因此，要求音频和视频，通过下列对象。
1
2
3
4
{
video:true,
audio:true
}
另外，该值可以是一个Constraints对象 。 这种类型的对象可以让我们拥有更多的控制权的请求的流。 事实上，我们可以选择高分辨率检索的视频源，例如1280×720，或低的，例如320×180。 每个Constraints对象包含两个属性， mandatory和optional 。 mandatory是一个对象，它指定组的UA必须满足，否则调用errorCallback约束。 optional ，是一个对象数组，用于指定一组约束的UA应该尝试满足，但可能会忽略，如果他们不能满足。
比方说，我们要的音频和视频的用户，其中视频必须至少在一个较高的分辨率，并有30帧率。 此外，如果有的话，我们想要的视频在60的帧率。 要执行此任务，我们必须通过下列对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
{
video: {
mandatory: {
minWidth: 1280,
minHeight: 720,
minFrameRate: 30
},
optional: [
{ minFrameRate: 60 }
]
},
audio:true
}
你可以找到在可用的属性的详细信息规范 。
另外两个参数getUserMedia()仅仅是成功或失败调用的两个回调，分别。 成功时，检索到流(s)被传递给回调。 错误回调传递一个MediaError对象包含有关所发生的错误信息。
浏览器兼容性
为getUserMedia API的支持是在桌面上体面的，但在移动相当差。 此外，多数支持它的浏览器，仍然有厂商前缀版本。 目前，实现该API的桌面浏览器是Chrome浏览器21 +(-webkit的前缀)，火狐17 +( - 万盎司前缀)和Opera 12 +(不支持从15版到17)，在旧版本的一些问题。 在移动浏览器中，只有Chrome浏览器21 +(-webkit的前缀)，和Opera 12 +(从版本16的-webkit前缀)支持的API。 还要注意的是，如果通过打开包含指示与此API来上班的页面file://协议在Chrome中，它不会工作。
歌剧的情况真的很有趣，值得一记。 该浏览器实现的API，但对于一个未知的(对我来说)的原因，在15版本切换到眨眼渲染引擎之后，他们不支持它了。 最后，该API支持，恢复在版本18。 仿佛这还不够，歌剧18是支持音频流过的第一个版本。
这就是说，我们可以忽略兼容性问题由于一个叫垫片getUserMedia.js 。 后者将测试浏览器，如果API没有实现，它回退为Flash。
演示
在本节中，我会告诉你一个基本的演示，让你可以看到如何getUserMedia API的工作，具体查看其参数。 这个演示的目的是建立一个“镜子”，在这个意义上，一切从网络摄像头和麦克风捕捉将通过屏幕和音响扬声器进行流式处理。 我们会询问用户是否允许访问两个多媒体流，然后使用HTML5的输出他们video内容。 标记是相当简单。 除了video元素，我们有两个按钮：一个是开始执行，一个停止它。
关于脚本的一部分，我们首先测试的浏览器支持。 如果不支持的API，我们显示消息“不支持的API”，并禁用两个按钮。 如果浏览器支持getUserMedia的API，我们附上监听器click按钮的事件。 如果点击“播放演示”按钮，我们测试，如果我们正在处理，因为在上一节中描述的问题与旧版本的Opera。 然后，我们要求来自用户的设备的音频和视频数据。 如果请求成功，我们流使用的数据video元素，否则，我们表明，在控制台上发生的错误。 “停止演示”按钮，使视频被暂停，流停止。
下面的代码的现场演示，请在这里 。
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
getUserMedia Demo
getUserMedia API
Play demo
Stop demo
API not supported
API partially supported (video only)
《script》
var videoStream = null;
var video = document.getElementById("video");
// Test browser support
window.navigator = window.navigator || {};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
null;
if (navigator.getUserMedia === null) {
document.getElementById('gum-unsupported').classList.remove('hidden');
document.getElementById('button-play-gum').setAttribute('disabled', 'disabled');
document.getElementById('button-stop-gum').setAttribute('disabled', 'disabled');
} else {
// Opera <= 12.16 accepts the direct stream.
// More on this here: http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/
var createSrc = window.URL ? window.URL.createObjectURL : function(stream) {return stream;};
// Opera <= 12.16 support video only.
var audioContext = window.AudioContext ||
window.webkitAudioContext ||
null;
if (audioContext === null) {
document.getElementById('gum-partially-supported').classList.remove('hidden');
}
document.getElementById('button-play-gum').addEventListener('click', function() {
// Capture user's audio and video source
navigator.getUserMedia({
video: true,
audio: true
},
function(stream) {
videoStream = stream;
// Stream the data
video.src = createSrc(stream);
video.play();
},
function(error) {
console.log("Video capture error: ", error.code);
});
});
document.getElementById('button-stop-gum').addEventListener('click', function() {
// Pause the video
video.pause();
// Stop the stream
videoStream.stop();
});
}
《script》
结论
本文向您介绍了WebRTC项目，近年来最激动人心的Web项目之一。 特别是，本文所讨论的getUserMedia API。 仅使用浏览器和非常几行代码创建一个实时通信系统的可能性是了不起的，并打开了很多新的机会。
正如我们已经看到的那样，getUserMedia API是简单但非常灵活。 它暴露只是一个方法，但其第一个参数，constraints ，允许我们需要音频和视频流，更好地满足我们的应用程序的需求。 浏览器之间的兼容性不是很全，但它增加了，这是个好消息！ 为了更好地理解本文中的概念，不要忘了与所提供的演示播放。 最后一点，我强烈建议您尝试更改代码以执行一些任务，例如应用CSS滤镜来更改视频流显示。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
