Cargando

Ir a contenido


 


WebRTC Comunicación de Audio y Vídeo desde un Navegador

WebRTC o Web Comunicación en tiempo real, es una plataforma que permite realizar conferencias de voz, chat y vídeo.


Escrito por el oct 13 2015 13:47 webrtc


Actualmente existen diversos sistemas de comunicación vía navegadores web, como Hangout, Skype, etc.

WebRTC o Web Comunicación en tiempo real, es una plataforma desarrollada por Google en Javascript que se brinda en forma libre con el objetivo de que se puedan desarrollar aplicaciones que funcionen en un navegador y permitir realizar llamadas de voz, chat y vídeo, además que podamos crear un canal de uso compartido de archivos.

Algunas de las ventajas de este API son:
  • Podemos configurar y establecer una conexión de comunicación de hasta 256 usuarios.
  • Puede utilizarse comunicaciones de audio, vídeo y datos entre Chrome y Firefox.
  • El Api permite compartir la pantalla con los usuarios.

WebRTC ha implementado estándares abiertos para tiempo real, vídeo, audio y comunicación de datos. Muchos servicios web ya utilizan el API RTC, pero necesitan ser descargados para utilizarse y algunos brindan algunas herramientas online mediante aplicaciones nativas o plugins. Algunas aplicaciones que utilizan RTC son Skype, Facebook (que utiliza una versión de Skype) y Google Hangouts, WhatsApp, Facebook Messenger.

Los plugins y aplicaciones no cumplen en muchos caso con ser multiplataforma y pueden que no todas las personas utilicen la misma aplicación o se la puedan instalar.
Los principales objetivos del proyecto WebRTC son que sus APIs deben ser de código abierto, libre, estandarizada, integrado en los navegadores web y más eficiente que las tecnologías existentes.


Funcionalidades de las API WebRTC


API getUserMedia está disponible en Chrome, Opera, Firefox y Microsoft Edge. Esta API brinda acceso a multimedia vídeo, audio, o ambos.
La funcionalidad es la comunicación en tiempo real, también se puede utilizar para grabar tutoriales o clases para los cursos en línea utilizando nuestra propia aplicación.

Otro caso interesante es el uso de la vigilancia mediante cámara web. Esta API sólo es capaz de capturar y reproducir de audio y vídeo, no sirve para guardar la trasmisión, para ello se utiliza otra API. Para tener una videoconferencia en tiempo real es muy útil.

Veamos un ejemplo:


<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tutorial WebRTC getUserMedia API</title>
<style>
		 body
		 {
		    max-width: 500px;
		    margin: 2em auto;
		    padding: 0 0.5em;
		    font-size: 20px;
		    background-color:#223254;
		 }

		 h2
		 {
		    text-align: center;
		    color:#ffffff;
		 }
		
		 .botonera
		 {
		    text-align: center;
		 }
	   
		 #video
		 {
		    display: block;
		    border:solid 5px #f7f7f7;
		    width: 100%;
		 }
		 .boton
		 {
		    padding: 0.5em;
		    display: inline-block;
		    margin: 1em auto;
		 }

		 </style>
		 </head>
		 <body>
    <h2>WebRTC getUserMedia API</h2>
    <h2>Probando video</h2>
   
  
	 <video id="video" autoplay="autoplay" controls="controls">
	
  
	 </video>
	 <div class="botonera">
	  <button id="btconectar" class="boton">Conectar</button>
	   <button id="btdescanectar" class="button-demo">Desconectar</button>
	   </div>
	    <script>var trasmitevideo = null;
		 var video = document.getElementById('video');

		 // Detectar navegador MS Edge, Chrome o Firefox
		 window.navigator = window.navigator || {};
		 navigator.getUserMedia = navigator.getUserMedia	   ||
								  navigator.webkitGetUserMedia ||											    navigator.mozGetUserMedia    ||
								  null;
		 if (navigator.getUserMedia === null) {
			 document.getElementById('btconectar').setAttribute('disabled', 'disabled');
		    document.getElementById('btdesconectar').setAttribute('disabled', 'disabled');
		 } else {
		   
		    var escena = window.URL ? window.URL.createObjectURL : function(stream) {return stream;};
		    var audio = window.AudioContext	   ||
							   window.webkitAudioContext ||
							   null;
		  

		    document.getElementById('btconectar').addEventListener('click', function() {

			   // Capturamos el audio y el video
			   navigator.getUserMedia({
				  video: true,
				  audio: true
			   },
			   function(stream) {
				  trasmitevideo = stream;
				  // trasmitir datos de video
				  video.src = escena(stream);
				  video.play();
			   },
			   function(error) {
				  console.log('Error de video: ' + error.code);
			   });
		    });
		    document.getElementById('btdesconectar').addEventListener('click', function() {
			   // Pausar trasmision de video
			   video.pause();
			   // Detener transmision de video
			   trasmitevideo.stop();
		    });
		 }</script>  </body></html>
Para facilitar la programación existen framework y apis que nos permiten agilizar la programación, en este caso podemos mencionar Simplest WebRTC o PeerJS que aprovecha la funcionalidad RTC que viene incorporado en algunos navegadores como Chrome y Firefox.

La API WebRTC cubre todos los pasos para transmitir vídeo en vivo, audio y datos, esta API abstrae con funciones simple la API WebRTC e implementa métodos para invocarlos de manera mas fácil.
Podemos descargar Simplest WebRTC desde su pagina oficial, luego descomprimimos el archivo zip y lo copiamos en un servidor local como Xampp o en un servidor remoto.

Crearemos a continuación el siguiente código fuente utilizando el archivo Javascript de api simplewebrtc.bundle.js, necesitamos todos los archivos js, si queremos crear la aplicación en otra carpeta.
<!DOCTYPE html>
<html>
    <head>
	    <title>SimpleWebRTC Videoconferencia</title>
      <link rel="stylesheet" type="text/css" href="estilos.css">
    </head>
    <body>
	    <h1 id="title">Videoconferencia</h1>
	  
	
	    <form id="createRoom">
		    <input id="sessionInput"/>
		    <button type="submit">Crear Videoconferencia</button>
	    </form>
	    <div class="contenedor">
		    <video id="localVideo" style="height: 150px;" oncontextmenu="return false;"></video>
		    <div id="localVolume" class="volumen"></div>
	    </div>
	    <div id="remotes"></div>
	    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	    <script src="simplewebrtc.bundle.js"></script>
	    <script>
		    // Crear url de la sala de conferencia
		    var salaconferencia = location.search && location.search.split('?')[1];
		    // Iniciamos la conexion a nuestro camara de video
		    var webrtc = new SimpleWebRTC({
			    // indicamos cual sera el id del elemento a conectar
			    localVideoEl: 'localVideo',
			    // indicamos el id del elemento video remoto
			    remoteVideosEl: '',
			    // accedemos a nuestra camara de video si es detectada
			    autoRequestMedia: true,
			    debug: false,
			    detectSpeakingEvents: true,
			    autoAdjustMic: false
		    });

		    // Si inica nuestra camra de video
		    webrtc.on('readyToCall', function () {
			    // el enlace de la sala de videocnferencia quedara a la espera de usuarios
			    if (salaconferencia) webrtc.joinRoom(salaconferencia);
		    });

		    function showVolume(el, volume) {
			    if (!el) return;
			    if (volume < -45) { // variamos el volumen -45 and -20
				    el.style.height = '0px';
			    } else if (volume > -20) {
				    el.style.height = '100%';
			    } else {
				    el.style.height = '' + Math.floor((volume + 100) * 100 / 25 - 220) + '%';
			    }
		    }
		    webrtc.on('channelMessage', function (peer, label, data) {
			    if (data.type == 'volume') {
				    showVolume(document.getElementById('volume_' + peer.id), data.volume);
			    }
		    });
		    webrtc.on('videoAdded', function (video, peer) {
			    console.log('video added', peer);
			    var remotes = document.getElementById('remotes');
			    if (remotes) {
				    var d = document.createElement('div');
				    d.className = 'contenedor';
				    d.id = 'container_' + webrtc.getDomId(peer);
				    d.appendChild(video);
				    var vol = document.createElement('div');
				    vol.id = 'volume_' + peer.id;
				    vol.className = 'volumen';
				    video.onclick = function () {
					    video.style.width = video.videoWidth + 'px';
					    video.style.height = video.videoHeight + 'px';
				    };
				    d.appendChild(vol);
				    remotes.appendChild(d);
			    }
		    });
		    webrtc.on('videoRemoved', function (video, peer) {
			    console.log('video removed ', peer);
			    var remotes = document.getElementById('remotes');
			    var el = document.getElementById('container_' + webrtc.getDomId(peer));
			    if (remotes && el) {
				    remotes.removeChild(el);
			    }
		    });
		    webrtc.on('volumeChange', function (volume, treshold) {
			    //console.log('own volume', volume);
			    showVolume(document.getElementById('localVolume'), volume);
		    });
		    // Since we use this twice we put it here
		    function setRoom(name) {
			    $('form').remove();
			    $('h1').text(name);
			    $('#subTitle').text('Link to join: ' + location.href);
			    $('body').addClass('active');
		    }
		    if (salaconferencia) {
			    setRoom(salaconferencia);
		    } else {
			    $('form').submit(function () {
				    var val = $('#sessionInput').val().toLowerCase().replace(/\s/g, '-').replace(/[^A-Za-z0-9_\-]/g, '');
				    webrtc.createRoom(val, function (err, name) {
					    console.log(' create salaconferencia cb', arguments);
				   
					    var newUrl = location.pathname + '?' + name;
					    if (!err) {
						    history.replaceState({foo: 'bar'}, null, newUrl);
						    setRoom(name);
					    } else {
						    console.log(err);
					    }
				    });
				    return false;		 
			    });
		    }
		    var button = $('#screenShareButton'),
			    setButton = function (bool) {
				    button.text(bool ? 'share screen' : 'stop sharing');
			    };
		    webrtc.on('localScreenStopped', function () {
			    setButton(true);
		    });
		    setButton(true);
		    button.click(function () {
			    if (webrtc.getLocalScreen()) {
				    webrtc.stopScreenShare();
				    setButton(true);
			    } else {
				    webrtc.shareScreen(function (err) {
					    if (err) {
						    setButton(true);
					    } else {
						    setButton(false);
					    }
				    });
				   
			    }
		    });
	    </script>
    </body>
</html>
A continuación crearemos el archivo estilos.css
.contenedor {
			    position: relative;
			    width: 200px;
			    height: 150px;
		    }
		    .contenedor video {
			    position: absolute;
			    width: 100%;
			    height: 100%;
		    }
		    .volumen {
			    position: absolute;
			    width: 5px;
			    height: 0px;
			    right: 0px;
			    bottom: 0px;
			    background-color: #12acef;
		    }
Probamos la web en un navegador. Lo primero es poner el nombre de la sala de conferencias que queremos crear:




Hacemos clic en el botón Crear Videoconferencia y nos creará un enlace que podremos compartir con otras personas si tenemos un dominio.



Si estamos en modo local podemos copia el enlace en otro navegador y veremos como nos conectamos a la video conferencia.




Para este ejemplo se utilizo Firefox versión 41 y Chrome version 45. La tecnología WebRTC facilitará la comunicación y permitirá que cualquier usuario pueda crearse sus propias aplicaciones de videoconferencia.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado oct 13 2015 13:47
  •   Actualizado oct 14 2015 11:14
  •   Visitas 1.9K
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse