Construire une application Web de Video Conferencing en Python avec Flask et Vonage

Dans ce tutoriel, vous créerez une application de vidéoconférence basée sur un navigateur à l'aide de Flask et de l'API Video de Vonage.

Introduction

Après la pandémie mondiale de 2020 qui a bouleversé notre façon d'interagir, la vidéoconférence est rapidement devenue l'un des principaux moyens de communication dans le monde. Qu'il s'agisse de rencontrer des collègues dans un autre pays ou des amis dans une autre ville, la vidéoconférence par navigateur fait désormais partie de la vie quotidienne.

Au fur et à mesure que la technologie a évolué, les attentes des utilisateurs se sont accrues. Ce qui était autrefois complexe est aujourd'hui rationalisé et sophistiqué, et l'on attend des solutions de vidéoconférence modernes qu'elles offrent des expériences de haute qualité, fiables et en temps réel.

Dans ce tutoriel, vous apprendrez à créer une application de vidéoconférence minimale à l'aide de Python, de JavaScript et de l'API Video API de Vonage. Ce guide pratique permet de créer une simple application Video WebRTC et présente les concepts de base de la vidéoconférence en Python.

Avant de nous lancer dans la construction de l'application, nous allons aborder certains termes et technologies utilisés dans l'exemple d'application. Si vous êtes déjà familiarisé avec ces concepts, vous pouvez passer directement au tutoriel sur la création d'une application web de vidéoconférence avec Vonage et Python. tutoriel sur la création d'une application web de vidéoconférence avec Video et Pythonou vous pouvez cloner l'application d'exemple sur GitHub et suivre les instructions du README pour la rendre rapidement opérationnelle.

Un bref aperçu : Flask et le tunneling

Pour mener à bien ce tutoriel, nous nous appuierons sur des concepts techniques et des outils extérieurs à Vonage qui peuvent être utiles dans d'autres domaines du développement logiciel.

Qu'est-ce qu'une application Python Flask ?

Pour ce tutoriel, nous allons créer une application web en utilisant Flaskun framework web léger mais puissant pour Python. En tant que cadre, il permet aux développeurs de créer rapidement une application logicielle à l'aide de technologies web pour l'exécuter dans un navigateur web. Nous l'avons choisi pour ce tutoriel en raison de sa facilité d'utilisation et de son approche minimaliste. Contrairement à d'autres frameworks de développement web Python, il nous fournit juste l'essentiel dont nous avons besoin pour créer une solution de visioconférence simple.

Qu'est-ce qu'un tunnel ?

Dans ce tutoriel, nous allons créer une application web et l'exécuter localement sur votre machine. Comme elle s'exécute localement, elle n'est pas accessible depuis l'internet public, et si votre application web n'est pas accessible, vous ne pouvez pas ajouter de participants à votre vidéoconférence. C'est là qu'intervient le tunneling. Le tunneling expose les serveurs locaux à l'internet public par le biais d'URL publiques temporaires ou statiques. ngrok est une plateforme logicielle qui fournit ce service.

Les bases de l'API Video de Vonage

Les utilisateurs s'attendent à ce que les appels vidéo de haute qualité fonctionnent sans interruption. Mais en coulisses, offrir ce type d'expérience n'est pas si simple.

La vidéo en temps réel est par nature imprévisible. Les participants se connectent à partir de différents appareils, sur différents réseaux et dans différentes parties du monde. De plus, les conditions peuvent changer en cours d'appel : un appareil mobile peut passer du Wi-Fi au cellulaire, un pare-feu d'entreprise peut bloquer certains chemins UDP, ou un ordinateur portable bas de gamme peut avoir du mal à supporter la charge de l'unité centrale.

La plateforme In-App Video de Vonage permet d'intégrer des vidéos interactives en temps réel et de haute qualité, des messageries, des partages d'écran, et bien plus encore, dans des applications web et mobiles. Pour ce faire, Video API utilise WebRTC pour les communications audio-vidéo. Lorsqu'il s'agit de travailler avec l'API Video, voici les principaux termes et concepts à comprendre :

• Session: Une session est un groupe logique de connexions et de flux. Les connexions au sein d'une même session peuvent échanger des messages. Une session est une "salle virtuelle" dans laquelle les participants peuvent interagir les uns avec les autres.

• Connexion: Un point d'extrémité qui participe à une session et qui est capable d'envoyer et de recevoir des messages. Une connexion est soit connectée et peut recevoir des messages, soit déconnectée et ne peut pas recevoir de messages.

• Flux: Un flux de médias circule entre deux connexions. Il s'agit des octets contenant le média qui sont échangés. Les médias peuvent être uniquement de l'audio, ou de l'audio et de la vidéo. Vous pouvez également créer des partages d'écran et des flux personnalisés.

• Jeton: La plateforme Video API utilise des jetons pour l'autorisation, de sorte que vous n'avez pas à vous soucier de la création d'utilisateurs sur la plateforme. Dans ce tutoriel, nous utilisons des jetons pour créer des participants à une session vidéo à la volée.

• Éditeur: Il s'agit du client qui publie un flux de médias.

• Abonné: Il s'agit des clients qui reçoivent des flux de médias.

• Signalisation: Il s'agit de l'envoi de texte et de données sous forme de messages entre les clients connectés à une session. Ces messages permettent aux développeurs de créer un chat textuel de base, d'envoyer des instructions d'un client à l'autre et de créer d'autres expériences intéressantes.

Pour approfondir ces termes et concepts clés, consultez le Glossaire de Video API ou consultez la documentation Video API ou regardez la vidéo ci-dessous.

Maintenant que vous avez compris les concepts de base, mettons-les en pratique en créant une application de vidéoconférence fonctionnelle.

Tutoriel : Créer une application Web de Video Conferencing

Dans ce tutoriel, nous nous concentrons sur les éléments de base d'une appli de vidéoconférence, notamment la création d'une session Video, l'ajout de connexions et l'utilisation de la signalisation pour le chat en temps réel. Nous allons utiliser Python et Flask pour le backend et JavaScript pour créer et coordonner la session vidéo.

Conditions préalables

Pour réaliser ce tutoriel, vous aurez besoin des éléments suivants :

• Python 3.8+

• A Compte API Vonage

• Un Account et installation de ngrok

• Un ami pour participer à une vidéoconférence avec vous

Mise en place du tutoriel

Avant de commencer à construire, mettons tout en ordre.

1. Créer une application Vonage Video

Vous devez maintenant créer une application Video API. Dans ce contexte particulier, une application est un conteneur pour les informations de configuration et de sécurité dont vous avez besoin pour l'API Video. Lors de la création de votre application, activez l'option Video dans la section Capacités dans la section Capacités.

2. Créer un tunnel ngrok

L'API Video doit pouvoir accéder à votre webhook afin de pouvoir lui adresser des requêtes. L'URL du point de terminaison doit donc être exposée à l'internet public. C'est à cela que sert ngrok.

Dans une fenêtre de terminal séparée, exécutez :

ngrok http 5000

Cette commande générera les URLs publiques vers lesquelles votre serveur local se connectera sur le port 5000. Prenez note de l'URL publique - elle devrait ressembler à ceci :

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

Veuillez noter qu'à moins que vous n'utilisiez l'un des plans payants de ngrok, les URL publiques générées ne sont pas persistantes. En d'autres termes, chaque fois que vous exécutez la commande ngrok les URLs résultantes changeront. Pour éviter cela, laissez ngrok en marche pendant toute la durée de ce tutoriel.

Commençons à construire !

Maintenant que tout est prêt, il est temps de commencer à construire.

Voici un aperçu des étapes que nous suivrons pour réaliser ce tutoriel :

1. Créer et activer un environnement virtuel Python

2. Installer les dépendances

3. Établir un client Vonage et définir les routes pour notre application web dans le backend.

4. Créer une session, y ajouter des connexions et définir comment gérer les signaux de chat dans le frontend.

5. Exécutez le code et essayez-le

Le code de ce tutoriel se trouve sur GitHub dans la section Communauté Vonage ainsi qu'un README pour le mettre en place et le faire fonctionner.

1. Créer un répertoire de projet

Créez un répertoire de projet et modifiez les répertoires qui s'y trouvent :

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

2. Créer et activer un environnement virtuel Python

Python environnements virtuels vous permettent d'installer des paquets dans un endroit isolé du reste de votre système. Cela permet d'éviter l'encombrement du système et les conflits avec les différentes versions de Python et les différents paquets. Pour en savoir plus sur les environnements virtuels, consultez ce article de blog.

Dans le répertoire de votre projet, exécutez les commandes suivantes pour créer un environnement virtuel et l'activer :

virtualenv venv && source venv/bin/activate

3. Installer les dépendances du projet

Afin d'installer les dépendances dont nous avons besoin pour ce tutoriel, exécutez ce qui suit :

pip install Flask python-dotenv vonage

5. Obtenez et configurez vos variables d'environnement

Les variables d'environnement (souvent appelées "env vars") sont des variables que vous stockez en dehors de votre programme et qui peuvent affecter son fonctionnement. Par exemple, vous pouvez définir des variables d'environnement contenant la clé et le secret d'une API. Votre programme peut alors utiliser ces variables lorsqu'il se connecte à l'API. Pour en savoir plus sur les variables d'environnement, voir

Afin d'instancier un client Vonage, vous aurez besoin de l'ID de l'application Vonage que vous avez créée et de votre clé privée Vonage.

Vous trouverez l'identifiant de l'application dans le tableau de bord du développeur, dans les paramètres de l'application Video que vous avez créée pour ce tutoriel.

C'est également là que vous générez et téléchargez votre clé privée. Dans le tableau de bord du développeur Applications menucliquez sur l'application que vous avez créée pour ce tutoriel, puis cliquez sur Modifier. Une fois la fenêtre d'édition ouverte, cliquez sur le bouton "Générer les clés publique et privée". Cela déclenchera le téléchargement de votre clé privée sous la forme d'un fichier portant l'extension .key. Une fois le fichier téléchargé, déplacez-le à la racine du répertoire de votre projet.

Gardez ce fichier privé et ne le partagez pas dans un endroit où il pourrait être compromis. Si vous avez l'intention de rendre ce code public, assurez-vous d'ajouter votre fichier de clé privée à votre fichier .gitignore fichier.

Dans le répertoire racine, créez un fichier appelé .env et ajoutez les variables suivantes :

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

6. Construire votre backend

Le backend de cette application est responsable de l'instanciation d'un client Video, de la définition des itinéraires de l'In-App Video, de l'ouverture d'une session vidéo et de la génération de jetons pour les participants à la vidéoconférence.

Créez un fichier appelé appy.py et ajoutez le code de GitHub.

Bien que vous ne souhaitiez pas déployer ce code en production, il permet une expérience pratique rapide de l'API Video en action. Pour ce faire, il suffit de lancer une application web minimale avec deux routes :

1. L'itinéraire / vous dirige vers une page web vous invitant à participer à une session Video. Pour publier un flux vidéo, vous devez sélectionner l'option "Rejoindre en tant qu'administrateur" ; pour vous abonner au flux, ne cochez pas cette option.

2. Après avoir cliqué sur le bouton "Rejoindre la session", l'itinéraire /api/generate-session génère un jeton pour chaque participant et, selon qu'il s'agit ou non d'un participant à une session, publie ou s'abonne à un flux. admin ou non, il publie ou s'abonne à un flux.

C'est dans le code suivant que la session vidéo est lancée à l'aide du client Vonage :

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

Chaque session est identifiée par un identifiant spécifique. Cet identifiant est utilisé pour créer des connexions et des flux entre les participants. Les sessions disposent de différentes options, et pour cette session particulière, nous utilisons l'option routé mode média. Pour cette session particulière, nous utilisons le mode média routé. routé qui convient mieux à un plus grand nombre de participants et qui permet également l'archivage. Pour en savoir plus sur les sessions et les options de session, consultez la documentation.

C'est dans ce code que le jeton est créé pour chaque participant :

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

Pour authentifier un utilisateur qui se connecte à une session, le code doit transmettre un jeton en même temps que l'identifiant de l'application. Vous générez un jeton pour chaque utilisateur qui tente de se connecter à une session. Lors de la génération d'un jeton, vous devez inclure un identifiant de session. Pour plus d'informations sur les jetons et leurs options, consultez la documentation.

Les session_id, token, et application_id sont transmis avec d'autres données au frontal dans le code suivant pour créer la vidéo intégrée dans le frontal :

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

7. Construisez votre frontend

L'API Video facilite l'intégration de vidéos interactives de haute qualité, de la voix, de la messagerie et du partage d'écran dans les applications web et mobiles.

Le JavaScript

Dans le répertoire racine, créez un autre répertoire appelé static. Dans le répertoire static créez un fichier appelé app.js et ajoutez le code de ce fichier dans GitHub.

Voyons comment une session est créée et gérée par Vonage :

1. En utilisant les application_id et session_id un objet session est créé avec :

session = OT.initSession(applicationId, sessionId);

2. Un client est ensuite connecté à la session ; si le client est un administrateur, le flux multimédia est publié :

    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. Lorsque le flux de médias est publié, l'objet de session envoie un événement streamCreated et s'abonne à de nouvelles connexions :

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

4. Pendant ce temps, le code suivant crée et écoute les événements de signal pour mettre en œuvre un chat entre les clients :

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

Le HTML

Pour les routes que nous avons créées dans le backend en app.pynous avons besoin d'un modèle à rendre sur le frontend. C'est à cela que sert le fichier index.html sert à cela. Comme ce code n'utilise rien de spécifique à l'API Video, nous n'en parlerons pas ici. Vous pouvez copier le répertoire templates et son contenu depuis le repo sur GitHub.

8. Essayez maintenant !

Lancez votre application en exécutant la commande suivante dans votre répertoire racine :

python app.py

Dans votre navigateur, accédez à l'URL publique générée par ngrok. Vous devriez voir une page web vous invitant à "Participer à une session Video" avec un champ de texte pour votre nom. Si vous souhaitez publier un flux Video, assurez-vous de cocher la case pour Participer en tant qu'administrateur puis cliquez sur Rejoindre la session.

Vous devriez être redirigé vers une page qui affiche le flux vidéo de votre appareil. Remarque: Il se peut que vous deviez d'abord autoriser votre caméra et votre microphone.

Une fois ce flux vidéo établi, envoyez la même URL ngrok à un ami et demandez-lui de vous rejoindre sans en sélectionnant l'option Rejoindre en tant qu'administrateur. Il sera ainsi ajouté à la session en tant qu'abonné et ne pourra voir la vidéo qu'à partir de la caméra de l'administrateur.

La fonction de chat fonctionne pour tous les participants. Lorsque vous saisissez du texte dans le champ et que vous cliquez sur Envoyerle texte sera visible par tous les participants.

En résumé

Dans ce tutoriel, vous avez appris à créer une application minimale de vidéoconférence par navigateur à l'aide de Python, de JavaScript et de l'API Video de Vonage. En cours de route, nous avons abordé des concepts clés tels que Flask pour l'échafaudage rapide d'un backend et ngrok pour l'exposition de votre environnement local à l'Internet. Vous avez également exploré les principaux composants de l'API Video - sessions, jetons, connexions et flux - et vu comment ils fonctionnent ensemble pour permettre une communication en temps réel. En combinant un simple backend Flask avec un frontend alimenté par JavaScript, vous avez créé une application fonctionnelle qui prend en charge la vidéo en direct et une fonctionnalité de chat de base. À partir de là, vous pouvez étendre cette base avec des fonctionnalités plus avancées telles que les contrôles de modération, l'enregistrement, le partage d'écran ou l'amélioration de l'UI/UX pour répondre à votre cas d'utilisation. Le terrain de jeu de l'API vidéo de Vonage Terrain de jeu de l'API Video de Vonage vous permet d'essayer facilement les différentes fonctionnalités directement dans votre navigateur.

Autres lectures et ressources

• Meilleures pratiques pour démarrer avec Vonage Video: Les meilleures pratiques que nous recommandons de prendre en considération, avant de commencer à construire votre application vidéo riche en fonctionnalités, alimentée par l'API Video de Vonage.

• Archivage vidéo avec l'API Video de Vonage et React: Découvrez quatre modes d'archivage vidéo avec l'API Video de Vonage, notamment Experience Composer.

• Améliorer l'expérience vidéo des utilisateurs grâce au contrôle de la qualité en temps réel: Le MOS est une mesure de qualité vidéo exceptionnelle pour les appels vidéo. Découvrez comment Vonage Video l'utilise pour améliorer l'expérience de l'utilisateur.

• Démarrer avec l'API Video de Vonage: La création d'une nouvelle application avec l'API Video de Vonage ne prend que quelques minutes. Nous allons créer une application à partir de zéro en utilisant notre SDK Node et le SDK Video Web.