Crear una aplicación web de videoconferencia en Python con Flask y Vonage

En este tutorial, crearás una aplicación de videoconferencia basada en navegador con Flask y la API de Video de Vonage.

Introducción

Tras la pandemia mundial de 2020, la videoconferencia se convirtió rápidamente en una de las principales formas de comunicación en todo el mundo. Ya sea para reunirse con compañeros de trabajo en otro país o para ponerse al día con amigos en otra ciudad, las videoconferencias a través de navegadores forman ya parte de la vida cotidiana.

A medida que la tecnología ha ido madurando, las expectativas de los usuarios han crecido. Lo que antes era complejo ahora es ágil y sofisticado, y se espera que las soluciones modernas de videoconferencia ofrezcan experiencias de alta calidad, fiables y en tiempo real.

En este tutorial, aprenderá a crear una aplicación de videoconferencia mínima utilizando Python, JavaScript y la API de Video de Vonage. Esta guía práctica te guiará en la creación de una sencilla aplicación de video WebRTC y te presentará los conceptos básicos de las videoconferencias en Python.

Antes de pasar a la creación de la aplicación, trataremos algunos de los términos y tecnologías utilizados en la aplicación de ejemplo. Si ya estás familiarizado con estos conceptos, puedes pasar al tutorial tutorial sobre cómo crear una aplicación web de videoconferencia con Vonage y Pythono puedes clonar la aplicación de ejemplo desde GitHub y seguir las instrucciones de la sección LÉEME para ponerla en marcha rápidamente.

Un breve resumen: Flask y Tunneling

Para completar este tutorial, nos basaremos en conceptos técnicos y herramientas ajenos a Vonage que pueden ser útiles en otras áreas del desarrollo de software.

¿Qué es una aplicación Python Flask?

Para este tutorial, crearemos una aplicación web utilizando Flaskun framework web ligero pero potente para Python. Como marco de trabajo, permite a los desarrolladores crear rápidamente una aplicación de software utilizando tecnologías web para ejecutarse en un navegador web. Lo hemos elegido para este tutorial por su facilidad de uso y su enfoque minimalista. A diferencia de otros marcos de desarrollo web de Python, nos da sólo lo esencial que necesitamos para crear una sencilla solución de videoconferencia.

¿Qué es la tunelización?

En este tutorial, crearemos una aplicación web y la ejecutaremos localmente en su máquina. Debido a que se ejecuta localmente, no es accesible desde la Internet pública, y si su aplicación web no se puede acceder, entonces usted no puede agregar participantes a su videoconferencia. Ahí es donde entra en juego el tunneling. La tunelización expone los servidores locales a la Internet pública a través de URL públicas temporales o estáticas. ngrok es una plataforma de software que ofrece este servicio.

Conceptos básicos de la Video API de Vonage

Los usuarios esperan que las videollamadas de alta calidad funcionen sin interrupciones. Pero entre bastidores, ofrecer ese tipo de experiencia no es tan sencillo.

El Video en tiempo real es inherentemente impredecible. Los participantes se conectan desde diferentes dispositivos, en diferentes redes y en diferentes partes del mundo. Además, las condiciones pueden cambiar en medio de la llamada: un dispositivo móvil puede cambiar de Wi-Fi a móvil, un cortafuegos corporativo puede bloquear ciertas rutas UDP o un portátil de gama baja puede tener problemas con la carga de la CPU.

La plataforma Video API de Vonage permite integrar video interactivo de alta calidad en tiempo real, mensajería, pantalla compartida y más en aplicaciones web y móviles. Para lograrlo, la Video API utiliza WebRTC para las comunicaciones de audio y video. Cuando se trata de trabajar con la Video API, estos son los términos y conceptos clave que hay que entender:

• Sesión: Una sesión es un grupo lógico de conexiones y flujos. Las conexiones de una misma sesión pueden intercambiar mensajes. Piense en una sesión como la "sala virtual" donde los participantes pueden interactuar entre sí.

• Conexión: Un punto final que participa en una sesión y es capaz de enviar y recibir mensajes. Una conexión está conectada y puede recibir mensajes, o está desconectada y no puede recibir mensajes.

• Corriente: Un flujo de medios circula entre dos conexiones. Se refiere a los bytes reales que contienen los medios que se intercambian. Los medios pueden consistir sólo en audio, o en audio y Video. También puede crear flujos personalizados y de pantalla compartida.

• Ficha: La plataforma Video API utiliza tokens para la autorización, por lo que no tiene que preocuparse de crear usuarios en la plataforma. En este tutorial, utilizamos tokens para crear participantes en sesiones de Video sobre la marcha.

• Editorial: Se refiere al cliente que publica un flujo multimedia.

• Abonado: Se refiere a los clientes que reciben flujos de medios.

• Señalización: Se refiere al envío de texto y datos entre clientes conectados a una sesión en forma de mensajes. Estos mensajes permiten a los desarrolladores construir un chat de texto básico, enviar instrucciones de un cliente a otro y crear otras experiencias valiosas.

Para profundizar en estos términos y conceptos clave, consulte el Glosario de la Video API o consulte la documentación de la Video API o vea el siguiente Video.

Ahora que ya conoces los conceptos básicos, vamos a aplicarlos creando una aplicación de videoconferencia que funcione.

Tutorial: Crear una aplicación web de videoconferencia

En este tutorial, nos centramos en los componentes básicos de una aplicación de videoconferencia, incluyendo la creación de una sesión de vídeo, la adición de conexiones, y el uso de la señalización para el chat en tiempo real. Vamos a utilizar Python y Flask para el backend y JavaScript para crear y coordinar la sesión de vídeo.

Requisitos previos

Para completar este tutorial, necesitarás lo siguiente:

• Python 3.8+

• A Cuenta API de Vonage

• En Account e instalación de ngrok

• Un amigo para participar en una videoconferencia con usted

Configuración del tutorial

Antes de empezar a construir, pongamos todo en orden.

1. Crear una aplicación de Vonage Video

Ahora necesita crear una aplicación Video API. En este contexto concreto, una aplicación es un contenedor de la información de configuración y seguridad que necesitas para la Video API. Cuando cree su aplicación, active la opción de Video en la sección Capacidades .

2. Poner en marcha un túnel ngrok

La Video API debe ser capaz de acceder a su webhook para que pueda hacerle peticiones. Así que la URL del punto final debe estar expuesta a la Internet pública. Para esto está ngrok.

En una ventana de terminal separada, ejecute:

ngrok http 5000

Este comando generará las URL públicas a las que su servidor local hará túnel en el puerto 5000. Tome nota de la URL pública - debe ser algo como esto:

Forwarding                	https://0a6ec0a950eb.ngrok-free.app -> http://localhost:5000 

Tenga en cuenta que, a menos que utilice uno de los planes de pago de ngrok, las URL públicas generadas no son persistentes. En otras palabras, cada vez que ejecute el comando ngrok las URLs resultantes cambiarán. Para evitar esto, deje ngrok en ejecución durante la duración de este tutorial.

¡Empecemos a construir!

Ahora que lo tienes todo preparado, es hora de empezar a construir.

He aquí un resumen de los pasos que daremos para completar este tutorial:

1. Crear y activar un entorno virtual Python

2. Instalar dependencias

3. Establecer un cliente de Vonage y definir las rutas para nuestra aplicación web en el backend.

4. Crear una sesión, añadirle conexiones y definir cómo manejar las señales de chat en el frontend.

5. Ejecuta el código y pruébalo

El código para este tutorial se puede encontrar en GitHub en la Comunidad de Vonage junto con un LÉAME para ponerlo en marcha.

1. Crear un directorio de proyecto

Cree un directorio de proyecto y cambie los directorios en él:

mkdir sample-video-conference && cd sample-video-conference

2. Crear y activar un entorno virtual Python

Python entornos virtuales te permiten instalar paquetes en una ubicación aislada del resto de tu sistema. Esto ayuda a evitar el desorden en todo el sistema y los conflictos con diferentes versiones y paquetes de Python. Aprende más sobre entornos virtuales en este entrada de blog.

En el directorio de tu proyecto, ejecuta los siguientes comandos para crear un entorno virtual y activarlo:

virtualenv venv && source venv/bin/activate

3. Instalar las dependencias del proyecto

Para instalar las dependencias que necesitamos para este tutorial, ejecute lo siguiente:

pip install Flask python-dotenv vonage

5. Obtenga y configure sus variables de entorno

Variables de entorno (a menudo llamadas "env vars") son variables que almacenas fuera de tu programa y que pueden afectar a su ejecución. Por ejemplo, puedes establecer variables de entorno que contengan la clave y el secreto de una API. Tu programa podría utilizar esas variables cuando se conecte a la API. Más información sobre variables de entorno en

Para instanciar un cliente de Vonage, necesitarás el ID de la aplicación de Vonage que creaste y tu clave privada de Vonage.

Puede encontrar el ID de la aplicación en el panel del desarrollador, en la configuración de la aplicación Video que creó para este tutorial.

Aquí también se genera y descarga la clave privada. En el panel del desarrollador Applications menúhaga clic en la aplicación que ha creado para este tutorial y, a continuación, haga clic en Editar. Una vez que se abra la ventana de edición, haz clic en el botón que dice "Generar clave pública y privada". Esto activará la descarga de su clave privada como un archivo con la extensión .key. Una vez descargado el archivo, muévelo a la raíz del directorio de tu proyecto.

Mantén este archivo privado y no lo compartas en ningún sitio donde pueda estar en peligro. Si planea hacer público este código en algún lugar, asegúrese de añadir su archivo de clave privada a su archivo .gitignore archivo.

En el directorio raíz, cree un archivo llamado .env y añada las siguientes variables:

VONAGE_APPLICATION_ID=your-application-id
VONAGE_PRIVATE_KEY_PATH=path-to-your-private-key-file

6. Construya su backend

El backend de esta aplicación es responsable de instanciar un cliente de Vonage, definir las rutas de la aplicación web, iniciar una sesión de vídeo y generar tokens para los participantes en la videoconferencia.

Crea un archivo llamado appy.py y añada el código código de GitHub.

Aunque no es recomendable desplegar este código en producción, permite una rápida experiencia práctica de la Video API en acción. La forma en que lo hace es mediante la puesta en marcha de una aplicación web mínima con dos rutas:

1. La ruta / le dirige a una página web que le invita a unirse a una sesión de vídeo. Para publicar un flujo de vídeo, debe seleccionar la opción "Unirse como administrador"; para suscribirse al flujo, deje esta opción sin marcar.

2. Tras pulsar el botón "Unirse a la sesión", la ruta /api/generate-session ruta genera un token para cada participante, y en función de si el participante es un admin o no, publica o se suscribe a un flujo.

El siguiente código es donde se inicia la sesión de Video utilizando el cliente de Vonage:

session_options = SessionOptions(media_mode=MediaMode.ROUTED)
video_session = vonage_client.video.create_session(options=session_options)
session_id = video_session.session_id

Cada sesión se identifica con un ID específico. Este ID se utiliza para crear conexiones y flujos entre los participantes. Las sesiones tienen diferentes opciones disponibles, y para esta sesión en particular, estamos utilizando la opción enrutado enrutado. Para esta sesión en particular, estamos utilizando el modo enrutado que es mejor para más participantes y también permite archivar. Para obtener más información sobre las sesiones y las opciones de sesión, consulte la documentación documentación.

Este código es donde se crea el token para cada participante:

token_options = TokenOptions(session_id=session_id)
token = vonage_client.video.generate_client_token(token_options).decode("utf-8")

Para autenticar a un usuario que se conecta a una sesión, el código debe pasar un token junto con el ID de la aplicación. Se genera un token para cada usuario que intenta conectarse a una sesión. Al generar un token, debe incluir un ID de sesión. Para más información sobre tokens y opciones de token, consulte la documentación.

En session_id, tokeny application_id se pasan junto con otros datos al frontend en el siguiente código para crear el vídeo incrustado en el frontend:

    return jsonify(
        {
            "session_id": session_id,
            "token": token,
            "is_admin": admin,
            "name": name,
            "application_id": application_id,
            "success": True,
        }
    )

7. Construye tu frontend

La Video API facilita la integración de vídeo interactivo de alta calidad, voz, mensajería y pantalla compartida en aplicaciones web y móviles.

El JavaScript

En el directorio raíz, cree otro directorio llamado static. En el directorio static cree un archivo llamado app.js y añade el código de este archivo en GitHub.

Veamos cómo se crea y maneja una sesión con Vonage:

1. Utilizando las application_id y session_id se crea un objeto de sesión con:

session = OT.initSession(applicationId, sessionId);

2. A continuación, se conecta un cliente a la sesión; si el cliente es un administrador, se publica el flujo multimedia:

    session.connect(token, (error) => {
        if (error) {
            console.error('Error connecting:', error);
            return;
        }
        if (isAdmin === "true") {
            const publisher = OT.initPublisher('publisher', { name: name });
            session.publish(publisher);
        }
    });

3. Cuando se publica el flujo de medios, el objeto de sesión envía un evento streamCreated y suscribe nuevas conexiones a él:

session.on('streamCreated', (event) => {
    session.subscribe(event.stream, 'subscriber');
});

4. Mientras tanto, el siguiente código crea y escucha eventos de señal para implementar un chat entre clientes:

session.on('signal', (event) => {
    const messages = document.getElementById('messages');
    messages.innerHTML += `<p>${event.data}</p>`;
});

El HTML

Para las rutas que hemos creado en el backend en app.pynecesitamos una plantilla para el frontend. Para esto está el archivo index.html . Como este código no utiliza nada específico de la Video API, no lo discutiremos aquí. Puedes copiar el directorio templates y su contenido desde el repositorio en GitHub.

8. ¡Ahora pruébalo!

Pon en marcha tu aplicación con el siguiente comando en tu directorio raíz:

python app.py

En su navegador, vaya a la URL pública generada por ngrok. Debería ver una página web invitándole a "Unirse a la sesión de Video" con un campo de texto para su nombre. Si desea publicar un flujo de Video, asegúrese de marcar la casilla para Unirse como administrador y haga clic en Unirse a la sesión.

Deberías ser redirigido a una página que muestre el feed de Video de tu dispositivo. Nota: Es posible que primero tengas que dar permiso a tu cámara y micrófono.

Una vez establecido este feed de Video, envía la misma URL ngrok a un amigo y haz que se una sin seleccionar la opción de Unirse como Admin. Esto le añadirá a la sesión como suscriptor, por lo que sólo podrá ver el vídeo de la cámara del administrador.

La función de chat funciona para todos los participantes. Al introducir texto en el campo y hacer clic en Enviarel texto será visible para todos los participantes.

En resumen

En este tutorial, aprendiste a construir una aplicación mínima de videoconferencia basada en navegador usando Python, JavaScript y la API de Video de Vonage. A lo largo del camino, cubrimos conceptos clave de apoyo como Flask para andamiar rápidamente un backend y ngrok para exponer su entorno local a Internet. También hemos explorado los componentes básicos de la Video API (sesiones, tokens, conexiones y secuencias) y hemos visto cómo funcionan juntos para permitir la comunicación en tiempo real. Combinando un sencillo backend Flask con un frontend basado en JavaScript, has creado una aplicación que soporta vídeo en directo y funciones básicas de chat. A partir de aquí, puedes ampliar esta base con funciones más avanzadas como controles de moderación, grabación, pantalla compartida o una interfaz de usuario/UX mejorada que se adapte a tu caso de uso. El sitio área de juegos de la Video API de Vonage facilita la prueba de diferentes funciones directamente en tu navegador.

Otras lecturas y recursos

• Mejores prácticas para comenzar con Vonage Video: Recomendamos tener en cuenta las mejores prácticas antes de comenzar a crear tu aplicación de video con múltiples funciones impulsada por la Video API de Vonage.

• Archivado de Video con la API de Video de Vonage y React: Aprende cuatro modos de archivo de video con la API de Video de Vonage, incluido Experience Composer.

• Mejore la experiencia de vídeo de los usuarios con la supervisión de la calidad en tiempo real: MOS es una excelente métrica de calidad de video para videollamadas. Conoce cómo Vonage Video la utiliza para mejorar la experiencia del usuario.

• Primeros pasos con la API de Video de Vonage: Crear una nueva aplicación con la Video API de Vonage sólo lleva unos minutos. Te guiaremos en la creación de una aplicación desde cero usando nuestro Node SDK y el Video Web SDK.