Créer une application Web de Video Conferencing avec Vonage et Flask

Avec la pandémie qui rend le travail à distance plus répandu que jamais, la vidéoconférence est devenue l'un des principaux moyens de communication avec nos amis, notre famille et nos collègues. Ce changement dans la façon dont nous communiquons fait de cette période un excellent moment pour apprendre à créer une application web de vidéoconférence. Ce tutoriel vous montrera comment créer rapidement une application web de vidéoconférence en utilisant Python, FlaskJavaScript, et Video API de Vonage.

Conditions préalables

Pour suivre ce tutoriel, vous devez avoir une connaissance de base de Python et du développement web.

Vous devez également installer Ngrok.

Enfin, vous devrez vous inscrire pour obtenir un Account Video API gratuit de Vonage (anciennement TokBox).

Configuration initiale

Pour commencer, nous devons procéder à quelques réglages initiaux.

Premièrement, créez votre Video API Account.

Une fois que vous avez créé votre Account, vous devez créer un projet.

Cliquez sur "Projets" puis sur "Créer un nouveau projet".

Ensuite, sélectionnez "Créer un projet personnalisé".

Créez maintenant un nouveau projet nommé "mon_projet".

Cliquez ensuite sur "Créer".

Cliquez maintenant sur "Voir le projet".

Veillez à enregistrer la clé et le secret de l'API de votre projet ; vous en aurez besoin ultérieurement.

Ensuite, vous devez cloner le dépôt GitHub contenant le code de ce projet.

git clone https://github.com/calthoff/vonageunlocked.git

cd dans votre dépôt Github et ouvrez le fichier vide .env qui l'accompagne.

cd vonageunlocked
vim .env

Ajoutez la clé et le secret de l'API Video de Vonage (que vous avez sauvegardés plus tôt) au fichier .env comme suit :

OPENTOK_API=your_api_key
OPENTOK_SECRET=your_secret

Créez ensuite un environnement virtuel et activez-le.

pip3 install virtualenv
virtualenv venv
source venv/bin/activate

Ensuite, téléchargez les dépendances du projet :

pip3 install -r requirements.txt

Une fois que vous avez fait cela, démarrez votre serveur de test Flask en exécutant app.py :

python3 app.py

Enfin, lancez ngrok sur le même port que votre serveur de test Flask (vous pouvez lire la documentation de Ngrok pour mieux comprendre le fonctionnement de ngrok) :

ngrok http 5000

Maintenant, rendez-vous à l'URL que Ngrok vous donne pour voir l'application web de Video conferencing en action (l'URL devrait ressembler à ceci : http://d584-172-112-188-34.ngrok.io).

Vous pouvez désormais organiser une vidéoconférence avec vous-même en utilisant votre téléphone et votre ordinateur ou partager le lien avec un ami pour organiser une vidéoconférence avec quelqu'un d'autre.

Allez sur https://your_ngrok_link/admin pour diffuser la Video, puis sur https://your_ngrok_link/join pour la visionner à partir d'un autre navigateur ou appareil (assurez-vous d'abord de vous connecter à la page d'administration).

Vous devriez voir un site web qui ressemble à ceci :

Cette application web vous permet également de chatter !

Comment ça marche

Voyons comment cela fonctionne.

Tout d'abord, il importe les bibliothèques Flask, Decouple et Opentok (l'API Video de Vonage). Flask est un cadre de développement web Python très répandu.

from flask import Flask, render_template, request
from decouple import config
from opentok import Client

Ensuite, il charge la clé et le secret de l'API Video de Vonage à partir des variables d'environnement.

opentok_api = config('OPENTOK_API')
opentok_secret = config('OPENTOK_SECRET')

Il crée ensuite un client Video API de Vonage et lui transmet votre clé API et votre secret, qu'il utilise ensuite pour créer une nouvelle session Video API de Vonage.

client = Client(opentok_api, opentok_secret)
session_id = client.create_session().session_id

Lorsque vous utilisez l'API Video de Vonage, tout se passe dans une session. Vous pouvez publier une vidéo dans une session et consommer une vidéo à partir d'une session. Chaque session a un identifiant unique. Dans ce cas, vous créez une nouvelle session et enregistrez l'ID de la session dans session_id.

Ensuite, ce code crée une application Flask :

app = Flask(__name__, static_url_path='')

Avec Flask, vous pouvez facilement faire correspondre une URL à une fonction comme ceci :

@app.route('/test', methods=['POST', 'GET'])
def index():
    return "Hello, World!"

Si vous ajoutez ce code à app.py et que vous visitez /test sur votre serveur local, vous devriez voir “Hello, World!”

Ce projet fait correspondre trois URL à des modèles HTML à l'aide de la méthode Flask render_template de Flask. Une fonction fait correspondre /admin à admin.htmlet l'autre fait correspondre /join à join.html.

@app.route('/admin')
def admin():
   return render_template('admin.html')


@app.route('/join')
def join():
   return render_template('join.html')

Ces deux modèles HTML vous permettent de vous connecter soit en tant qu'administrateur, soit en tant que simple spectateur. Vous les voyez lorsque vous allez sur /join ou /admin dans l'application web.

Vous trouverez le code HTML complet de chaque modèle dans le dossier templates de votre référentiel.

Voyons comment fonctionne la fonction index dans app.py.

@app.route('/', methods=['POST', 'GET'])
def index():
   if request.method == 'POST':
       token = client.generate_token(session_id)
       admin = False
       if 'admin' in request.form:
           admin = True
       name = request.form['name']
       return render_template('index.html', session_id=session_id, token=token, is_admin=admin, name=name,
                              api_key=opentok_api)
   return 'please log in'

Chaque utilisateur qui rejoint une session Video API de Vonage a besoin d'un jeton unique.

Ainsi, lorsqu'une demande de courrier arrive, le code génère un nouveau jeton à l'aide de l'API Video de Vonage. Ensuite, le code vérifie si l'utilisateur est un administrateur ou non en vérifiant si 'admin' est dans request.form (bien sûr, vous ne voudriez pas faire cela dans une application de production).

if 'admin' in request.form:
    admin = True

Ensuite, ce code récupère le nom de l'utilisateur à partir du fichier request.form.

name = request.form['name']

Enfin, ce code utilise render_template pour rendre index.html et transmet l'identifiant de session que vous avez créé plus tôt, le jeton que vous avez créé plus tôt, si l'utilisateur est un administrateur, et son nom au modèle index.html modèle.

return render_template('index.html', session_id=session_id, token=token, is_admin=admin, name=name,

Le modèle index.html utilise ensuite ces variables pour afficher la vidéo à tous les participants.

Examinons rapidement ce qui se passe sur le front-end.

Tout d'abord, le modèle index.html charge ce script :

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

Si l'utilisateur n'est pas un administrateur, un fichier JavasScript contenant le code suivant de viewer_video.js s'exécute :

const sessionId = document.querySelector('#session_id').dataset.name;
const apiKey = document.querySelector('#api_key').dataset.name;
const token = document.querySelector('#token').dataset.name;

// Initialize session
const session = OT.initSession(apiKey, sessionId)

session.on("streamCreated", function (event) {
  session.subscribe(event.stream);
});

session.connect(token);

Ce code JavaScript récupère l'identifiant de session, la clé API et le jeton du backend.

const sessionId = document.querySelector('#session_id').dataset.name;
const apiKey = document.querySelector('#api_key').dataset.name;
const token = document.querySelector('#token').dataset.name;

Il crée ensuite un objet session (notez qu'il ne crée pas de nouvelle session).

const session = OT.initSession(apiKey, sessionId)

Ensuite, votre code frontal s'abonne à la session.

session.on("streamCreated", function (event) {
  session.subscribe(event.stream);
});

Enfin, vous vous connectez à la session en appelant session.connect et transmettez le jeton que vous avez généré sur le back-end.

session.connect(token);

Si l'utilisateur est un administrateur, le code de admin_video.js s'exécute à la place. Le fonctionnement est similaire à viewer_video.js.

Votre code crée un objet session.

const session = OT.initSession(apiKey, sessionId)

Ensuite, il crée un éditeur afin que l'administrateur puisse diffuser la vidéo aux spectateurs.

const publisher = OT.initPublisher("opentok-publishers", {
 videoSource: c1.captureStream().getVideoTracks()[0],
 width: 320,
 height: 240
})

Une fois que votre code se connecte à la session, il publie l'éditeur.

session.connect(token, () => {
 session.publish(publisher)
})

Enfin, il abonne l'utilisateur au flux, de sorte que l'administrateur puisse voir sa vidéo pendant la diffusion.

session.on('streamCreated', event => {
 session.subscribe(event.stream, "opentok-subscribers")
})

Réflexions finales

Vous savez maintenant comment ajouter rapidement une vidéoconférence à une application Web en utilisant l'API Video de Vonage et Flask. Il y a du code supplémentaire dans le projet sur le front-end que je n'ai pas couvert, qui superpose votre nom sur la vidéo. Vous pouvez en savoir plus sur le fonctionnement de ce code dans cet article.

Faites-nous savoir sur Twitter des projets que vous réalisez à l'aide de l'API Video de Vonage !

N'oubliez pas non plus de rejoindre notre communauté sur Slack.

Merci de votre lecture !