diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/webrtc | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip |
unslug es: move
Diffstat (limited to 'files/es/webrtc')
-rw-r--r-- | files/es/webrtc/index.html | 78 | ||||
-rw-r--r-- | files/es/webrtc/introduction/index.html | 21 | ||||
-rw-r--r-- | files/es/webrtc/mediastream_api/index.html | 445 | ||||
-rw-r--r-- | files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html | 99 | ||||
-rw-r--r-- | files/es/webrtc/taking_webcam_photos/index.html | 159 |
5 files changed, 0 insertions, 802 deletions
diff --git a/files/es/webrtc/index.html b/files/es/webrtc/index.html deleted file mode 100644 index b8eb318529..0000000000 --- a/files/es/webrtc/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: WebRTC -slug: WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: WebRTC ---- -<p>El RTC en WebRTC significa <em>Real-Time Communications</em>, o comunicaciones en tiempo real, en español. WebRTC es una tecnología que permite compartir en tiempo real datos de audio y video entre navegadores (pares). Como conjunto de estándares, WebRTC provee a cualquier navegador de la capacidad de compartir datos de aplicación y realizar teleconferencias de par a par, sin la necesidad de instalar complementos o Software de terceros.</p> -<p>Los componentes de WebRTC son utilizados a través de interfaces avanzadaz de programación en JavaScript (APIs). Actualmente se están desarrollando la API de streaming a través de la red, que representa los flujos de datos de audio y vídeo, y la API PeerConnection, que permite a dos o más usuarios realizar conexiones navegador a navegador. Igualmente en desarrollo se encuentra la API DataChannel, que permite la transmisión de otros tipos de datos para juegos en tiempo real, mensajería instantánea, transferencia de archivos, y otros.</p> -<div class="note"> - <p><strong>Nota:</strong> Parte de este contenido está desactualizado, pero se estará actualizando pronto.</p> -</div> -<p>¿Quieres descubrir WebRTC? ¡Mira este <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="/en-US/docs/https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">vídeo introductorio!</a></p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentación sobre WebRTC</h2> - <dl> - <dt> - <a href="/es/docs/WebRTC/Introduction" title="/en-US/docs/WebRTC/Introduction">Introducción a WebRTC</a></dt> - <dd> - Una guía de introducción sobre qué es WebRTC y cómo funciona.</dd> - <dt> - <a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">Using the Network Stream API</a></dt> - <dd> - Una guía para usar la API Network Stream para transmitir flujos de audio y vídeo.</dd> - <dt> - <a href="/es/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Comunicaciones peer-to-peer (P2P) con WebRTC</a></dt> - <dd> - Como realizar conexiones par a par usando las APIs de WebRTC.</dd> - <dt> - </dt> - <dt> - <a href="/es/docs/WebRTC/Taking_webcam_photos" title="taking webcam photos">Capturar fotografías con la cámara web</a></dt> - <dd> - Como capturar imágenes desde un Webcam con WebRTC.</dd> - <dt> - <a href="/es/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">API de MediaStream</a></dt> - <dd> - Descripción de la API que soporta la creación y manipulación de flujos de medios.</dd> - <dt> - <a href="/es/docs/Web/API/Navigator.getUserMedia" title="/en-US/docs/">getUserMedia()</a></dt> - <dd> - La función del navegador que permite el acceso a dispositivos de medios del sistema.</dd> - <dd> - </dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/WebRTC" title="/en-US/docs/tag/B2G">Ver todo...</a></span></p> - <h2 class="Tools" id="Ejemplos">Ejemplos</h2> - <ul> - <li><a href="http://idevelop.github.com/ascii-camera/" title="http://idevelop.github.com/ascii-camera/">ASCII camera</a></li> - </ul> - </td> - <td> - <h2 class="Community" id="Community" name="Community">Obteniendo ayuda de la comunidad</h2> - <p>Cuando desarrolles sitios y aplicaciones que tomen ventaja de las tecnologías de WebRTC, puede ser muy útil ponerse en contacto con otras personas haciendo lo mismo.</p> - <ul> - <li>Consulta el tópico <em>Media</em> en el foro: {{ DiscussionList("dev-media", "mozilla.dev.media") }}</li> - </ul> - <ul> - <li>Pregunta en el canal IRC de Media de Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/media" title="irc://irc.mozilla.org/b2g">#media</a></li> - </ul> - <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">No olvides la <em>netiqueta</em>...</a></span></p> - <br> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos relacionados</h2> - <ul> - <li><a href="/es/docs/Usando_audio_y_video_con_HTML5" title="/es/docs/Usando_audio_y_video_con_HTML5">Usando audio y video con HTML5</a></li> - </ul> - <h2 class="Tools" id="Recursos">Recursos</h2> - <ul> - <li><a href="http://www.w3.org/TR/webrtc/" title="WebRTC specification">WebRTC Specification</a></li> - <li><a href="http://mozilla.github.io/webrtc-landing/" title="http://mozilla.github.io/webrtc-landing/">WebRTC Test Landing Page</a></li> - </ul> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/es/webrtc/introduction/index.html b/files/es/webrtc/introduction/index.html deleted file mode 100644 index 2529f32085..0000000000 --- a/files/es/webrtc/introduction/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: WebRTC Introduction -slug: WebRTC/Introduction -translation_of: Web/API/WebRTC_API/Session_lifetime ---- -<div class="note"> - <p>WebRTC te permite establecer una comunicación par-a-par en una aplicación del navegador.</p> -</div> -<h2 id="Estableciendo_la_conexión">Estableciendo la conexión</h2> -<p>La conexión inicial entre pares debe ser establecida a través de un servidor de aplicaciones que proporcione descubrimiento de usuarios, comunicación y traducción de direcciones de red (NAT) con transmisión de datos.</p> -<h3 id="Señalización">Señalización</h3> -<p>Señalización es el mecanismo por el cual los pares se envían mensajes de control entre sí con el propósito de establecer el protocolo, canal, y método de comunicación. Estos no están especifiados en el standar WebRTC. En su lugar, el desarrollador puede elegir cualquier protocolo de mensajería (como SIP o XMPP), y cualquier canal de comunicación bidirecional (como WebSocket o XMLHttpRequest) en conjunción con un servidor con un API de conexión permanente (como el <a href="https://developers.google.com/appengine/docs/python/channel/overview" title="https://developers.google.com/appengine/docs/python/channel/overview">Google Channel API</a>) para AppEngine.</p> -<h2 id="Transmisión">Transmisión</h2> -<h3 id="getUserMedia">getUserMedia</h3> -<p>LocalMediaStream object</p> -<h2 id="Recepción">Recepción</h2> -<p>El soporte para WebRTC en Firefox está escondido detrás de un selector de preferencias. Ve a <a href="/about:config" title="/about:config">about:config</a> y establce 'media.navigator.enabled' a 'true'.</p> -<div class="note"> - <p>Hay algunos archivos de prueba en el repositorio de código para darte una idea de cómo funciona. Ve: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Por favor, prueba también la<a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de servicio de llamadas</a>, la página de su código, y <a href="https://github.com/anantn/webrtc-demo/">el código de su servidor</a>.</p> -</div> -<p> </p> diff --git a/files/es/webrtc/mediastream_api/index.html b/files/es/webrtc/mediastream_api/index.html deleted file mode 100644 index f8ab5d5c05..0000000000 --- a/files/es/webrtc/mediastream_api/index.html +++ /dev/null @@ -1,445 +0,0 @@ ---- -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&redirectslug=WebRTC%2Fnavigator.getUserMedia" title="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia?redirectlocale=en-US&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><audio> o <video></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> diff --git a/files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html b/files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html deleted file mode 100644 index d7c859d646..0000000000 --- a/files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Comunicaciones peer-to-peer (P2P) con WebRTC -slug: WebRTC/Peer-to-peer_communications_with_WebRTC -translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC ---- -<p>{{SeeCompatTable}}</p> -<p>Las <strong>WebRTC APIs</strong> están diseñadas para permitir a las aplicaciones JS la creación de conexiones de tiempo real con canales de Audio, Video, y/o Datos (Data), directamente entre usuarios y a través de sus browsers, o hacia servers que soporten los protocolos WebRTC. También potencia navigator.mozGetUserMedia() para acceder a los datos de cámara y micrófono (getUserMedia() está siendo estandarizado por la Media Capture Task Force, así como las Recording APIs).</p> -<p>Las fuentes primarias de las especificaciones para WebRTC (en constante <strong>evolución</strong>), son las especificaciones <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html" title="http://dev.w3.org/2011/webrtc/editor/webrtc.html">WebRTC</a> y <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2009/dap/camera/">getUserMedia</a>, y varios de los borradores del IETF, en mayor medida en el <a href="http://tools.ietf.org/wg/rtcweb/" title="http://tools.ietf.org/wg/rtcweb/">rtcweb working group</a>, pero también <a href="http://tools.ietf.org/wg/mmusic/" title="http://tools.ietf.org/wg/mmusic/">mmusic</a>, <a href="http://tools.ietf.org/wg/rmcat/" title="http://tools.ietf.org/wg/rmcat/">rmcat</a> y algunos otros.<br> - <br> - Gran parte de la implementación en Chrome y Firefox está basada en código que fue abierto por Google en <a href="http://www.webrtc.org/reference" title="http://www.webrtc.org/reference">webrtc.org</a>.</p> -<p style="margin-left: 40px;"><span style="color: #ff0000;"><strong>NOTA</strong></span>: Las versiones actuales de FlashBlock pueden bloquear elementos HTML5 <video>. Si es así, dile que permita el contenido en la página, o deshabilita esa opción vía Herramientas/Add-ons.</p> -<p>Hay un buen tutorial en las características básicas de WebRTC en <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/" title="http://www.html5rocks.com/en/tutorials/webrtc/basics/">HTML5 Rocks</a>. Una colección de páginas de pruebas básicas para soportar el desarrollo existe en <a href="http://mozilla.github.com/webrtc-landing" title="http://mozilla.github.com/webrtc-landing">webrtc-landing</a>.</p> -<p>Puedes hacer simples llamadas persona-a-persona (inclusive si usan Chrome) en <a href="https://apprtc.appspot.com/" title="https://apprtc.appspot.com/">apprtc.appspot.com</a>.</p> -<p>Una descripción de alto nivel de lo que sucede en una conexión RTCPeerConnection se publicó en un artículo de <a href="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/" title="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/">Mozilla Hacks</a> (puedes ver todos los artículos sobre WebRTC <a href="https://hacks.mozilla.org/category/webrtc/" title="https://hacks.mozilla.org/category/webrtc/">aquí</a>).</p> -<p><img alt="Basics of RTCPeerConnection call setup" src="https://hacks.mozilla.org/wp-content/uploads/2013/05/webRTC-BasicsOfHowItWorks2.png" style="width: 898px; height: 805px;"></p> -<h2 id="Especificaciones">Especificaciones</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - <tr> - <td>WebRTC API</td> - <td>En definición</td> - <td> </td> - </tr> - <tr> - <td>getUserMedia API</td> - <td>En definición</td> - <td><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">http://dev.w3.org/2011/webrtc/editor/getusermedia.html</a></td> - </tr> - </tbody> -</table> -<h2 id="Compatibilidad_de_browsers">Compatibilidad de browsers</h2> -<div> - {{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>Sí{{property_prefix("webkit")}}</td> - <td>Firefox 22</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>DataChannels</td> - <td>A partir de Chrome 29</td> - <td>Firefox 22</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</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>Soporte preliminar</td> - <td>Via Chrome (detrás de un flag de configuración)</td> - <td>Activado en Nightly y Aurora</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>DataChannels</td> - <td>{{CompatUnknown}}</td> - <td>Activado en Nightly y Aurora</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<p> </p> diff --git a/files/es/webrtc/taking_webcam_photos/index.html b/files/es/webrtc/taking_webcam_photos/index.html deleted file mode 100644 index 143b2ee72f..0000000000 --- a/files/es/webrtc/taking_webcam_photos/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Capturar fotografías con la cámara web -slug: WebRTC/Taking_webcam_photos -tags: - - Canvas - - WebRTC - - cámara web - - getusermedia -translation_of: Web/API/WebRTC_API/Taking_still_photos ---- -<h2 id="Introducción_y_demostración">Introducción y demostración</h2> -<p>Este es un tutorial rápido de cómo acceder a la cámara de tu laptop y capturar una foto con ella. Puedes observar el <a href="http://jsfiddle.net/codepo8/agaRe/4/" title="http://jsfiddle.net/codepo8/agaRe/4/">código final en acción en este JSFiddle</a>. También existe una versión más avanzada en JavaScript para cargar fotos a <strong>imgur</strong> disponible como <a href="https://github.com/codepo8/interaction-cam/" title="https://github.com/codepo8/interaction-cam/">código en GitHub</a> o <a href="http://codepo8.github.com/interaction-cam/" title="http://codepo8.github.com/interaction-cam/">como demo</a>.</p> -<h2 id="El_formato_HTML">El formato HTML</h2> -<p>Lo primero que necesitas para acceder a la cámara web utilizando WebRTC es un elemento {{HTMLElement("video")}} y un elemento {{HTMLElement("canvas")}} en la página. El elemento de video recibe la secuencia desde WebRTC y el elemento canvas es utilizado para agarrar la imagen desde el video. También añadimos una imagen de relleno que luego será reemplazada con la toma capturada por la cámara web.</p> -<pre class="brush:html;"><video id="video"></video> -<button id="startbutton">Take photo</button> -<canvas id="canvas"></canvas> -<img src="http://placekitten.com/g/320/261" id="photo" alt="photo"> -</pre> -<h2 id="El_script_completo">El script completo</h2> -<p>Aquí se muestra completamente el código JavaScript. Más abajo, explicaremos gradualmente cada sección con más detalle.</p> -<pre class="brush:js;">(function() { - - var streaming = false, - video = document.querySelector('#video'), - canvas = document.querySelector('#canvas'), - photo = document.querySelector('#photo'), - startbutton = document.querySelector('#startbutton'), - width = 320, - height = 0; - - navigator.getMedia = ( navigator.getUserMedia || - navigator.webkitGetUserMedia || - navigator.mozGetUserMedia || - navigator.msGetUserMedia); - - navigator.getMedia( - { - video: true, - audio: false - }, - function(stream) { - if (navigator.mozGetUserMedia) { - video.mozSrcObject = stream; - } else { - var vendorURL = window.URL || window.webkitURL; - video.src = vendorURL.createObjectURL(stream); - } - video.play(); - }, - function(err) { - console.log("An error occured! " + err); - } - ); - - video.addEventListener('canplay', function(ev){ - if (!streaming) { - height = video.videoHeight / (video.videoWidth/width); - video.setAttribute('width', width); - video.setAttribute('height', height); - canvas.setAttribute('width', width); - canvas.setAttribute('height', height); - streaming = true; - } - }, false); - - function takepicture() { - canvas.width = width; - canvas.height = height; - canvas.getContext('2d').drawImage(video, 0, 0, width, height); - var data = canvas.toDataURL('image/png'); - photo.setAttribute('src', data); - } - - startbutton.addEventListener('click', function(ev){ - takepicture(); - ev.preventDefault(); - }, false); - -})();</pre> -<h2 id="Explicando_paso_a_paso">Explicando paso a paso</h2> -<p>Entonces, ¿Qué es lo que sucede aquí? Lo analizaremos paso por paso.</p> -<h3 id="Función_Anónima">Función Anónima</h3> -<pre class="brush:js;">(function() { - - var streaming = false, - video = document.querySelector('#video'), - canvas = document.querySelector('#canvas'), - photo = document.querySelector('#photo'), - startbutton = document.querySelector('#startbutton'), - width = 320, - height = 0;</pre> -<p>Empezamos por encerrar el script entero en una función anónima para evitar las variables globales. Tomamos los elementos HTML que necesitamos y definimos el ancho (width) del video a 320 y la altura (height) a 0, ya que calcularemos la altura apropiada posteriormente.</p> -<div class="warning"> - <p>En estos momentos existe una diferencia entre los tamaños de video proporcionados por getUserMedia. Firefox Nightly utiliza una resolución de 352x288 y Opera y Chrome utiliza una resolución de 640x400. Esto cambiará en el futuro, pero cambiando el tamaño con la proporción que usaremos más abajo, nos aseguraremos de no obtener sorpresas desagradables.</p> -</div> -<h3 id="Obtener_el_video">Obtener el video</h3> -<p>Ahora necesitamos obtener el video desde la cámara web. Actualmente esto está predeterminado para los diferentes navegadores, así que necesitamos comprobar cuál es compatible:</p> -<pre class="brush:js;"> navigator.getMedia = ( navigator.getUserMedia || - navigator.webkitGetUserMedia || - navigator.mozGetUserMedia || - navigator.msGetUserMedia);</pre> -<p>Le solicitamos al navegador que nos dé un video sin audio y obtenemos una secuencia (stream) en la función de retrollamada:</p> -<pre class="brush:js;"> navigator.getMedia( - { - video: true, - audio: false - }, - function(stream) { - if (navigator.mozGetUserMedia) { - video.mozSrcObject = stream; - } else { - var vendorURL = window.URL || window.webkitURL; - video.src = vendorURL.createObjectURL(stream); - } - video.play(); - }, - function(err) { - console.log("An error occured! " + err); - } - );</pre> -<p>En estos momentos Firefox Nightly necesita que tu configures la propiedad de <code>mozSrcObject</code> del elemento del video con el fin de reproducirlo; para otros navegadores, configura el atributo <code>src</code>. Mientras que Firefox puede utilizar la secuencia de video directamente, Webkit y Opera necesitan crear un objeto URL desde ella. Todo esto será estandarizado en un futuro cercano.</p> -<h3 id="Redefinir_el_tamaño_del_video">Redefinir el tamaño del video</h3> -<p>Luego necesitamos configurar el tamaño del video a las dimensiones deseadas.</p> -<pre class="brush:js;"> video.addEventListener('canplay', function(ev){ - if (!streaming) { - height = video.videoHeight / (video.videoWidth/width); - video.setAttribute('width', width); - video.setAttribute('height', height); - canvas.setAttribute('width', width); - canvas.setAttribute('height', height); - streaming = true; - } - }, false);</pre> -<p>Nos subscribimos al evento <code>canplay </code>del video y leemos sus dimensiones utilizando <code>videoHeight</code> y <code>videoWidth</code>. Estas no están disponible realmente hasta que el evento sea iniciado. Establecemos <code>streaming</code> a verdadero (true) para que compruebe esto solo una vez, mientras que el evento <code>canplay</code> siga en actividad.</p> -<p>Esto es todo lo que se necesita para que inicie el video.</p> -<h3 id="Capturar_una_imagen">Capturar una imagen</h3> -<p>Ahora necesitamos capturar una imagen utilizando un lienzo (canvas). Asignamos un manejador de eventos al botón de inicio para llamar a la función de <code>takepicture</code>.</p> -<pre class="brush:js;"> startbutton.addEventListener('click', function(ev){ - takepicture(); - ev.preventDefault(); - }, false);</pre> -<p>En esta función, reestablecemos el tamaño del lienzo (canvas) a las dimensiones del video, el cual lo sustituye y tenemos un marco del video, el cual se copia al canvas. Luego necesitamos convertir los datos del canvas en datos tipo URL con un encabezado PNG, y establecer el src de la fotografía a este mismo url.</p> -<pre class="brush:js;"> function takepicture() { - canvas.width = width; - canvas.height = height; - canvas.getContext('2d').drawImage(video, 0, 0, width, height); - var data = canvas.toDataURL('image/png'); - photo.setAttribute('src', data); - } - -})();</pre> -<p>Eso es todo lo que se necesita para mostrar la secuencia de la cámara web y capturar una imagen fija de ella, a través de Chrome, Opera y Firefox.</p> -<h2 id="Compatibilidad">Compatibilidad</h2> -<p>Actualmente utilizar WebRTC para acceder a la cámara es compatible en Chrome, Opera y Firefox Nightly 18. Para habilitar WebRTC en Firefox Nightly requiere que establezcas un indicador en la configuración:</p> -<ul> - <li>Teclea "about:config" en la barra de direcciones y afirma que quieres realizar algunos cambios.</li> - <li>Encuentra la entrada "media.navigator.enabled" y establécelo a verdadero (true).</li> -</ul> |