Erstellen einer Webanwendung für Videokonferenzen mit Vonage und Flask

Mit der Pandemie, die die Arbeit an entfernten Standorten immer häufiger macht, sind Videokonferenzen zu einer der wichtigsten Möglichkeiten geworden, mit Freunden, Familie und Kollegen zu kommunizieren. Diese Veränderung in der Art und Weise, wie wir kommunizieren, macht jetzt einen ausgezeichneten Zeitpunkt, um zu lernen, wie man eine Web-App für Videokonferenzen erstellt. Dieses Tutorial zeigt Ihnen, wie Sie schnell eine Videokonferenz-Webanwendung erstellen können, indem Sie Python, Flask, JavaScript und Video API von Vonage.

Voraussetzungen

Um diesem Tutorial folgen zu können, müssen Sie ein grundlegendes Verständnis von Python und Webentwicklung haben.

Sie müssen auch Ngrok installieren.

Schließlich müssen Sie sich für einen kostenlosen Vonage Video API Account (früher TokBox) registrieren.

Erstmalige Einrichtung

Um loszulegen, müssen wir zunächst einige Einstellungen vornehmen.

Erstens, Ihr Video API-Konto erstellen.

Sobald Sie Ihren Account erstellt haben, müssen Sie ein Projekt erstellen.

Klicken Sie auf "Projekte" und dann auf "Neues Projekt erstellen".

Wählen Sie dann "Benutzerdefiniertes Projekt erstellen".

Erstellen Sie nun ein neues Projekt mit dem Namen "my_project".

Klicken Sie dann auf "Erstellen".

Klicken Sie nun auf "Projekt anzeigen".

Achten Sie darauf, Ihren Projekt-API-Schlüssel und Ihr Geheimnis zu speichern; Sie werden sie später benötigen.

Als nächstes müssen Sie Klonen des GitHub-Repositorys klonen, das den Code dieses Projekts enthält.

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

cd in Ihr Github-Repository und öffnen Sie die leere .env Datei, die mit ihr geliefert wird.

cd vonageunlocked
vim .env

Fügen Sie Ihren Vonage Video API-Schlüssel und Ihr Geheimnis (das Sie zuvor gespeichert haben) in die .env Datei wie folgt hinzu:

OPENTOK_API=your_api_key
OPENTOK_SECRET=your_secret

Erstellen Sie dann eine virtuelle Umgebung und aktivieren Sie sie.

pip3 install virtualenv
virtualenv venv
source venv/bin/activate

Laden Sie dann die Abhängigkeiten des Projekts herunter:

pip3 install -r requirements.txt

Wenn Sie das getan haben, starten Sie Ihren Flask-Testserver, indem Sie app.py ausführen:

python3 app.py

Schließlich starten Sie ngrok auf demselben Port wie Ihr Flask-Testserver (Sie können die Dokumentation von Ngrok lesen lesen, um besser zu verstehen, wie ngrok funktioniert):

ngrok http 5000

Gehen Sie nun zu der URL, die Ngrok Ihnen gibt, um die Videokonferenz-Webanwendung in Aktion zu sehen (die URL sollte so aussehen: http://d584-172-112-188-34.ngrok.io).

Sie können jetzt mit Ihrem Telefon und Ihrem Computer Videokonferenzen mit sich selbst abhalten oder den Link mit einem Freund teilen, um eine Videokonferenz mit einer anderen Person abzuhalten.

Gehen Sie zu https://your_ngrok_link/admin um ein Video zu streamen, und dann https://your_ngrok_link/join um es in einem anderen Browser oder auf einem anderen Gerät anzusehen (stellen Sie sicher, dass Sie sich zuerst auf der Verwaltungsseite anmelden).

Sie sollten eine Website sehen, die wie folgt aussieht:

Mit dieser Web-App können Sie auch chatten!

Wie es funktioniert

Schauen wir uns einmal an, wie das funktioniert.

Zunächst werden die Bibliotheken Flask, Decouple und Opentok (die Vonage Video API) importiert. Flask ist ein beliebtes Python-Framework für die Webentwicklung.

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

Als nächstes werden Ihr Vonage Video API-Schlüssel und Ihr Geheimnis aus den Umgebungsvariablen geladen.

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

Anschließend wird ein Vonage Video API-Client erstellt, dem Ihr API-Schlüssel und Ihr Geheimnis übergeben werden, um eine neue Vonage Video API-Sitzung zu erstellen.

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

Wenn Sie die Vonage Video API verwenden, findet alles in einer Sitzung statt. Sie können ein Video in einer Sitzung veröffentlichen und Videos aus einer Sitzung konsumieren. Jede Sitzung hat eine eindeutige ID. In diesem Fall erstellen Sie eine neue Sitzung und speichern die ID der Sitzung in session_id.

Als nächstes wird mit diesem Code eine Flask-Anwendung erstellt:

app = Flask(__name__, static_url_path='')

Mit Flask können Sie ganz einfach eine URL auf eine Funktion wie diese abbilden:

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

Wenn Sie diesen Code zu app.py hinzufügen und /test auf Ihrem lokalen Server aufrufen, sollten Sie Folgendes sehen “Hello, World!”

In diesem Projekt werden drei URLs mit der Flask-Methode render_template Methode. Eine Funktion bildet /admin auf admin.htmlab, und die andere /join auf join.html.

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


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

Mit diesen beiden HTML-Vorlagen können Sie sich entweder als Administrator oder als normaler Besucher anmelden. Sie sehen sie, wenn Sie zu /join oder /admin in der Webanwendung aufrufen.

Das vollständige HTML für jede Vorlage finden Sie im Ordner templates Ihres Repositorys.

Schauen wir uns an, wie die Indexfunktion in app.py funktioniert.

@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'

Jeder Benutzer, der einer Vonage Video API-Sitzung beitritt, benötigt ein eindeutiges Token.

Wenn also eine Postanforderung eingeht, generiert der Code ein neues Token mithilfe der Vonage Video API. Als nächstes prüft der Code, ob der Benutzer ein Administrator ist oder nicht, indem er prüft, ob "admin" in request.form steht (natürlich sollten Sie dies in einer Produktionsanwendung nicht tun).

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

Dann holt sich dieser Code den Namen des Benutzers aus request.form.

name = request.form['name']

Schließlich verwendet dieser Code render_template zum Rendern index.html und übergibt die zuvor erstellte Sitzungs-ID, das zuvor erstellte Token, die Angabe, ob der Benutzer ein Administrator ist, und den Namen an die index.html Vorlage.

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

Die index.html Vorlage verwendet dann diese Variablen, um das Video für alle Teilnehmer anzuzeigen.

Schauen wir uns kurz an, was auf dem Front-End passiert.

Zuerst lädt die index.html Vorlage dieses Skript geladen:

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

Wenn der Benutzer kein Administrator ist, wird eine JavasScript-Datei mit dem folgenden Code aus viewer_video.js ausgeführt:

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);

Dieser JavaScript-Code ruft die Sitzungs-ID, den API-Schlüssel und das Token vom Backend ab.

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

Dann wird ein Sitzungsobjekt erstellt (beachten Sie, dass keine neue Sitzung erstellt wird).

const session = OT.initSession(apiKey, sessionId)

Als nächstes abonniert Ihr Front-End-Code die Sitzung.

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

Schließlich stellen Sie eine Verbindung zur Sitzung her, indem Sie session.connect aufruft und das Token übergibt, das Sie im Backend erzeugt haben.

session.connect(token);

Wenn der Benutzer ein Administrator ist, wird stattdessen der Code aus admin_video.js stattdessen ausgeführt. Die Funktionsweise ist ähnlich wie bei viewer_video.js.

Ihr Code erstellt ein Sitzungsobjekt.

const session = OT.initSession(apiKey, sessionId)

Anschließend wird ein Publisher erstellt, damit der Administrator das Video an die Zuschauer streamen kann.

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

Sobald Ihr Code eine Verbindung mit der Sitzung herstellt, veröffentlicht er den Herausgeber.

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

Und schließlich wird der Nutzer in den Stream aufgenommen, so dass der Administrator sein Video während des Streamings sehen kann.

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

Abschließende Überlegungen

Sie wissen jetzt, wie Sie mit der Video API von Vonage und Flask schnell Videokonferenzen zu einer Webanwendung hinzufügen können. Im Projekt gibt es einen zusätzlichen Code im Frontend, den ich nicht behandelt habe und der Ihren Namen in das Video einblendet. Mehr darüber, wie das funktioniert, erfahren Sie in diesem Artikel.

Teilen Sie uns auf Twitter mit welche Projekte Sie mit der Vonage Video API erstellen!

Stellen Sie außerdem sicher, dass Sie unserer Gemeinschaft auf Slack beitreten.

Vielen Dank fürs Lesen!