Probando Zipcall.io, la alternativa descentralizada a ZOOM y Jitsi

A la fecha de este post, estamos viviendo un cambio en la forma en que se dan los servicios, las llamadas grupales o meetings de trabajo son mas necesarias que nunca para organizar roles, asignar tareas, reorganizar hitos, comunicar avances, y en algo un poco menos laboral como felicitar a alguien por su cumpleaños, o simplemente sentir que alguien te acompaña, y puedes ser consciente de que las herramientas más utilizadas en el momento son Zoom o Jitsi, son buenos, es un hecho, sin embargo ha entrado un nuevo jugador, Zipcall.io, y en este post vamos a probarlo..

Zipcall.io

Se describe como "una alternativa descentralizada de video chat", y esto es, porque no está controlado en un solo servidor particular de alguna entidad, además menciona que ésta plataforma ofrece una calidad de video y latencia inigualable, bueno, en pocas palabras y tomando en cuenta como se describe nos llena de grandes expectativas, y por si fuera poco las características no se quedan atrás...

Características

• Compartir pantalla
• Imagen en imagen
• Subtítulos en vivo
• Chat
• Escalado automático de calidad de video
• No requiere descarga
• Conexión punto a punto (peer to peer)
• Salas de chat desechables

Con eso ya fácil dejamos de lado a zoom y jit.si y nos vamos con esta aplicación, ey ey alto... miremos que más hay... Zipcall utiliza los navegadores para ejecutarse a través de la tecnología WebRTC, todo bien hasta aquí, pero...¿qué es lo implica que no este centralizada?

Al no estar alojada en un servidor central, es necesario abrir nodos, así que de todas formas es necesario que alguien ejecute la semilla de la sala de chat.

Probando Zipcall

Lo que haremos será crear una instancia de la aplicación para tener una sala privada de chat que nos sirva para realizar conferencias super secretas.

Consideraciones

• Debes tener instalado NodeJS, en la mínima versión de 10x, sino acá esta el enlace.
• Git instalado

Proyecto y dependencias

Lo primero que haremos será clonar el proyecto en un directorio, el de tu preferencia, allí abres la terminal y ejecutas lo siguiente:

git clone git@github.com:ianramzy/decentralized-video-chat.git

Ahora ubícate en la carpeta:

Y pasamos a ejecutar las dependencias con npm o tu gestor de paquetes preferido, yo personalmente uso yarn:

// según lo que uses
// con npm
npm install

// con yarn
yarn install

Si le das un vistazo a la carpeta del proyecto tiene el siguiente aspecto:

Nota que hay un archivo llamado .env.template, es un archivo donde van ciertas variables de entorno para agregar credenciales o ciertas configuraciones, ese archivo es un template, miremos que hay dentro:

Existen dos variables de entorno

• TWILIO_ACCOUND_SID
• LOCAL_AUTH_TOKEN

Esas dos credenciales las debemos obtener de una cuenta en Twilio.

Obteniendo credenciales de Twilio

Ok, el objetivo es sencillo, para eso primero debemos crearnos una cuenta en la web principal, siéntete libre de pasar al siguiente punto si ya tienes las credenciales, si no, continuemos.

Llenas esa información y luego te enviaran un link a tu correo para verificar la cuenta.

Luego de eso ya empieza lo bueno, para algunos el proceso de crear una aplicación se inicia al terminar la verificación, de igual forma vamos a repasar el proceso rápidamente, dale click a "Create New Project".

En el proceso te pregunta si vas a utilizar la aplicación para trabajo o para un proyecto universitario, escoge la opción que te evite gastar dinero haciendo pruebas, además pregunta si eres estudiante o trabajador, responde según tu caso, al final, simplemente debes verificar tu número celular, lo ingresas y te van a enviar un código, ese debes ingresarlo en una pantalla similar a la siguiente:

Luego de ese paso, finalmente estaremos en el dashboard con las credenciales asignadas:

Esas credenciales son las mismas que ingresaremos en las variables de entorno de la aplicación.

Ahora dale click al icono de copiar con eso basta para almacenarlo en el portapapeles.

Levantando la aplicación

Ahora que ya tenemos en nuestro poder esas credenciales vamos a ingresarlas en la aplicación, ¿recuerdas el archivo .env.template? Vamos a trabajar sobre ese archivo, bueno en realidad realizaremos una copia con el siguiente comando:

cp .env.template .env

Le damos un vistazo como queda nuestro directorio

Abrimos el archivo .env y seteamos las credenciales en las variables de entorno respectivas, de la siguiente manera:

Recuerda que éstas credenciales son solo para el ejemplo, utiliza las que acabas de generar para la instancia de tu aplicación.

Ahora si, ejecutamos la instancia con lo que tengas a la mano

// usando npm
npm start

// usando yarn
yarn run start

// ejecutando directamente el archivo
node server.js

Ahora toca acceder desde el navegador a la dirección localhost:3000 y la interfaz que verás similar a la siguiente:

Para comenzar a probar la aplicación primero debemos crear una sala para las videollamadas, dale click a TRY NOW, y ahora aparece la siguiente vista.

Agregamos el nombre de la sala y le das un super click a GO TO MY CALL, y whoala!

Ahora ya estamos listos para iniciar la sesión privada de hoy, con los líderes más grandes de la industria....pasemos al siguiente apartado.

Unirse a la llamada

Después de iniciar la sala lo que queremos es compartir en enlace que acabamos de generar(http://localhost:3000/join/eldevsinsiteroom) a Mark Zuckerberg, Elon Musk y un tal Bill Gates...sin embargo, ahora tenemos el siguiente problema, ¿cómo lo hacemos que alguien se una a nuestra llamada si nuestra instancia sólo está en el entorno local?

Aquí es donde entra ngrok, una herramienta que nos permite compartir nuestro entorno local a través de una url generada dinámicamente, aprovecharemos esa característica para publicar la sala de videoconferencia y acceder como un nuevo participante a través de otro dispositivo.

Para este paso considero que ya te has creado una cuenta en ngrok y estás dentro del dashboard, el panel que debes visualizar debe ser similar al siguiente:

En mi caso lo descargué para Mac OS, pero si tu usas Windows, Linux o FreeBSD no te preocupes que también hay versiones disponible para esas plataformas.

Tres pasos importantes rápidamente:

1. Descargar la versión según tu plataforma.
2. Descomprimir el zip.
3. Autentícate a tu cuenta.

La autenticación es sencilla, ingresa el comando tal cual como está en la imagen y en el directorio donde descomprimiste ngrok.

./ngrok authtoken tutokenaqui

En este punto ya podemos compartir nuestro localhost, recordemos que el puerto en el que se ejecutaba la aplicación es el 3000, por tanto le indicamos a ngrok que exponga hacia internet ese puerto:

./ngrok http 3000

Eso automáticamente abrirá una sesión en ngrok, con los detalles de la url generada...

Nota que se han generado tres enlaces.

• El primero quiero que sepas que es el dashboard de ngrok, no ahondaremos mas en este punto, simplemente porque no es el objetivo del post, sigamos.
• El segundo enlace es la url generada y hace una redirección al puerto 3000, usando HTTP.
• El tercer en lace hace lo mismo que el anterior, sin embargo la diferencia es que este último utiliza HTTPS, es decir una conexión segura. Este es el que hay que compartir.

Bien entonces usaremos ese enlace y accederemos a través de otro dispositivo, ojo no olvides agregar la parte del nombre de la sala que previamente creamos, debería quedar la url a compartir de la siguiente forma:

https://2aafa5c9.ngrok.io/join/eldevsinsiteroom

Como no tenia a quien me pueda apoyar con la transmisión en el momento de las pruebas, decidí apoyarme de mi teléfono móvil, y este fue el resultado:

La pantalla pequeña es la transmisión de la cámara de la laptop, y la pantalla más grande corresponde a la transmisión que proviene del móvil.

El chat está disponible en una esquina de la ventana, sin embargo sólo se puede enviar mensajes cuando alguien esta conectado.

Limitaciones implícitas

Mientras hacia las pruebas intenté agregar a otro dispositivo al meeting con el mismo enlace, sin embargo, la aplicación simplemente ignora al siguiente usuario...interesante...

No quise quedarme allí y navegando entre el código del proyecto nos encontramos esto...

...
socket.on("join", function (room) {
    logIt("A client joined the room", room);
    var clients = io.sockets.adapter.rooms[room];
    var numClients = typeof clients !== "undefined" ? clients.length : 0;
    if (numClients === 0) {
      socket.join(room);
    } else if (numClients === 1) {
      socket.join(room);
      // When the client is second to join the room, both clients are ready.
      logIt("Broadcasting ready message", room);
      // First to join call initiates call
      socket.broadcast.to(room).emit("willInitiateCall", room);
      socket.emit("ready", room).to(room);
      socket.broadcast.to(room).emit("ready", room);
    } else {
      logIt("room already full", room);
      socket.emit("full", room);
    }
});
...

Vamos a explicarlo de manera sencilla, lo que sucede es que cada vez que alguien solicita unirse a una sala de videochat, la aplicación verifica cuantos usuarios hay conectados a la sala, haciendo lo siguiente:

• Si no hay usuarios agrega a uno a la sala pero no inicia la llamada.
• Si hay solo un usuario, lo agrega y empieza la llamada.
• Caso contrario, la sala se considera llena y no ingresa nadie más.

Conclusiones

Zipcall como video chat como funciona bien, cuando hablamos de una conexión uno a uno, es una nueva alternativa, es decir "el nuevo chico del barrio" y puede servir para una reunión rápida entre dos personas, sin embargo considero que aún esta un poco verde y tiene que resolver algunos problemas que ofrece en su core:

• Compartir pantalla no funciona.
• Los subtítulos fallan en considerable medida, al parecer aún esta es estado experimental.

Al menos la primera es super importante si hablamos en el ámbito del desarrollo de software, de todas formas valió la pena experimentar y comprobar lo que tiene y lo que le falta aún mejorar.

Coméntanos si también lo probaste, si le ves futuro o si ya lo estas usando de forma profesional, quizás para llamadas con tus clientes... no olvides seguirnos para notificarte cuando salga nuestro siguiente post, ¡nos vemos en una próxima entrega!

By GIPHY