blob: 4e2ee9de8b2103e1d3cd968d3743a319c5d0ec61 (
plain)
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
|
---
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>
{{Compat("api.Navigator.getUserMedia")}}
<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>
|
