Erstellen Sie eine Python Video Conferencing Web App mit Flask und Vonage

In diesem Tutorial werden Sie eine funktionierende browserbasierte Videokonferenzanwendung mit Flask und der Vonage Video API erstellen.

Einführung

Nachdem die globale Pandemie im Jahr 2020 die Art und Weise, wie wir miteinander kommunizieren, verändert hat, wurden Videokonferenzen schnell zu einem der wichtigsten Kommunikationsmittel für Menschen weltweit. Ob man sich mit Kollegen in einem anderen Land trifft oder sich mit Freunden in einer anderen Stadt unterhält - browserbasierte Videokonferenzen gehören heute zum Alltag.

Mit der Weiterentwicklung der Technologie sind auch die Erwartungen der Benutzer gestiegen. Was früher komplex war, ist heute schlank und anspruchsvoll, und von modernen Videokonferenzlösungen wird erwartet, dass sie hochwertige, zuverlässige Echtzeit-Erlebnisse bieten.

In diesem Tutorial lernen Sie, wie Sie eine minimale Videokonferenz-App mit Python, JavaScript und der Vonage Video API. Diese praktische Anleitung führt Sie durch die Erstellung einer einfachen WebRTC-Videoanwendung und stellt die wichtigsten Konzepte für Videokonferenzen in Python vor.

Bevor wir mit der Erstellung der Anwendung beginnen, werden wir einige der in der Beispielanwendung verwendeten Begriffe und Technologien erläutern. Wenn Sie mit diesen Concepts bereits vertraut sind, können Sie mit dem Tutorial zur Erstellung einer Videokonferenz-Webanwendung mit Vonage und Pythonüberspringen, oder Sie können die Beispielanwendung von GitHub klonen und die README folgen, um sie schnell zum Laufen zu bringen.

Ein kurzer Überblick: Flask und Tunneling

Um dieses Tutorial abzuschließen, werden wir uns auf technische Konzepte und Werkzeuge außerhalb von Vonage stützen, die in anderen Bereichen der Softwareentwicklung hilfreich sein können.

Was ist eine Python-Flask-Anwendung?

In diesem Tutorial erstellen wir eine Webanwendung mit Flaskerstellen, einem leichtgewichtigen und dennoch leistungsstarken Web-Framework für Python. Als Framework ermöglicht es Entwicklern, mit Hilfe von Webtechnologien schnell eine Softwareanwendung zu erstellen, die in einem Webbrowser läuft. Wir haben es wegen seiner Benutzerfreundlichkeit und seines minimalistischen Ansatzes für diesen Lehrgang ausgewählt. Im Gegensatz zu anderen Python-Frameworks für die Webentwicklung bietet es uns nur das Wesentliche, das wir für die Erstellung einer einfachen Videokonferenzlösung benötigen.

Was ist Tunnelbau?

In diesem Lernprogramm erstellen wir eine Webanwendung und führen sie lokal auf Ihrem Computer aus. Da sie lokal ausgeführt wird, ist sie nicht über das öffentliche Internet zugänglich, und wenn auf Ihre Webanwendung nicht zugegriffen werden kann, können Sie auch keine Teilnehmer zu Ihrer Videokonferenz hinzufügen. An dieser Stelle kommt das Tunneling ins Spiel. Durch Tunneling werden lokale Server über temporäre oder statische öffentliche URLs dem öffentlichen Internet zugänglich gemacht. ngrok ist eine Softwareplattform, die diesen Dienst anbietet.

Die Grundlagen der Vonage Video API

Die Nutzer erwarten, dass hochwertige Videoanrufe einfach funktionieren ohne Unterbrechungen funktionieren. Aber hinter den Kulissen ist es nicht so einfach, diese Art von Erfahrung zu bieten.

Video in Echtzeit ist von Natur aus unberechenbar. Die Teilnehmer nehmen von verschiedenen Geräten, über verschiedene Netzwerke und in verschiedenen Teilen der Welt teil. Darüber hinaus können sich die Bedingungen während eines Anrufs ändern: Ein mobiles Gerät könnte von Wi-Fi auf Mobilfunk umschalten, eine Unternehmensfirewall könnte bestimmte UDP-Pfade blockieren oder ein Low-End-Laptop könnte unter CPU-Last leiden.

Die Vonage Video API-Plattform ermöglicht die Einbettung von interaktiven Videos in Echtzeit und hoher Qualität, Messaging, Screen-Sharing und mehr in Web- und Mobilanwendungen. Um dies zu erreichen, nutzt die Video API WebRTC für die Audio-Video-Kommunikation. Wenn Sie mit der Video API arbeiten, sollten Sie die folgenden Begriffe und Concepts verstehen:

• Sitzung: Eine Sitzung ist eine logische Gruppe von Verbindungen und Datenströmen. Verbindungen innerhalb derselben Sitzung können Nachrichten austauschen. Stellen Sie sich eine Sitzung als den "virtuellen Raum" vor, in dem die Teilnehmer miteinander interagieren können.

• Verbindung: Ein Endpunkt, der an einer Sitzung teilnimmt und in der Lage ist, Nachrichten zu senden und zu empfangen. Eine Verbindung ist entweder verbunden und kann Nachrichten empfangen, oder sie ist nicht verbunden und kann keine Nachrichten empfangen.

• Stream: Ein Medienstrom fließt zwischen zwei Verbindungen. Dies bezieht sich auf die tatsächlichen Bytes, die Medien enthalten, die ausgetauscht werden. Die Medien können nur aus Audio oder aus Audio und Video bestehen. Sie können auch Bildschirmfreigaben und benutzerdefinierte Streams erstellen.

• Token: Die Video API-Plattform verwendet Token für die Autorisierung, sodass Sie sich nicht um die Erstellung von Benutzern auf der Plattform kümmern müssen. In diesem Lernprogramm verwenden wir Token, um Teilnehmer von Videositzungen im Handumdrehen zu erstellen.

• Herausgeber: Dies bezieht sich auf den Client, der einen Medienstrom veröffentlicht.

• Abonnent: Dies bezieht sich auf die Clients, die Medienströme empfangen.

• Signalisierung: Dies bezieht sich auf das Senden von Text und Daten zwischen Clients, die mit einer Sitzung verbunden sind, in Form von Nachrichten. Diese Nachrichten ermöglichen es Entwicklern, einfache Textchats zu erstellen, Anweisungen von einem Client zum anderen zu senden und andere wertvolle Erfahrungen zu schaffen.

Einen tieferen Einblick in diese wichtigen Begriffe und Concepts erhalten Sie in dem Video API-Glossar oder schauen Sie in die Video API-Dokumentation oder sehen Sie sich das folgende Video an.

Nachdem Sie nun die wichtigsten Concepts verstanden haben, können Sie diese nun anwenden, indem Sie eine funktionierende Videokonferenz-App erstellen.

Anleitung: Erstellen einer Web-App für Videokonferenzen

In diesem Tutorial konzentrieren wir uns auf die grundlegenden Bausteine einer Videokonferenz-App, einschließlich der Erstellung einer Videositzung, dem Hinzufügen von Verbindungen und der Verwendung von Signalisierung für Echtzeit-Chat. Wir werden Python und Flask für das Backend und JavaScript zum Erstellen und Koordinieren der Videositzung verwenden.

Voraussetzungen

Für die Durchführung dieses Tutorials benötigen Sie Folgendes:

• Python 3.8+

• A Vonage API-Konto

• Ein ngrok Account und Installation

• Ein Freund, der an einer Videokonferenz mit Ihnen teilnimmt

Tutorial-Einrichtung

Bevor wir mit dem Bau beginnen, sollten wir alles in Ordnung bringen.

1. Erstellen einer Vonage Video-Anwendung

Sie müssen nun eine Video API-Anwendung erstellen. In diesem speziellen Kontext ist eine Anwendung ein Container für die Konfigurations- und Sicherheitsinformationen, die Sie für die Video API benötigen. Schalten Sie beim Erstellen Ihrer Anwendung die Option für Video in den Fähigkeiten Abschnitt.

2. Einen Ngrok-Tunnel einrichten

Die Video API muss in der Lage sein, auf Ihren Webhook zuzugreifen, damit sie Anfragen an ihn stellen kann. Die Endpunkt-URL muss also für das öffentliche Internet zugänglich sein. Dafür ist ngrok da.

Führen Sie in einem separaten Terminalfenster aus:

ngrok http 5000

Mit diesem Befehl werden die öffentlichen URLs generiert, zu denen Ihr lokaler Server an Port 5000 tunneln wird. Notieren Sie sich die öffentliche URL - sie sollte etwa so aussehen:

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

Bitte beachten Sie, dass die generierten öffentlichen URLs nicht dauerhaft sind, es sei denn, Sie nutzen eines der kostenpflichtigen Angebote von ngrok. Mit anderen Worten: Jedes Mal, wenn Sie den ngrok Befehl ausführen, werden sich die resultierenden URLs ändern. Um dies zu verhindern, lassen Sie ngrok für die Dauer dieses Tutorials laufen.

Fangen wir an zu bauen!

Nun, da Sie alles vorbereitet haben, können Sie mit dem Bau beginnen.

Im Folgenden finden Sie einen Überblick über die Schritte, die wir zur Durchführung dieses Tutorials unternehmen werden:

1. Erstellen und Aktivieren einer virtuellen Python-Umgebung

2. Abhängigkeiten installieren

3. Einen Vonage-Client einrichten und die Routen für unsere Web-App im Backend definieren

4. Erstellen Sie eine Sitzung, fügen Sie ihr Verbindungen hinzu und legen Sie fest, wie Chatsignale im Frontend behandelt werden sollen.

5. Führen Sie den Code aus und probieren Sie ihn aus

Den Code für dieses Tutorial finden Sie auf GitHub in der Vonage-Gemeinschaft zusammen mit einem README, um es zum Laufen zu bringen.

1. Erstellen Sie ein Projektverzeichnis

Erstellen Sie ein Projektverzeichnis und wechseln Sie die Verzeichnisse darin:

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

2. Erstellen und Aktivieren einer virtuellen Python-Umgebung

Python virtuelle Umgebungen ermöglichen es Ihnen, Pakete an einem Ort zu installieren, der vom Rest Ihres Systems isoliert ist. Dies hilft, systemweite Unordnung und Konflikte mit verschiedenen Python-Versionen und -Paketen zu vermeiden. Erfahren Sie mehr über virtuelle Umgebungen in diesem Blog-Beitrag.

Führen Sie in Ihrem Projektverzeichnis die folgenden Befehle aus, um eine virtuelle Umgebung zu erstellen und sie zu aktivieren:

virtualenv venv && source venv/bin/activate

3. Installieren Sie die Projektabhängigkeiten

Um die Abhängigkeiten, die wir für dieses Tutorial benötigen, zu installieren, führen Sie Folgendes aus:

pip install Flask python-dotenv vonage

5. Besorgen Sie sich Ihre Umgebungsvariablen und konfigurieren Sie sie

Umgebungsvariablen (oft als "env vars" bezeichnet) sind Variablen, die Sie außerhalb Ihres Programms speichern und die dessen Ausführung beeinflussen können. Sie können zum Beispiel Umgebungsvariablen festlegen, die den Schlüssel und das Geheimnis für eine API enthalten. Ihr Programm kann dann diese Variablen verwenden, wenn es sich mit der API verbindet. Weitere Informationen über Umgebungsvariablen finden Sie unter

Um einen Vonage-Client zu instanziieren, benötigen Sie die ID der von Ihnen erstellten Vonage-Anwendung und Ihren privaten Vonage-Schlüssel.

Sie finden die Anwendungs-ID im Entwickler-Dashboard in den Einstellungen für die Video-Anwendung, die Sie für diesen Lehrgang erstellt haben.

Hier können Sie auch Ihren privaten Schlüssel generieren und herunterladen. Im Dashboard für Entwickler Applikationen Menüklicken Sie auf die Anwendung, die Sie für dieses Tutorial erstellt haben, und dann auf bearbeiten.. Sobald sich das Bearbeitungsfenster öffnet, klicken Sie auf die Schaltfläche "Öffentlichen und privaten Schlüssel generieren". Dadurch wird der Download Ihres privaten Schlüssels als Datei mit der Erweiterung .key. Sobald die Datei heruntergeladen ist, verschieben Sie sie in das Stammverzeichnis Ihres Projekts.

Bewahren Sie diese Datei privat auf und geben Sie sie nicht weiter, wo sie kompromittiert werden könnte. Wenn Sie vorhaben, diesen Code öffentlich zugänglich zu machen, fügen Sie Ihre private Schlüsseldatei zu Ihrer .gitignore Datei hinzu.

Erstellen Sie im Stammverzeichnis eine Datei namens .env und fügen Sie die folgenden Variablen hinzu:

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

6. Bauen Sie Ihr Backend

Das Backend dieser Anwendung ist für die Instanziierung eines Vonage-Clients, die Definition der Web-App-Routen, die Initiierung einer Videositzung und die Generierung von Token für Videokonferenzteilnehmer zuständig.

Erstellen Sie eine Datei namens appy.py und fügen Sie den Code von GitHub.

Auch wenn Sie diesen Code nicht in der Produktion einsetzen möchten, ermöglicht er eine schnelle praktische Erfahrung mit der Video API in Aktion. Zu diesem Zweck wird eine minimale Webanwendung mit zwei Routen aufgesetzt:

1. Die Seite / führt Sie zu einer Webseite, die Sie zur Teilnahme an einer Videositzung einlädt. Um einen Videostream zu veröffentlichen, müssen Sie die Option "Als Admin beitreten" auswählen; um den Stream zu abonnieren, lassen Sie diese Option unmarkiert.

2. Nach einem Klick auf die Schaltfläche "Sitzung beitreten" erzeugt die /api/generate-session Route ein Token für jeden Teilnehmer, und je nachdem, ob der Teilnehmer ein admin ist oder nicht, entweder einen Stream veröffentlicht oder abonniert.

Im folgenden Code wird die Video-Sitzung mit dem Vonage-Client eingeleitet:

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

Jede Sitzung wird mit einer bestimmten ID identifiziert. Diese ID wird verwendet, um Verbindungen und Streams zwischen den Teilnehmern herzustellen. Für Sitzungen stehen verschiedene Optionen zur Verfügung, und für diese spezielle Sitzung verwenden wir die geroutet Medienmodus. Für diese Sitzung verwenden wir die Option geroutete Medienmodus, der für mehr Teilnehmer besser geeignet ist und auch die Archivierung ermöglicht. Wenn Sie mehr über Sitzungen und Sitzungsoptionen erfahren möchten, lesen Sie bitte die Dokumentation.

In diesem Code wird das Token für jeden Teilnehmer erstellt:

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

Um einen Benutzer zu authentifizieren, der eine Verbindung zu einer Sitzung herstellt, muss der Code ein Token zusammen mit der Anwendungs-ID übergeben. Sie erzeugen ein Token für jeden Benutzer, der versucht, eine Verbindung zu einer Sitzung herzustellen. Beim Erzeugen eines Tokens müssen Sie eine Sitzungs-ID angeben. Weitere Informationen über Token und Token-Optionen finden Sie in der Dokumentation.

Die session_id, token, und application_id werden im folgenden Code zusammen mit anderen Daten an das Frontend übergeben, um das eingebettete Video im Frontend zu erstellen:

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

7. Erstellen Sie Ihr Frontend

Mit der Video API lassen sich hochwertige interaktive Video-, Voice-, Messaging- und Bildschirmfreigabefunktionen ganz einfach in Web- und Mobilanwendungen einbetten.

Das JavaScript

Erstellen Sie im Stammverzeichnis ein weiteres Verzeichnis mit dem Namen static. In diesem static Verzeichnis erstellen Sie eine Datei namens app.js und fügen Sie den Code aus dieser Datei auf GitHub.

Schauen wir uns an, wie eine Sitzung bei Vonage erstellt und gehandhabt wird:

1. Mit Hilfe der application_id und session_id wird ein Sitzungsobjekt mit erstellt:

session = OT.initSession(applicationId, sessionId);

2. Dann wird ein Client mit der Sitzung verbunden; wenn der Client ein Administrator ist, wird der Medienstrom veröffentlicht:

    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. Wenn der Medienstrom veröffentlicht wird, sendet das Sitzungsobjekt ein streamCreated Ereignis und abonniert neue Verbindungen dazu:

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

4. In der Zwischenzeit erstellt der folgende Code Signalereignisse und wartet auf diese, um einen Chat zwischen Clients zu implementieren:

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

Das HTML

Für die Routen, die wir im Backend in app.pyerstellt haben, benötigen wir eine Vorlage, die auf dem Frontend gerendert wird. Dafür ist die index.html Datei. Da dieser Code nichts Spezielles für die Video API verwendet, werden wir ihn hier nicht besprechen. Sie können das templates Verzeichnis und seinen Inhalt aus dem Repo auf GitHub kopieren.

8. Jetzt probieren Sie es aus!

Bringen Sie Ihre Anwendung mit dem folgenden Befehl in Ihrem Stammverzeichnis zum Laufen:

python app.py

Navigieren Sie in Ihrem Browser zu der von ngrok generierten öffentlichen URL. Sie sollten eine Webseite sehen, die Sie einlädt, an einer Video-Sitzung teilzunehmen, und ein Textfeld für Ihren Namen enthält. Wenn Sie einen Video-Stream veröffentlichen möchten, müssen Sie das Kästchen für Als Administrator teilnehmen und klicken Sie dann auf Sitzung beitreten.

Sie sollten zu einer Seite weitergeleitet werden, die den Video-Feed Ihres Geräts anzeigt. Hinweis: Möglicherweise müssen Sie zuerst Ihre Kamera und Ihr Mikrofon freigeben.

Wenn Sie diesen Video-Feed eingerichtet haben, können Sie dieselbe ngrok-URL an einen Freund senden und ihn dazu bringen, sich ohne die Option Als Admin beitreten. Dadurch wird er der Sitzung als Abonnent hinzugefügt, so dass er nur das Video von der Kamera des Administrators sehen kann.

Die Chatfunktion funktioniert für alle Teilnehmer. Wenn Sie Text in das Feld eingeben und auf Sendenklicken, wird der Text für alle Teilnehmer sichtbar sein.

Zusammenfassung

In diesem Tutorial haben Sie gelernt, wie man eine minimale browserbasierte Videokonferenzanwendung mit Python, JavaScript und der Vonage Video API erstellt. Auf dem Weg dorthin haben wir wichtige unterstützende Konzepte wie Flask für die schnelle Erstellung eines Backends und ngrok für die Öffnung Ihrer lokalen Umgebung für das Internet behandelt. Sie haben auch die Kernbausteine der Video API kennengelernt - Sitzungen, Token, Verbindungen und Streams - und gesehen, wie sie zusammenarbeiten, um Echtzeitkommunikation zu ermöglichen. Durch die Kombination eines einfachen Flask-Backends mit einem JavaScript-basierten Frontend haben Sie eine funktionierende Anwendung erstellt, die Live-Video und grundlegende Chat-Funktionen unterstützt. Von hier aus können Sie diese Grundlage mit fortschrittlicheren Funktionen wie Moderationskontrollen, Aufzeichnung, Bildschirmfreigabe oder einer verbesserten Benutzeroberfläche (UI/UX) erweitern, um Ihrem Anwendungsfall gerecht zu werden. Die Vonage Video API Spielwiese macht es einfach, verschiedene Funktionen direkt in Ihrem Browser auszuprobieren.

Weitere Lektüre und Ressourcen

• Bewährte Praktiken für den Einstieg in Vonage Video: Bewährte Praktiken, die Sie berücksichtigen sollten, bevor Sie mit der Erstellung Ihrer funktionsreichen Videoanwendung auf der Grundlage der Vonage Video API beginnen.

• Video-Archivierung mit der Vonage Video API und React: Lernen Sie vier Video-Archivierungsmodi mit der Vonage Video API kennen, einschließlich Experience Composer.

• Verbessern Sie das Video-Erlebnis der Benutzer mit Qualitätsüberwachung in Echtzeit: MOS ist ein hervorragender Maßstab für die Videoqualität bei Videoanrufen. Erfahren Sie, wie Vonage Video sie zur Verbesserung der Benutzererfahrung einsetzt.

• Erste Schritte mit der Vonage Video API: Die Erstellung einer neuen Anwendung mit der Vonage Video API dauert nur ein paar Minuten. Wir gehen durch die Erstellung einer Anwendung von Grund auf mit unserem Node SDK und dem Video Web SDK.