https://d226lax1qjow5r.cloudfront.net/blog/blogposts/making-video-calls-using-vonage-video-and-flutter/flutter_videocall_1200x600.png

Videogespräche mit Vonage Video und Flutter führen

Zuletzt aktualisiert am July 6, 2021

Lesedauer: 2 Minuten

Flutter erfreut sich immer größerer Beliebtheit. Deshalb haben wir beschlossen, eine einfache Anwendung zu entwickeln, die Videoanrufe zwischen zwei Geräten ermöglicht. Zwei Technologien, die zur Erstellung der Anwendung verwendet werden, sind Flutter und Vonage Video SDKs. Lassen Sie uns diese Technologien kurz rekapitulieren:

  • Flutter - Open-Source-UI-Softwareentwicklungskit zur Entwicklung plattformübergreifender Anwendungen für Android, iOS, Linux und Mac. Die Hauptprogrammiersprache ist Dart.

  • Vonage Video - für den Aufbau von Videoanrufen zwischen verschiedenen Geräten. Die verwendeten Programmiersprachen sind Kotlin für die Android-Plattform und Swift für die iOS-Plattform.

Diese Anwendung ist ein Flutter-Äquivalent der Basic-Video-Chat-Anwendung (Basic-Video-Chat Android / Basic-Video-Chat iOS). Hier sind die wichtigsten Funktionen der Anwendung:

  • Verbinden mit einer Vonage Video-Sitzung

  • Veröffentlichen eines Audio-/Videostreams zur Sitzung

  • Abonnieren Sie den Audio-/Videostream eines anderen Kunden

HINWEIS: Der Quellcode der Anwendung ist verfügbar auf GitHub.

Flutter ist hier die wichtigste Technologie. Es ist eine Grundlage für den Aufbau einer mobilen Anwendung, die auf Android und iOS läuft. Sie ist für die Verwaltung und Anzeige der Benutzeroberfläche verantwortlich und enthält die Anwendungslogik. Auf diese Weise wird die Anwendungslogik nur einmal für beide Plattformen geschrieben.

Unter der Haube wird diese Flutter-Anwendung Folgendes verwenden Android Vonage Video SDK und iOS Vonage Video SDK (über native Android/iOS-Projekte):

Flutter application under the hoodFlutter application under the hood

Plattform (Android, iOS) nativer Code kommuniziert mit Flutter durch die Verwendung von Flutter MethodChannelder Methodenaufrufe verwendet. MethodChannel dient als Brücke zum Senden von Nachrichten zwischen Flutter und nativem Code (hinzugefügt zum nativen Android-Projekt und nativen iOS-Projekt). So können wir den Benutzer anmelden und die Videositzung einrichten, um einen Videoanruf zu tätigen:

Flutter application flowFlutter application flow

Flutter kann Nachrichten an den nativen (Android / iOS) Teil der App senden und der native Teil der App kann eine Nachricht zurück an Flutter senden. Flutter ruft die initSession Methode auf und übergibt die apiKey, sessionId, und token an den nativen Code, um eine Vonage Video-Sitzung zu starten. Der native Code informiert den Flutter-Teil der App über eine erfolgreiche Anmeldung (oder einen Fehler) und der Flutter-seitige Code aktualisiert die Benutzeroberfläche.

HINWEIS: Eine Flutter-App kann als Android- oder iOS-Anwendung verpackt werden, aber niemals als beides gleichzeitig. Wenn die Zielplattform auf Android eingestellt ist, kommuniziert MethodChannel mit dem nativen Android-App-Code. Wenn die Zielplattform auf iOS eingestellt ist, kommuniziert MethodChannel mit dem nativen iOS-App-Code.

Zur Ausführung der Anwendung müssen Sie Flutter installieren. Dies ist von Plattform zu Plattform unterschiedlich, wie Sie in der ausführlichen Anleitung.

HINWEIS: Stellen Sie sicher, dass Sie flutter doctor ausführen, um Ihre lokale Flutter-Einrichtung zu überprüfen.

Um sich bei der Vonage Video-Sitzung anzumelden, benötigen Sie ein Vonage Video-Konto und zum Erzeugen von initSession, apiKey, und sessionId. Sie können diese Werte im Vonage Video Dashboard. Öffnen Sie nun die main.dart Datei und verwenden Sie diese Werte in den entsprechenden Variablen:

static String API_KEY = "";
static String SESSION_ID = "";
static String TOKEN = "";

Starten Sie die mobile App, um den Videoanruf zu starten.

HINWEIS: Sie können verwenden Entwickler-Spielplatz verwenden, um sich mit der gleichen Sitzung zu verbinden wie das mobile Gerät, auf dem die Flutter-App läuft.

Zusammenfassung

Es gibt noch ein paar Nachteileaber die Integration von Flutter und Vonage Video ist insgesamt recht reibungslos. Auch ohne ein natives Flutter-Paket ist es möglich, schnell eine vollwertige Flutter-App zu erstellen, die die mobilen SDKs von Vonage Video unter der Haube nutzt und auf Android- und iOS-Geräten läuft.

Share:

https://a.storyblok.com/f/270183/384x384/8ae5af43bb/igor-wojda.png
Igor WojdaVonage Ehemalige