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:
- Integrar servicios de atención al cliente / helpdesk
- Venta de productos y demostraciones online
- Aplicaciones de vídeochat
- Consultas entre profesionales como abogados, arquitectos, médicos, investigadores, etc.
- Impartición de cursos y material didáctico en directo.
- Streaming de vídeo en directo de eventos
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.
Comentarios