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

Qué es WebRTC

• 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

WebRTC

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

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

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