Diferencia entre revisiones de «Usuario:ManuelRomero/webRTC»

De WikiEducator
Saltar a: navegación, buscar
(→‎getUserMedia)
 
(12 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
===Qué es WebRTC===
 
===Qué es WebRTC===
−
https://github.com/nwjs/nw.js/wiki/Control-camera-and-microphone-with-getusermedia-api
+
*https://github.com/nwjs/nw.js/wiki/Control-camera-and-microphone-with-getusermedia-api
 +
*https://webrtc.org/
 +
*https://es.wikipedia.org/wiki/WebRTC
 +
*http://www.html5rocks.com/es/tutorials/getusermedia/intro/
 +
*https://developer.mozilla.org/es/docs/WebRTC/Taking_webcam_photos
  
  
−
[[Imagen:a.png|200px]]
+
[[Imagen:webRTC.png]]
−
 
+
{{Definicion
 +
|Title=WebRTC
 +
|Web Real Time Comunication o comunicación en tipo real a través de la red}}
  
 
{{Definicion|
 
{{Definicion|
 
Title=WebRTC
 
Title=WebRTC
−
| Es una API (conjunto de funciones) que permiten con js  establecer conexión en tiempo real con
+
| Es una API (conjunto de funciones) que permiten con js  establecer conexión en tiempo real usando 
−
Audio Video Datos usando el hardware de nuestro equipo mediante el browsers, permitiéndonos conectar a otros usuarios}}
+
Audio Video Datos con el hardware de nuestro equipo mediante el browsers, permitiéndonos conectar a otros usuarios}}
−
*Para ello lo primero que tenemos que hacer es obtener el recurso (hardware) del equipo. Para este cometido usamos el API '''''getUserMedia'''''
+
Este API o tecnología implementa o incluye las siguientes apis
 +
;MediaStream, también conocida como getUserMedia
 +
:Para que el navegador pueda acceder al recurso de cámara y micrófono del equipo
 +
;PeerConnection
 +
:Establece las llamadas de audio y vídeo
 +
;DataChannels
 +
:para que los navegadores puedan compartir datos usando el protocolo peer-to-peer
  
 
===getUserMedia===
 
===getUserMedia===
Línea 20: Línea 32:
  
 
*getUserMedia va más allá de sólo obtener el recuros:
 
*getUserMedia va más allá de sólo obtener el recuros:
−
#Usado con '''''CSS filters''''' Se pueden obtener efectos a la hora de renderizar la imagen
+
#Usado con '''''CSS filters''''' y WebGL Se pueden obtener diferentes efectos a la hora de renderizar la imagen
−
#WebGL permite usar la GPU para renderizar
+
;usando getUserMedia
 +
 
 +
*El método usado para invocar a este  api dependerá del navegador que estemos usando
 +
*Dependiendo del navegador se puede inicializar de una manera u otra
 +
<source lang=javascript>
 +
*navigator.webkitGetUserMedia  (Chrome)
 +
*navigator.getUserMedia
 +
*navigator.webkitGetUserMedia
 +
*navigator.mozGetUserMedia (Mozilla, Firefox)
 +
*navigator.msGetUserMedia);
 +
</source>
 +
*Una forma de inicializarlo correctamente es hacer una combinación de todas y verificar si se ha podido acceder al API o no (Puede ser que el navegador no soporte el API ''''getUserMedia'''''
 +
<source lang=javascript>
 +
navigator.getMedia = (navigator.webkitGetUserMedia ||navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia);
 +
if (navigator.getMedia){
 +
//OK aquí escibimos el código de acceder al stream que genera la cámara y dársela a un elemento video del html
 +
}else{
 +
alert("Tu navegador no soporta webRTC");
 +
}
 +
</source>
 +
 
 +
 
  
−
In addition, getUserMedia can be combined with other platform features like CSS filters and WebGL to render effects as the is captured. For example, you can rotate the video and add hipstery filters, play a xylophone with motion detection, try on glasses with face detection, and step into a photobooth with crazy effects like “Snow” and “Fire”. The good news is, those features are all possible in node-webkit.
+
*Este método tiene tres parámetros:
 +
;configuracion
 +
*Es un objeto de restricciones que especifica los elementos hardware a los que queremos acceder
 +
*Opcionalmente podemos especificar restricciones extras como calidad mínima de la cámara para que nuestra aplicación funcione
 +
<source lang=javascript>
 +
var opciones = {video:true, audio=false};
 +
//En este caso accederemos al vídeo y no al audio
 +
</source>
 +
Especificando calidad
  
−
<p>
+
;accionSiOkPermisos
−
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).
+
;accionSiError
−
</p>
+
−
<p>
+
−
Las fuentes primarias de las especificaciones para WebRTC (en constante evolución), son las especificaciones WebRTC y getUserMedia, y varios de los borradores del IETF, en mayor medida en el rtcweb working group, pero también mmusic, rmcat y algunos otros.
+
−
</p>
+

Última revisión de 00:55 26 may 2016

Qué es WebRTC


WebRTC.png


Icon define.gif

WebRTC

Web Real Time Comunication o comunicación en tipo real a través de la red




Icon define.gif

WebRTC

Es una API (conjunto de funciones) que permiten con js establecer conexión en tiempo real usando

Audio Video Datos con el hardware de nuestro equipo mediante el browsers, permitiéndonos conectar a otros usuarios


Este API o tecnología implementa o incluye las siguientes apis

MediaStream, también conocida como getUserMedia
Para que el navegador pueda acceder al recurso de cámara y micrófono del equipo
PeerConnection
Establece las llamadas de audio y vídeo
DataChannels
para que los navegadores puedan compartir datos usando el protocolo peer-to-peer

getUserMedia



Icon define.gif

getUserMedia

Api que me permite acceder al hardware (camara y vídeo) de un equipo previa concesión del usuario del equipo


http://www.html5rocks.com/en/tutorials/getusermedia/intro/

  • getUserMedia va más allá de sólo obtener el recuros:
  1. Usado con CSS filters y WebGL Se pueden obtener diferentes efectos a la hora de renderizar la imagen
usando getUserMedia
  • El método usado para invocar a este api dependerá del navegador que estemos usando
  • Dependiendo del navegador se puede inicializar de una manera u otra 
*navigator.webkitGetUserMedia  (Chrome)
*navigator.getUserMedia
*navigator.webkitGetUserMedia
*navigator.mozGetUserMedia (Mozilla, Firefox)
*navigator.msGetUserMedia);
  • Una forma de inicializarlo correctamente es hacer una combinación de todas y verificar si se ha podido acceder al API o no (Puede ser que el navegador no soporte el API 'getUserMedia 
navigator.getMedia = (navigator.webkitGetUserMedia ||navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia);
if (navigator.getMedia){
//OK aquí escibimos el código de acceder al stream que genera la cámara y dársela a un elemento video del html
}else{
alert("Tu navegador no soporta webRTC");
}


  • Este método tiene tres parámetros:
configuracion
  • Es un objeto de restricciones que especifica los elementos hardware a los que queremos acceder
  • Opcionalmente podemos especificar restricciones extras como calidad mínima de la cámara para que nuestra aplicación funcione 
var opciones = {video:true, audio=false};
//En este caso accederemos al vídeo y no al audio

Especificando calidad

accionSiOkPermisos
accionSiError
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/webRTC&oldid=19572»