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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
---
title: navigator.getUserMedia
slug: Web/API/Navigator/getUserMedia
translation_of: Web/API/Navigator/getUserMedia
---
<div class="note">
<p><strong>Note:</strong> 此API已更名为 {{domxref("MediaDevices.getUserMedia()")}}。 请使用那个版本进行替代！ 这个已废弃的API版本仅为了向后兼容而存在。</p>
</div>
<p>{{APIRef}}{{deprecated_header}}</p>
<p><strong>Navigator.getUserMedia()</strong>方法提醒用户需要使用音频（0或者1）和（0或者1）视频输入设备，比如相机，屏幕共享，或者麦克风。如果用户给予许可，<strong>successCallback</strong>回调就会被调用，{{domxref("MediaStream")}}对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用，<strong>errorCallback</strong>就会被调用，类似的，<strong><code>PermissionDeniedError</code> </strong>或者<strong><code>NotFoundError</code></strong><code>对象作为它的参数。注意，有可能以上两个回调函数都不被调用，因为不要求用户一定作出选择（允许或者拒绝）。</code></p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">navigator.getUserMedia ( constraints, successCallback, errorCallback );</pre>
<h3 id="参数">参数</h3>
<p><strong>constraints </strong></p>
<p>{{domxref("MediaStreamConstaints")}}对象指定了请求使用媒体的类型，还有每个类型的所需要的参数。具体细节请参见{{domxref("MediaDevices.getUserMedia()")}} 方法下面的<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters">constraints</a>部分。</p>
<p><strong>successCallback</strong></p>
<p>当调用成功后，successCallback中指定的函数就被调用，包含了媒体流的{{domxref("MediaStream")}}对象作为它的参数，你可以把媒体流对象赋值给合适的元素，然后使用它，就像下面的例子一样：</p>
<pre>function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
}</pre>
<dl>
</dl>
<p><strong>errorCallback</strong></p>
<p>当调用失败，errorCallback中指定的函数就会被调用，{{domxref("MediaStreamError")}}对象作为它唯一的参数；此对象基于{{domxref("DOMException")}}对象构建。错误码描述见参见以下：</p>
<table>
<thead>
<tr>
<th scope="col">Error</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>PermissionDeniedError</code></td>
<td>使用媒体设备请求被用户或者系统拒绝</td>
</tr>
<tr>
<td><code>NotFoundError</code></td>
<td>
<p>找不到constraints中指定媒体类型</p>
</td>
</tr>
</tbody>
</table>
<h2 id="示例">示例</h2>
<h3 id="宽度和高度">宽度和高度</h3>
<p>使用getUserMedia()的示例，包括了可以适用于多种浏览器前缀的代码。注意这种使用方式已经被废除，现代的使用方法请参见{{domxref("MediaDevices.getUserMedia()")}} 下面的<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate">示例</a>部分。</p>
<pre><code>navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}</code></pre>
<h2 id="权限">权限</h2>
<p>在一个可以安装的app（比如，Firefox OS app）中使用getUserMedia()，你需要在你的manifest文件中指定一个或者多个以下条目：</p>
<pre><code>"permissions": {
"audio-capture": {
"description": "Required to capture audio using getUserMedia()"
},
"video-capture": {
"description": "Required to capture video using getUserMedia()"
}
}</code></pre>
<p>参见 <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> 和 <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> 以查看更多信息。</p>
<h2 id="规格">规格</h2>
<table>
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}}</td>
<td>{{Spec2('Media Capture')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="warning">
<p>新代码应当使用 {{domxref("Navigator.mediaDevices.getUserMedia()")}} 替代.</p>
</div>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table>
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>21{{property_prefix("webkit")}} [1]</td>
<td>17{{property_prefix("moz")}} [3]</td>
<td>{{CompatNo}}</td>
<td>12 [2]<br>
18{{property_prefix("webkit")}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table>
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic Support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatChrome(40.0)}}{{property_prefix("webkit")}} [2]</td>
<td>24{{property_prefix("moz")}} [3]</td>
<td>1.2{{property_prefix("moz")}} [4]<br>
1.4{{property_prefix("moz")}}</td>
<td>{{CompatNo}}</td>
<td>12 [2]</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] 新版的Chrome支持未带前缀的 {{domxref("MediaDevices.getUserMedia()")}}, 用以取代此已废弃版本.</p>
<p>[2] Chrome 和 Opera 仍然在使用已经过期的 constraint 语法, 但是此描述中的语法可以通过 <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill来使用.</p>
<p>[3] 在此描述的constraint 语法自 Firefox 38后可用. 更早的版本 (32-37) 使用了已经过期的语法, 但是此描述中的语法可以通过 <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill来使用.</p>
<p>[4] 在 Firefox OS 1.2中， 只有音频的到支持, 1.4 添加了视频支持.</p>
<h2 id="更多参见">更多参见 </h2>
<ul>
<li>{{domxref("MediaDevices.getUserMedia()")}} 替代了当前废弃的版本。</li>
<li><a href="https://developer.mozilla.org/en-US/docs/WebRTC">WebRTC</a> - the introductory page to the API</li>
<li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - the API for the media stream objects</li>
<li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - a tutorial on using <code>getUserMedia() for taking photos rather than video.</code></li>
</ul>
|
