path: root/files/es/webrtc/mediastream_api/index.html

---
title: API de MediaStream
slug: WebRTC/MediaStream_API
translation_of: Web/API/Media_Streams_API
---
<p>{{SeeCompatTable}}</p>
<p>La <strong>API de proceso <a href="#_edn1" name="_ednref1" title=""><strong>[i]</strong></a><em>MediaStream</em></strong>, a veces llamada<em>Media Stream API</em> o<em> Stream API</em>, es parte de la norma <a href="https://developer.mozilla.org/en-US/docs/WebRTC" title="https://developer.mozilla.org/en-US/docs/WebRTC">WebRTC [en]</a> y describe un flujo de datos de audio o video, los métodos para trabajar con ellos, las limitaciones asociadas con este tipo de datos, las respuestas de error y éxito al usar los datos asincrónicamente y los eventos que se disparan durante el proceso.</p>
<div>
   </div>
<h2 id="Conceptos_Básicos">Conceptos Básicos</h2>
<p>La API está basada sobre la manipulación de  un objeto {{domxref("MediaStream")}} que representa un flujo de datos de audio o video. Generalmente, un objeto <code>MediaStream</code> es una simple cadena URL que puede ser usada para referirse a datos almacenados en un {{domxref("Archivo")}} DOM  o un objeto {{domxref("Blob")}} creado con {{domxref("window.URL.createObjectURL()")}}, como se lo describe en<a href="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video" title="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video"> <u>Obtener el video</u></a>.</p>
<p>Un <code>MediaStream</code> está compuesto por más objetos <a href="#_edn1" name="_ednref1" title="">[i]</a>{{domxref("MediaStreamTrack")}} que representan varias <strong>pistas</strong> de audio o video. Cada <code>MediaStreamTrack </code>puede tener uno o más <strong>canales</strong>. El canal representa la unidad menor de un flujo de medio, como una señal de audio asociada a un parlante específico, como el <em>izquierdo</em> o el <em>derecho</em> en una pista de audio estéreo.</p>
<p>Los objetos <code>MediaStream</code> poseen una sola <strong>entrada</strong> y <strong>salida<a href="#_edn2" name="_ednref2" title=""><strong>[ii]</strong></a>. </strong>Un objeto <code>MediaStream</code> creado con <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia?redirectlocale=en-US&amp;redirectslug=WebRTC%2Fnavigator.getUserMedia" title="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia?redirectlocale=en-US&amp;redirectslug=WebRTC%2Fnavigator.getUserMedia"><u>getUserMedia()</u></a> se denomina <em>local </em>y tiene como origen de entrada una de las cámaras o micrófonos del usuario. Un MediaStream no local puede estar representando un elemento de medio como {{HTMLElement("video")}} o {{HTMLElement("audio")}}, un flujo originado en la red y obtenido a través de la <a href="#_edn3" name="_ednref3" title="">[iii]</a><a href="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API"><em><u>PeerConnection API</u></em></a> o un flujo creado con la <a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API" title="https://developer.mozilla.org/en-US/docs/Web_Audio_API"><u>API de Audio Web</u></a> <a href="#_edn4" name="_ednref4" title="">[iv]</a>{{domxref("MediaStreamAudioSourceNode")}}. La salida de un objeto <code>MediaStream</code> está enlazada a un <strong>consumidor.</strong> El mismo puede ser un elemento de medio  como <code>&lt;audio&gt; o &lt;video&gt;</code>, la <a href="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API"><u>PeerConnection API</u></a> de WebRTC o una <a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API" title="https://developer.mozilla.org/en-US/docs/Web_Audio_API"><u>API de Audio Web</u></a> <a href="#_edn5" name="_ednref5" title="">[v]</a>{{domxref("MediaStreamAudioDestinationNode")}}.</p>
<div>
   </div>
<h2 id="Referencia">Referencia</h2>
<div class="index">
  <ul>
    <li>{{event("addtrack")}} (event)</li>
    <li>{{domxref("AudioStreamTrack")}}</li>
    <li>{{domxref("BlobEvent")}}</li>
    <li>{{domxref("BlobEventInit")}}</li>
    <li>{{event("ended (MediaStream)")}} (event)</li>
    <li>{{event("ended (MediaStreamTrack)")}} (event)</li>
    <li>{{domxref("MediaStream")}}</li>
    <li>{{domxref("MediaStreamConstraints")}}</li>
    <li>{{domxref("MediaStreamTrack")}}</li>
    <li>{{domxref("MediaStreamTrackEvent")}}</li>
    <li>{{domxref("MediaStreamTrackList")}}</li>
    <li>{{domxref("MediaTrackConstraints")}}</li>
    <li>{{event("muted")}} (event)</li>
    <li>{{domxref("NavigatorUserMedia")}}</li>
    <li>{{domxref("NavigatorUserMediaError")}}</li>
    <li>{{event("overconstrained")}} (event)</li>
    <li>{{event("removetrack")}} (event)</li>
    <li>{{event("started")}} (event)</li>
    <li>{{event("unmuted")}} (event)</li>
    <li>{{domxref("URL")}}</li>
    <li>{{domxref("VideoStreamTrack")}}</li>
  </ul>
</div>
<h2 id="Pista_de_MediaStream">Pista de MediaStream</h2>
<p>Una <em>MediaStreamTrack </em>puede ser de dos tipos, de audio o video, y representa el origen del medio, como una cámara.</p>
<h3 id="Atributos">Atributos</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Atributo</th>
      <th scope="col">Tipo</th>
      <th scope="col">Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>enabled</td>
      <td>Boolean </td>
      <td>True si la pista sigue asociada a su fuente.</td>
    </tr>
    <tr>
      <td>id</td>
      <td>DOMString, read-only</td>
      <td>Un <em>globally unique identifier </em>(GUID) que describe la pista de medios.</td>
    </tr>
    <tr>
      <td>kind</td>
      <td>DOMString, read-only</td>
      <td>El <strong>audio</strong> o <strong>video</strong> para la pista de origen.</td>
    </tr>
    <tr>
      <td>label</td>
      <td>DOMString, read-only</td>
      <td>Una cadena de tipo usuario-asignada que identifica la pista de origen, como en "internal microphone." </td>
    </tr>
    <tr>
      <td>onended</td>
      <td>EventHandler</td>
      <td>Maneja el evento finalizado cuando se lo activa en el objeto MediaStreamTrack.</td>
    </tr>
    <tr>
      <td>onmute </td>
      <td>EventHandler</td>
      <td>Maneja el evento mudo del objeto MediaStreamTrack. </td>
    </tr>
    <tr>
      <td>onoverconstrained</td>
      <td>EventHandler</td>
      <td>Maneja el evento superrestricto cuando se lo activa en el objeto MediaStreamTrack.</td>
    </tr>
    <tr>
      <td>onstarted</td>
      <td>EventHandler</td>
      <td>Maneja el evento iniciado cuando se lo activa en el objeto MediaStreamTrack.</td>
    </tr>
    <tr>
      <td>onunmute </td>
      <td>EventHandler</td>
      <td>Manjea el evento sin enmudecer cuando se lo activa en el objeto MediaStreamTrack.</td>
    </tr>
    <tr>
      <td>readyState</td>
      <td>unsigned short, read-only</td>
      <td>
        <p>Valores para la pista lista:</p>
        <ul>
          <li>live - la pista está activa; la salida se puede activar <em>on</em> y <em>off</em> con el atributo habilitado.</li>
          <li>muted - el origen del medio subyacente de la pista no puede proveer temporalmente datos en tiempo real.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>sourceId</td>
      <td>DOMString, read-only</td>
      <td>La identidad de este origen que es único para esta aplicación y persistente. Se recomienda una GUID pero no es obligatoria.</td>
    </tr>
    <tr>
      <td>sourceType</td>
      <td>SourceTypeEnum, read-only</td>
      <td>Contiene el tipo de información del origen, si es que existe.</td>
    </tr>
  </tbody>
</table>
<h3 id="Eventos">Eventos</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Evento</th>
      <th scope="col">Interfaz</th>
      <th scope="col">Descripción </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>started</td>
      <td>Event</td>
      <td>El objeto MediaStreamTrack no es más "new" en el readyState.</td>
    </tr>
    <tr>
      <td>muted</td>
      <td>Event</td>
      <td>El origen del objeto MediaStreamTrack no puede proveer datos temporalmente.</td>
    </tr>
    <tr>
      <td>unmuted </td>
      <td>Event</td>
      <td>El origen del objeto MediaStreamTrack a recomenzado a proveer datos</td>
    </tr>
    <tr>
      <td>overconstrained</td>
      <td>Event</td>
      <td>El origen del objeto MediaStreamTrack no puede ser confugurado para que encaje en las restricciones impuestas por la pista. Esto podría ocurrir con la altura en el caso de un video, entre otras posibilidades.</td>
    </tr>
    <tr>
      <td>ended</td>
      <td>Event</td>
      <td>
        <p>El origen del objeto MediaStreamTrack no proveerá datos; puede ocurrir por lo siguiente:</p>
        <ul>
          <li>el usuario a deshabilitado los permisos de la aplicación</li>
          <li>el dispositivo de origen está desconectado</li>
          <li>el <em>peer</em> remoto no transmite datos</li>
          <li>se llamó el método stop()</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="appendConstraint()">appendConstraint()</h3>
<p>Agrega la restricción al final de la lista. Esto sólo es un método para añadir restricciones optativas.</p>
<dl>
  <dt>
    Parámetros</dt>
  <dd>
    constraintName <strong>DOMString</strong>, required.</dd>
  <dd>
    constraintValue <strong>Primitive (DOMString, float, etc.) </strong>or<strong> MinMaxConstraint</strong>, required.</dd>
  <dt>
    Devuelve</dt>
  <dd>
    void</dd>
  <dt>
    Excepciones</dt>
  <dd>
    None.</dd>
</dl>
<h3 id="applyConstraints()">applyConstraints()</h3>
<p>Aplica una lista de opciones optativas a la pista. Sobrescribe cualquier otra restricción optativa ya existente en la pista.</p>
<dl>
  <dt>
    <strong>Parámetros</strong></dt>
  <dd>
    constraints <strong>MediaTrackConstraints</strong>, required.</dd>
  <dt>
    Devuelve</dt>
  <dd>
    void</dd>
  <dt>
    Excepciones</dt>
  <dd>
    None.</dd>
</dl>
<h3 id="constraints()">constraints()</h3>
<p>Devuelte todas las <a href="#_edn1" name="_ednref1" title="">[i]</a>restricciones en la pista, obligatorias y optativas. Si tanto<em> <code>mandatory </code></em>u <code>optional</code> no tienen restricciones, ese campo será <code>undefined</code>. Si ninguno tiene restricciones, entonces<code> constraints()</code> devolverá <code>null<em>.</em></code></p>
<dl>
  <dt>
    Parámetros</dt>
  <dd>
    None.</dd>
  <dt>
    Devuelve</dt>
  <dd>
    <strong>MediaTrackConstraints</strong> or <strong>null</strong></dd>
  <dt>
    <span id="cke_bm_186C" style="display: none;"> </span>Excepciones</dt>
  <dd>
    None.</dd>
</dl>
<h3 id="getConstraint()">getConstraint()</h3>
<p>Trae una restricción específica, por nombre, de la pista. Este método puede devolver una de varias posibilidades:</p>
<ul>
  <li>Si su restricción no existe, devuelve <code>null.</code></li>
  <li>Si no provee true para parámetro optativo<code>mandatory </code>y su búsqueda resulta en más de una restricción, este método devolverá una lista. Cada ítem de la lista será el nombre de la búsqueda así como su valor o un objeto <code>MinMaxConstraint</code>. La lista se agrupa con la entrada 0º como la más importante y cada entrada posterior es progresivamente menos importante.</li>
  <li>Si provee<code>True </code>al parámetro <code>mandatory</code> y su búsqueda es miembro del <code>MediaTrackConstraintSet </code>de la pista, este método devuelve su valor primitivo o su <code>MinMaxConstraint</code>, cualquiera que aplique al caso.</li>
</ul>
<dl>
  <dt>
    Parámetros</dt>
  <dd>
    constraintName <strong>DOMString</strong>, required.</dd>
  <dd>
    mandatory <strong>boolean</strong>, optional, default false.</dd>
  <dt>
    Devuelve</dt>
  <dd>
    Any of the possibilities mentioned above.</dd>
  <dt>
    Excepciones</dt>
  <dd>
    None.</dd>
</dl>
<p>--</p>
<h3 id="stop()">stop()</h3>
<p>Detiene permanentemente la creación de datos para las pistas y remueve las referencias a los orígines.</p>
<dl>
  <dt>
    Parámetros</dt>
  <dd>
    None.</dd>
  <dt>
    Devuelve</dt>
  <dd>
    Void.</dd>
  <dt>
    Excepciones</dt>
  <dd>
    None.</dd>
</dl>
<h2 id="Lista_de_pistas_de_MediaStream">Lista de pistas de MediaStream</h2>
<p>Un MediaStream tiene dos objetos MediaStreamTrackList, uno para la pista de video y otro para la de audio.</p>
<table>
  <thead>
    <tr>
      <th scope="col">Atributo </th>
      <th scope="col">Tipo</th>
      <th scope="col">Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>length</td>
      <td>unsigned long, read-only </td>
      <td>El número de pistas en la lista.</td>
    </tr>
    <tr>
      <td>onaddtrack </td>
      <td>EventHandler</td>
      <td>Maneja el evento addtrack.</td>
    </tr>
    <tr>
      <td>onremovetrack </td>
      <td>EventHandler</td>
      <td>Maneja el evento removetrack.</td>
    </tr>
  </tbody>
</table>
<h3 id="Eventos_2">Eventos</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Evento</th>
      <th scope="col">Interfaz</th>
      <th scope="col">Descripción </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>addtrack </td>
      <td>MediaStreamTrackEvent </td>
      <td>Se agregó una MediaStreamTrack a la lista.</td>
    </tr>
    <tr>
      <td>removetrack </td>
      <td>MediaStreamTrackEvent</td>
      <td>Se removió una MediaStreamTrack de la lista.</td>
    </tr>
  </tbody>
</table>
<h3 id="add()">add()</h3>
<p>Agrega una MediaStreamTrack a la lista de pistas.</p>
<dl>
  <dt>
    Parámetros</dt>
  <dd>
    MediaStreamTrack <strong>track</strong>, required.</dd>
  <dt>
    Devuelve</dt>
  <dd>
    Void.</dd>
  <dt>
    Excepciones</dt>
  <dd>
    INVALID_STATE_ERR if the stream is finished (all tracks have ended).</dd>
</dl>
<h3 id="item()">item()<span id="cke_bm_369C" style="display: none;"> </span></h3>
<p>Devuelve la MediaStreamTrack al valor de índice (index) especificado.</p>
<dl>
  <dt>
    Parámetros</dt>
  <dd>
    unsigned long <strong>index</strong>, required.</dd>
  <dt>
    Devuelve</dt>
  <dd>
    MediaStreamTrack</dd>
  <dt>
    Excepciones</dt>
  <dd>
    None.</dd>
</dl>
<h3 id="Remove()">Remove()</h3>
<p>Remueve una MediaStreamTrack de la lista de pistas.</p>
<dl>
  <dt>
    Parámetros</dt>
  <dd>
    MediaStreamTrack <strong>track</strong>, required.</dd>
  <dt>
    Devuelve</dt>
  <dd>
    Void.</dd>
  <dt>
    Excepciones</dt>
  <dd>
    INVALID_STATE_ERR if the stream is finished (all tracks have ended).</dd>
</dl>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<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 </td>
        <td>21{{ property_prefix("webkit") }} </td>
        <td>nightly 18{{ property_prefix("moz") }} </td>
        <td>{{ CompatUnknown() }} </td>
        <td>12</td>
        <td>{{ CompatUnknown() }} </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 </td>
        <td>{{ CompatNo() }} </td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }} </td>
        <td>{{ CompatNo() }} </td>
        <td>{{ CompatNo() }} </td>
      </tr>
    </tbody>
  </table>
</div>
<p>Actualmente, el uso de WebRTC para acceder a la cámara está soportado en Chrome, Opera y Firefox Nightly 18. Habilitar WebRTC en Firefox Nightly requiere que usted establezca una advertencia (flag) en la configuración:</p>
<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">
  <li>Escriba "about:config" en la barra de direcciones y diga que sí quiere efectuar los cambios</li>
  <li>Busque la entrada de "media.navigator.enabled" entry y establezca su valos a "true" [sin comillas]</li>
</ul>
<div>
  <p> </p>
  <div>
    <br>
    <hr>
    <div id="edn1">
      <p><a href="#_ednref1" name="_edn1" title="">[i]</a> en castellano,<em>Flujo o transmisión de [multi] Medios</em></p>
    </div>
  </div>
  <hr>
  <div id="edn1">
    <p><a href="#_ednref1" name="_edn1" title="">[i]</a> en castellano,<em> Pista de Flujo de Media</em></p>
  </div>
  <div id="edn2">
    <p><a href="#_ednref2" name="_edn2" title="">[ii]</a> del inglés, <em>input </em>y<em>output</em></p>
  </div>
  <div id="edn3">
    <p><a href="#_ednref3" name="_edn3" title="">[iii]</a> en castellano, <em>API de Conexión de Pares</em></p>
  </div>
  <div id="edn4">
    <p><a href="#_ednref4" name="_edn4" title="">[iv]</a> en castellano,<em> Nodo de origen del Audio MediaStream</em></p>
  </div>
  <div id="edn5">
    <p><a href="#_ednref5" name="_edn5" title="">[v]</a> en castellano, <em>Nodo de destino del Audio MediaStream</em></p>
    <div>
      <br>
      <hr>
      <div id="edn1">
        <p><a href="#_ednref1" name="_edn1" title="">[i]</a> del inglés,<em>constraints</em></p>
      </div>
    </div>
  </div>
</div>
<p> </p>
<h2 id="Ver_también">Ver también</h2>
<ul>
  <li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - la página de introducción a la API</li>
  <li><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></li>
  <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutorial para usar getUserMedia()</li>
</ul>