Videoconferencia en aplicaciones HTML5

OpenTok es una librería Open Source con la que podemos integrar videoconferencia en nuestras aplicaciones web HTML 5 y apps para Android e iOS de una manera relativamente sencilla pudiendo crear salas con múltiples participantes simultáneamente con el requisito de tener conexión a Internet, una webcam y un micrófono.

Los usos de estas aplicaciones HTML 5 de videoconferencia a medida son múltiples, algunos ejemplos serían:

Según vayamos a realizar uso del API de OpenTok, podrá ser de uso gratuito o tendrá limitaciones pudiendo llegar a ser de pago en caso de excesiva carga (más información sobre las tarifas).

En los siguientes ejemplos, nos basaremos en los ejemplos oficiales añadiéndoles código PHP y base de datos para que el intercambio de información entre cada cliente sea transparente

Credenciales OpenTok como aplicación de videoconferencia

En primer lugar, deberemos registrarnos como  desarrolladores de Open Tok. Ésto nos proporcionará en nuestro correo electrónico una clave secreta que controlará el uso que hacemos del servicio de video conferencia.
Nos podemos registrar en Open Tok desde éste enlace.

Videoconferencia en aplicaciones HTML 5, jQuery y PHP

Para intercambiar información entre usuarios, haremos uso de PHP y base de datos. En primer lugar, PHP creará una sesión y la guardaremos en base de datos (o cualquier otra manera que prefiramos).
En segundo lugar, todos los clientes que deban conectarse a dicha sesión, obtendrá la información para estar todos en la misma sala.

1.- Descargaremos el API de desarrollo OpenTok para PHP descargando los archivos en una carpeta llamada OpenTok:

  • OpenTok/API_Config.php
  • OpenTok/OpenTokArchive.php
  • OpenTok/OpenTokSDK.php
  • OpenTok/OpenTokSession.php

2.- Configuraremos nuestras credenciales OpenTok en el archivo API_Config.php

class API_Config {    
   // Replace this value with your TokBox API Partner Key
   const API_KEY = "!!!!!!!!!!!!!!";     
   // Replace this value with your TokBox API Partner Secret
   const API_SECRET = "#############";     
   const API_SERVER = "https://api.opentok.com/hl";
}

3.- El primer usuario creará la sesión de videoconferencia y su respectivo token, guardándolo en base de datos:

<?php

require("OpenTok/API_Config.php");
require("OpenTok/OpenTokArchive.php");
require("OpenTok/OpenTokSDK.php");
require("OpenTok/OpenTokSession.php");
$apiObj = new OpenTokSDK (API_Config::API_KEY, API_Config::API_SECRET) ;
// Configuramos el objeto
$session = $apiObj -> create_session() ;
$sessionId = $session -> getSessionId() ;
$token = $apiObj -> generate_token($sessionId) ;

?>

Insertaremos las variables $sessionId y $token en base de datos. Ésto nos servirá para que dos usuarios se intercambien entre ellos la información necesaria para que la videoconferencia sea totalmente transparente.

Lo más interesante, es crear una aplicación web que ponga en contacto a varios usuarios entre sí de manera privada mediante algún mecanismo tipo sala de chat, citas, etc.

4.- Después de que el primer usuario cree la sesión, se creará la interfaz. De igual manera, los siguientes usuarios se conectarán con los datos guardados en base de datos (el código es común para todos los clientes):

<!DOCTYPE html>
<html>
<head>
<title>Videoconferencia en HTML 5</title>
</head>
<body>
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Opentok -->
<script src="http://static.opentok.com/v0.91/js/TB.min.js"></script>
<!-- Sesión -->
<script type="text/javascript">
   var apiKey = '<?=API_Config::API_KEY?>';
   var sessionId = '<?=$sessionId?>';
   var token = '<?=$token?>';
   TB.setLogLevel(TB.DEBUG);
   var session = TB.initSession(sessionId);
   session.addEventListener('sessionConnected', sessionConnectedHandler);
   session.addEventListener('streamCreated', streamCreatedHandler);
   session.connect(apiKey, token);
   var publisher;
   function sessionConnectedHandler(event) {
      var publishProps = {height:120, width:161};
      publisher = TB.initPublisher(apiKey, 'TokVideoStreamUsuario', publishProps);
      session.publish(publisher);
      subscribeToStreams(event.streams);
   }
   function streamCreatedHandler(event) {
      subscribeToStreams(event.streams);
   }
   function subscribeToStreams(streams) {
      for (var i = 0; i < streams.length; i++) {
         if (streams[i].connection.connectionId == session.connection.connectionId) {
            return;
         }
         var divid = 'stream' + streams[i].streamId;
         $("#TokVideoStreamOtrosUsuarios").html("<div id='stream"+streams[i].streamId+"'></div>");
         var publishProps = {height:361, width:482};
         session.subscribe(streams[i], divid);
      }
   }
</script>
<!-- Como me ven a mi otros usuarios -->
<div id="TokVideoStreamUsuario"></div>
<br/><br/>
<!-- Vista de otros usuarios -->
<div id="TokVideoStreamOtrosUsuarios"></div>
</body>
<html>

El comportamiento será mostrar en un Flash pequeño nuestra vista, y luego en grande los usuarios conectados. Conforme se conecten otros usuarios se irán añadiendo otros marcos Flash con los usuarios conectados.

Videoconferencia en apps Android / iOS

En este ejemplo se ha hecho uso de Flash, lo cuál no es compatible con las apps, por lo que para dichas plataformas deberemos hacer uso de la versión nativa del SDK de OpenTok.

Páginas relacionadas

Comentarios

Comentario de Mark - 21 de Marzo de 2013 - 14:36
Muchas gracias por tu aporte, me sirvio mucho!
Comentario de Mark - 21 de Marzo de 2013 - 18:31
pero no entendi para que guardar el sessionId y token en la base de datos. Me lo podrias explicar por email? Gracias.
Comentario de Imaginanet - Carlos - 25 de Marzo de 2013 - 09:32
Hola Mark, se guarda en base de datos para que dichos parámetros sirvan como relación entre dos participantes en la sala de Chat. Imagínate la siguiente situación de un servicio de Helpdesk que atiende incidencias: Un cliente abre una incidencia, que se guarda en base de datos, dicha incidencia tiene una relación 1:1 operadores. Una manera de poner en contacto el operador con el cliente sería guardar los datos de acceso a en base de datos (hay muchas más maneras), pero el operador aparte de atender una única videoconferencia, podría atender varias a la vez.
Comentario de Francisco - 06 de Mayo de 2013 - 05:27
Buenisima entrada, solo que no se que BD crear ni con que tablas, aydua porfavoooooor!
Comentario de Danny - 02 de Abril de 2014 - 08:46
el id de los div ya viene por default en el opentok o se tienen que diseñar, o se puede meter canvas o como es, o con video?
Comentario de victor - 08 de Mayo de 2014 - 03:17
me podrías explicar y asesorar como genera varios grupos de salas
Comentario de prahlada - 24 de Mayo de 2014 - 21:09
Interesante pero no entendi lo de la base de datos o como se crearia esa base de datos, no veo ahi ningun archivo de conexion o algo asi
Comentario de Genser - 25 de Noviembre de 2014 - 03:29
Disculpa me sirvio mucho esta informacion, pero no entiendo que es TB, podrias explicarme eso porfavor
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí