Usuario:ManuelRomero/webRTC

De WikiEducator
Saltar a: navegación, buscar

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