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:
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.
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:
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.
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.
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.
Alguien puede ayudarme con un proyecto de Web Comunicación en tiempo real?