Navigator.getUserMedia

  • Enlace amigable (slug) de la revisión: Web/API/Navigator.getUserMedia
  • Título de la revisión: Navigator.getUserMedia
  • Id de la revisión: 465713
  • Creada:
  • Creador: py_crash
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

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 LocalMediaStream como argumento.

Sintaxis

navigator.getUserMedia ( constraints, successCallback, errorCallback );

Ejemplo

Aquí  hay un ejemplo usando getUserMedia() con los prefijos del navegador.

navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

navigator.getMedia (

   // constraints
   {
      video: true,
      audio: true
   },

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Haz algo con el video aquí.
      };
   },

   // errorCallback
   function(err) {
    console.log("Ocurrió el siguiente error: " + err);
   }

);

Parametros

Parametro

Requerido/

Opcional

Descripción
constraints Requiredo El tipo de multimedia que soporta el objeto LocalMediaStream devuelto en el successCallback.
successCallback  Requiredo La funcion a invocar cuando cuando se pasa el objeto LocalMediaStream.
errorCallback Opcional La funcion que se invoca en la aplicación si el llamado falla.

constraints

El parametro constraints es un objeto MediaStreamConstraints con dos miembros booleanos: video y audio. Estos describen el los tipos de multimedia soportados por el objeto LocalMediaStream. Uno o ambos deben ser especificados para validar el argumento del parametro constraint. Si un constraint especificado no es soportado por el navegador, getUserMedia llama a la función errorCallback con el error NOT_SUPPORTED_ERROR. Si el navegador no puede encontrar ninguna fuente multimedia con el tipo especificado, getUserMedia llama a la función errorCallback con el error MANDATORY_UNSATISFIED_ERR.

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:

{ video: true, audio: true }

successCallback

La función getUserMedia llamará a la función especificada en el successCallback con el objeto LocalMediaStream que contenga la secuencia multimedia. Puedes asignar el objeto al elemento apropiado y trabajar con él, como se muestra en el siguiente ejemplo:

function(localMediaStream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(localMediaStream);
   video.onloadedmetadata = function(e) {
      // Haz algo aquí con el video.
   };
},

errorCallback

La función getUserMedia llama a la función indicada en el errorCallback con un código como argumento. Los códigos de error se describen a continuación:

Error  Descripción 
PERMISSION_DENIED  El usuario denegó el permiso para usar el dispositivo multimadia requerido para esta operación. 
NOT_SUPPORTED_ERROR  Un constraint especificado no es soportado por el navegador.
MANDATORY_UNSATISFIED_ERROR  No se encontraron fuentes multimedia del tipo especificado en el constraints.

Compatibilidad con los navegadores

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Stream API  21{{property_prefix("webkit")}}  20{{property_prefix("moz")}}  {{CompatNo}}  12 {{CompatUnknown}} 
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Stream API  {{CompatNo}}  {{CompatNo}} {{CompatUnknown}}  12 {{CompatNo}} 

Actualmente el uso de WebRTC para acceder a la cámara esta soportado en Chrome, Opera y Firefox 20.

Vease también

Fuente de la revisión

<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í&nbsp; hay un ejemplo usando getUserMedia() con los prefijos del navegador.</p>
<pre class="brush: js">
navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

navigator.getMedia (

   // constraints
   {
      video: true,
      audio: true
   },

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Haz algo con el video aquí.
      };
   },

   // errorCallback
   function(err) {
    console.log("Ocurrió el siguiente error: " + err);
   }

);</pre>
<h2 id="Parametros">Parametros</h2>
<table>
  <thead>
    <tr>
      <th scope="col">Parametro</th>
      <th scope="col">
        <p>Requerido/</p>
        <p>Opcional</p>
      </th>
      <th scope="col">Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>constraints</td>
      <td>Requiredo</td>
      <td>El tipo de multimedia que soporta el objeto LocalMediaStream devuelto en el successCallback.</td>
    </tr>
    <tr>
      <td>successCallback&nbsp;</td>
      <td>Requiredo</td>
      <td>La funcion a invocar cuando cuando se pasa el objeto LocalMediaStream.</td>
    </tr>
    <tr>
      <td>errorCallback</td>
      <td>Opcional</td>
      <td>La funcion que se invoca en la aplicación si el llamado falla.</td>
    </tr>
  </tbody>
</table>
<h3 id="constraints">constraints</h3>
<p>El parametro constraints es un objeto MediaStreamConstraints 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, getUserMedia llama a la función errorCallback con el error NOT_SUPPORTED_ERROR. Si el navegador no puede encontrar ninguna fuente multimedia con el tipo especificado, getUserMedia llama a la función errorCallback con el error MANDATORY_UNSATISFIED_ERR.</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 successCallback 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 getUserMedia 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&nbsp;</th>
      <th scope="col">Descripción&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>PERMISSION_DENIED&nbsp;</td>
      <td>El usuario denegó el permiso para usar el dispositivo multimadia requerido para esta operación.&nbsp;</td>
    </tr>
    <tr>
      <td>NOT_SUPPORTED_ERROR&nbsp;</td>
      <td>Un constraint especificado no es soportado por el navegador.</td>
    </tr>
    <tr>
      <td>MANDATORY_UNSATISFIED_ERROR&nbsp;</td>
      <td>No se encontraron fuentes multimedia del tipo especificado en el constraints.</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>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Stream API&nbsp;</td>
        <td>21{{property_prefix("webkit")}}&nbsp;</td>
        <td>20{{property_prefix("moz")}}&nbsp;</td>
        <td>{{CompatNo}}&nbsp;</td>
        <td>12</td>
        <td>{{CompatUnknown}}&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</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&nbsp;</td>
        <td>{{CompatNo}}&nbsp;</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatUnknown}}&nbsp;</td>
        <td>12</td>
        <td>{{CompatNo}}&nbsp;</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.C3.A9n">Vease también</h2>
<ul>
  <li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a>&nbsp;- 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>
Revertir a esta revisión