diff options
Diffstat (limited to 'files/es/web/api/navigator/getusermedia')
-rw-r--r-- | files/es/web/api/navigator/getusermedia/index.html | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/files/es/web/api/navigator/getusermedia/index.html b/files/es/web/api/navigator/getusermedia/index.html new file mode 100644 index 0000000000..e3fd046743 --- /dev/null +++ b/files/es/web/api/navigator/getusermedia/index.html @@ -0,0 +1,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> |