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
|
---
title: Navigator.getUserMedia
slug: Web/API/Navigator/getUserMedia
translation_of: Web/API/Navigator/getUserMedia
---
<p>Pide al usuario permiso para usar un dispositivo multimedia como una cámara o micrófono. Si el usuario concede este permiso, el successCallback es invocado en la aplicación llamada con un objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a> como argumento.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">navigator.getUserMedia ( constraints, successCallback, errorCallback );</pre>
<p><strong>Ejemplo</strong></p>
<p>Aquí hay un ejemplo usando getUserMedia() con los prefijos del navegador.</p>
<pre class="brush: js">navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia);
navigator.getMedia (
// Restricciones (contraints) *Requerido
{
video: true,
audio: true
},
// Funcion de finalizacion (Succes-Callback) *Requerido
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Haz algo con el video aquí.
};
},
// errorCallback *Opcional
function(err) {
console.log("Ocurrió el siguiente error: " + err);
}
);</pre>
<h2 id="Parámetros">Parámetros</h2>
<table>
<thead>
<tr>
<th scope="col">Parámetro</th>
<th scope="col">
<p>Requerido/Opcional</p>
</th>
<th scope="col">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td>constraints</td>
<td>Requerido</td>
<td>El tipo de multimedia que soporta el objeto LocalMediaStream devuelto en el successCallback.</td>
</tr>
<tr>
<td>successCallback </td>
<td>Requerido</td>
<td>La función a invocar cuando se pasa el objeto LocalMediaStream.</td>
</tr>
<tr>
<td>errorCallback</td>
<td>Opcional</td>
<td>La función que se invoca en la aplicación si falla la llamada.</td>
</tr>
</tbody>
</table>
<h3 id="constraints">constraints</h3>
<p>El parámetro <code>constraints</code> es un objeto <code>MediaStreamConstraints</code> con dos miembros booleanos: <code>video</code> y <code>audio</code>. Estos describen el los tipos de multimedia soportados por el objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a>. Uno o ambos deben ser especificados para validar el argumento del parametro constraint. Si un constraint especificado no es soportado por el navegador, <code>getUserMedia </code>llama a la función <code>errorCallback </code>con el error <code>NOT_SUPPORTED_ERROR</code>. Si el navegador no puede encontrar ninguna fuente multimedia con el tipo especificado, <code>getUserMedia </code>llama a la función <code>errorCallback </code>con el error <code>MANDATORY_UNSATISFIED_ERR</code>.</p>
<p>Si el valor o el miembro no es especificado en el objeto, el valor del miembro por defecto será falso. El siguiente ejemplo muestra como definir el constraints para audio y video:</p>
<pre>{ video: true, audio: true }</pre>
<h3 id="successCallback">successCallback</h3>
<p>La función getUserMedia llamará a la función especificada en el <code>successCallback </code>con el objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a> que contenga la secuencia multimedia. Puedes asignar el objeto al elemento apropiado y trabajar con él, como se muestra en el siguiente ejemplo:</p>
<pre>function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Haz algo aquí con el video.
};
},</pre>
<h3 id="errorCallback">errorCallback</h3>
<p>La función <code>getUserMedia </code>llama a la función indicada en el errorCallback con un <code>código</code> como argumento. Los códigos de error se describen a continuación:</p>
<table>
<thead>
<tr>
<th scope="col">Error </th>
<th scope="col">Descripción </th>
</tr>
</thead>
<tbody>
<tr>
<td>PERMISSION_DENIED </td>
<td>El usuario denegó el permiso para usar el dispositivo multimadia requerido para esta operación. </td>
</tr>
<tr>
<td>NOT_SUPPORTED_ERROR </td>
<td>Un constraint especificado no es soportado por el navegador.</td>
</tr>
<tr>
<td>MANDATORY_UNSATISFIED_ERROR </td>
<td>No se encontraron fuentes multimedia del tipo especificado en el constraints.</td>
</tr>
<tr>
<td>NO_DEVICES_FOUND</td>
<td>No se encontró ninguna webcam instalada.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Stream API </td>
<td>21{{property_prefix("webkit")}} </td>
<td>20{{property_prefix("moz")}} </td>
<td>{{CompatNo}} </td>
<td>12</td>
<td>{{CompatUnknown}} </td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Stream API </td>
<td>{{CompatNo}} </td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}} </td>
<td>12</td>
<td>{{CompatNo}} </td>
</tr>
</tbody>
</table>
</div>
<p><span style="line-height: 1.5em;">Actualmente el uso de WebRTC para acceder a la cámara esta soportado en Chrome, Opera y Firefox 20.</span></p>
<h2 id="Vease_también">Vease también</h2>
<ul>
<li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - la página introductoria a la API</li>
<li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - la API para los objetos multimedia</li>
<li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutorial acerca del uso de getUserMedia()</li>
</ul>
|
