Diferencia entre revisiones de «Usuario:ManuelRomero/webRTC»

De WikiEducator
Saltar a: navegación, buscar
(→‎getUserMedia)
(→‎getUserMedia)
 
(4 revisiones intermedias por el mismo usuario no mostrado)
Línea 4: Línea 4:
 
*https://es.wikipedia.org/wiki/WebRTC
 
*https://es.wikipedia.org/wiki/WebRTC
 
*http://www.html5rocks.com/es/tutorials/getusermedia/intro/
 
*http://www.html5rocks.com/es/tutorials/getusermedia/intro/
 +
*https://developer.mozilla.org/es/docs/WebRTC/Taking_webcam_photos
  
  
Línea 15: Línea 16:
 
| Es una API (conjunto de funciones) que permiten con js  establecer conexión en tiempo real usando   
 
| 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}}
 
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
−
*Según wikipedia el api WebRTC
+
;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 26: 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
+
−
<!--
+
−
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.
+
−
 
+
−
<p>
+
−
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 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>
+
−
-->
+
 
;usando getUserMedia
 
;usando getUserMedia
−
el API se puede habilitar en la página about:flags.
 
−
[[Archivo:aboutflagsGetUserMedia.png]]
 
  
−
Opción para habilitar getUserMedia() en la página about:flags de Chrome
+
*El método usado para invocar a este api dependerá del navegador que estemos usando
−
*Para llamar a este api, usamos el método '''''webkitGetUserMedia''''' de la clase navigator
+
*Dependiendo del navegador se puede inicializar de una manera u otra
 
<source lang=javascript>
 
<source lang=javascript>
−
navigator.webkitGetUserMedia (configuracion,accionSiOkPermisos, accionSiError)
+
*navigator.webkitGetUserMedia (Chrome)
 +
*navigator.getUserMedia
 +
*navigator.webkitGetUserMedia
 +
*navigator.mozGetUserMedia (Mozilla, Firefox)
 +
*navigator.msGetUserMedia);
 
</source>
 
</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>
 +
 +
 +
 
*Este método tiene tres parámetros:
 
*Este método tiene tres parámetros:
 
;configuracion
 
;configuracion
−
*Es un objeto de la clase
+
*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
 +
 
 
;accionSiOkPermisos
 
;accionSiOkPermisos
 
;accionSiError
 
;accionSiError

Ú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»