Einen einfachen Windows-Client einrichten

Dieses Tutorial führt Sie Schritt für Schritt durch die Einrichtung eines einfachen Windows-Clients, der die Vonage Video API nutzt.

Übersicht

Alle Applikationen, die die Vonage Video API verwenden, benötigen sowohl eine Kunde und eine Server Komponente. Der clientseitige Code wird in der Windows-App des Endnutzers geladen und übernimmt den Großteil der OpenTok-Funktionalität, darunter Verbindung zum Sitzung, Veröffentlichung Audio-Video Ströme zur Sitzung, und Abonnieren Sie zu den Streams anderer Clients. Weitere Informationen über Clients, Server und Sitzungen finden Sie unter OpenTok-Grundlagen.

In diesem Lernprogramm werden Sie die OpenTok Windows SDK, die clientseitige Bibliothek von OpenTok für Windows, mit der sich schnell und einfach eine interaktive Echtzeit-Videoanwendung erstellen lässt.

In diesem Tutorial werden folgende Themen behandelt:

Anforderungen
Schritt 1: Ein neues Projekt erstellen
Schritt 2: Hinzufügen des OpenTok-Windows-SDKs
Schritt 3: Einrichtung der Authentifizierung
Schritt 4: Verbindung zur Sitzung herstellen
Schritt 5: Anpassen der Benutzeroberfläche der Beispiel-App
Schritt 6: Einen Stream in der Sitzung veröffentlichen
Schritt 7: Andere Client-Streams abonnieren
Schritt 8: Die App ausführen und ein Installationsprogramm erstellen
Nächste Schritte
Einrichten Ihres Servers

Geschätzte Bearbeitungszeit: 25 Minuten

Möchten Sie dieses Tutorial überspringen? Sie können den fertigen Windows-Client-Code in der Datei Basic-Video-Chat Ordner unseres Windows Beispielanwendung Repo auf GitHub. Das Repo enthält eine README mit Dokumentation zum Ausführen und Erforschen des Codes.

Anforderungen

Für dieses Tutorial benötigen Sie:

Ein gültiger Vonage Video API Account - falls Sie noch keinen haben, können Sie sich für eine kostenlose Testversion anmelden
Microsoft Visual Studio

Schritt 1: Ein neues Projekt erstellen

Öffnen Sie Visual Studio und wählen Sie Neu > Projekt von der Datei Menü.
In der Neues Projekt wählen Sie im Dialogfenster Windows > WPF-Applikation (Visual C#), geben Sie einen Namen für die Anwendung ein und klicken Sie dann auf die Schaltfläche OK Taste.

Schritt 2: Hinzufügen des OpenTok-Windows-SDKs

Laden Sie das OpenTok Windows SDK mithilfe von NuGet auf eine der folgenden Arten herunter:

In Visual Studio können Sie in der Werkzeuge Menüauswahl NuGet-Paketmanager > Verwalten von NuGet-Paketen für die Lösungund suchen Sie dann nach OpenTok.Client. Weisen Sie das OpenTok.Client-Paket dem Projekt zu, das Sie erstellen.
Geben Sie in der Visual Studio Package Manager-Konsole den folgenden Befehl ein:
Kopieren
```
Install-Package OpenTok.Client
```
Verwenden Sie die .NET Core-Befehlszeilentools, um das OpenTok-Paket zu installieren. Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:
Kopieren
```
dotnet add package OpenTok.Client
```

Fügen Sie die OpenTok-Windows-Klassen zur Anwendung hinzu – öffnen Sie in Visual Studio die MainWindow.xaml.cs Datei. Und fügen Sie die folgenden Anweisungen hinzu:

using OpenTok;

Dadurch werden die Klassen des OpenTok Windows SDK importiert, die von der App verwendet werden.

Schritt 3: Einrichtung der Authentifizierung

Um eine Verbindung zu einer OpenTok-Sitzung herzustellen, benötigt der Client Zugriff auf bestimmte Authentifizierungsdaten – ein API-Schlüssel, Sitzungs-IDund Token. In einer Produktionsanwendung sollten diese Anmeldeinformationen von einem Server, aber um den Vorgang zu beschleunigen, werden wir die Werte vorerst einfach fest einprogrammieren:

Fügen Sie in der MainWindow-Klasse einige statische Variablen hinzu, um den API-Schlüssel, die Sitzungs-ID und das Token zu speichern. Außerdem fügen wir einige Konstanten für die Kennung der Protokollnachricht und die Berechtigungen hinzu:

public partial class MainWindow : Window { public const string API_KEY = ""; public const string SESSION_ID = ""; public const string TOKEN = "";
Passen Sie den Code an, indem Sie die Werte für die API_KEY, SESSION_ID und TOKEN.

Melden Sie sich dazu in Ihrem Video API-Konto, erstellen Sie entweder ein neues OpenTok-API-Projekt oder verwenden Sie ein bestehendes OpenTok-API-Projekt. Rufen Sie anschließend Ihre Projektseite auf und scrollen Sie nach unten zum Projekt-Tools Abschnitt. Von dort aus können Sie eine Sitzungs-ID und ein Token manuell erzeugen. Verwenden Sie den API-Schlüssel des Projekts zusammen mit der Sitzungs-ID und dem Token, die Sie erzeugt haben.

Das ist wichtig: Während der Test- und Entwicklungsphase können Sie die Werte für die Sitzungs-ID und das Token weiterhin über Ihren Account abrufen, doch bevor Sie in die Produktion gehen, müssen Sie einen Server einrichten. Darauf gehen wir näher ein in Nächste Schritte am Ende dieses Tutorials.

Weitere Informationen zu Sitzungen, Token und Servern finden Sie unter Video API-Grundlagen.

Schritt 4: Verbindung zur Sitzung herstellen

Als Nächstes stellen wir eine Verbindung zur OpenTok-Sitzung her. Dies müssen Sie tun, bevor Sie Ihren Audio-Video-Stream in der Sitzung veröffentlichen oder die Streams anderer Teilnehmer anzeigen können.

Hinzufügen einer Session zur Klasse MainWindow (direkt nach der letzten Zeile, die Sie in Schritt 3):

Session Session;

Die Klasse „Session“ ist im OpenTok Windows SDK definiert. Sie repräsentiert eine OpenTok-Sitzung und enthält Methoden zur Interaktion mit der Sitzung.
In der MainWindow() Konstruktorfunktion, fügen Sie die folgenden Zeilen, nach der InitializeComponent() Methode:

Session = new Session(Context.Instance, API_KEY, SESSION_ID); Session.Connected += Session_Connected; Session.Disconnected += Session_Disconnected; Session.Error += Session_Error; Session.StreamReceived += Session_StreamReceived; Session.Connect(TOKEN);

Dieser Code verwendet die Session() Konstruktor, um ein Session-Objekt zu instanziieren. Der Konstruktor benötigt drei Parameter:
- Der mit dieser Anwendung verbundene Windows-Kontext
- Die OpenTok-Sitzungs-ID
- Das Token
Die nächsten Zeilen fügen Ereignishandler für sitzungsbezogene Ereignisse hinzu. (Wir werden diese in den nächsten Schritten implementieren).

Die Session.Connect() Methode der session Das Objekt stellt die Verbindung zwischen der Client-Anwendung und der OpenTok-Sitzung her. Sie müssen die Verbindung herstellen, bevor Sie Audio- und Videostreams in der Sitzung senden oder empfangen (oder bevor Sie in irgendeiner Weise mit der Sitzung interagieren). Das Connect() Die Methode nimmt einen Parameter entgegen: das Authentifizierungstoken, mit dem sich dieser Client bei der OpenTok-Sitzung anmelden kann.
Als nächstes werden wir Methoden der SessionListener-Schnittstelle implementieren. Fügen Sie den folgenden Code am Ende der Klasse MainWindow ein (vor der schließenden Klammer der Klasse):

private void Session_Connected(object sender, EventArgs e) { Console.WriteLine("Connected to session."); } private void Session_Disconnected(object sender, EventArgs e) { Console.WriteLine("Disconnected from session."); } private void Session_Error(object sender, Session.ErrorEventArgs e) { Console.WriteLine("Session error:" + e.ErrorCode); } private void Session_StreamReceived(object sender, Session.StreamEventArgs e) { Console.WriteLine("Stream received in session."); }
- Wenn der Client eine Verbindung zur OpenTok-Sitzung herstellt, wird die Session.Connected Ereignis ausgelöst wird (und die Session_Connected() Ereignisbehandler aufgerufen wird).
- Wenn der Client die Verbindung zur OpenTok-Sitzung trennt, wird die Session.Disconnected Ereignis gesendet wird (und die Session_Disconnected() Methode aufgerufen wird).
- Wenn der Client keine Verbindung zur OpenTok-Sitzung herstellen kann, wird die Session.Error Ereignis gesendet wird (und die Session_Error() Methode aufgerufen wird).
- Wenn ein anderer Client einen Stream in der OpenTok-Sitzung veröffentlicht, wird der Session.StreamReceived Ereignis ausgelöst wird (und die Session_StreamReceived() Ereignisbehandler aufgerufen wird).
Im Moment schreibt die Anwendung in die Debugger-Konsole, wenn eines dieser Ereignisse eintritt.

Führen Sie ein Debugging Ihrer Anwendung durch. Wenn die App erfolgreich eine Verbindung zur OpenTok-Sitzung herstellt, wird die Session_Connected() Methode protokolliert auf der Debug-Konsole.

Schritt 5: Anpassen der Benutzeroberfläche der Beispiel-App

Standardmäßig rendert das OpenTok Windows SDK Videos, die Sie veröffentlichen und abonnieren, mithilfe der Klasse „VideoRenderer“ (definiert im OpenTok Windows SDK). Diese Klasse rendert Videos in ein Windows Presentation Framework-Steuerelement.

Für diese Beispielanwendung definieren Sie die Zielsteuerelemente in der Datei MainWindow.xaml der Anwendung. Öffnen Sie diese Datei in Visual Studio und bearbeiten Sie die XML-Datei, um einen Verweis auf das OpenTok Namespace und zum Hinzufügen von zwei VideoRenderer Objekte zum Haupt Grid Kontrolle der Anwendung:

Schritt 6: Einen Stream in der Sitzung veröffentlichen

Wenn die App eine Verbindung zur OpenTok-Sitzung herstellt, soll sie mithilfe der Kamera und des Mikrofons einen Audio-Video-Stream in die Sitzung übertragen:

Hinzufügen einer Publisher zur Klasse MainWindow (nach der Deklaration der Session Mitgliedsvariable):

Publisher Publisher;

Die Klasse „Publisher“ ist im OpenTok Windows SDK definiert.
Ändern Sie die MainWindow() Konstruktor, um Code zum Initialisieren eines Video-Capturers für den Publisher und zur Verwendung dieses Video-Capturers in einem Publisher-Objekt einzuschließen:

Publisher = new Publisher(Context.Instance, renderer: PublisherVideo);

Der Code verwendet die Publisher() Konstruktor, um ein Publisher-Objekt zu instanziieren. Zwei Parameter werden an den Konstruktor übergeben: der Windows-Anwendungskontext und der Video-Renderer (definiert in der Datei MainApplication.xaml).
Ändern Sie die Session_Connected() Methode, um Code zur Veröffentlichung eines Streams in der Sitzung einzuschließen:

private void Session_Connected(object sender, System.EventArgs e) { Session.Publish(Publisher); }

Wenn sich die Anwendung mit der Sitzung verbindet (und die SessionConnected Ereignis ausgelöst wird) die Session_Connected Ereignisbehandler ruft die Session.Publish() Methode, wobei das Publisher-Objekt übergeben wird. Dadurch veröffentlicht die App einen Audio-Video-Stream an die OpenTok-Sitzung, wobei das Mikrofon und die Kamera des Video-Capturers als Audio- bzw. Videoquelle verwendet werden.

Führen Sie ein Debugging Ihrer Anwendung durch. Die App zeigt die lokale Videovorschau des Publishers an und veröffentlicht einen Stream in der OpenTok-Sitzung, sobald die App erfolgreich eine Verbindung zu dieser hergestellt hat.

Anmerkung: Diese Anwendung verwendet den Standard-Video-Capturer, der die Standardkamera und das Standardmikrofon des Systems als Video- und Audioquelle für den veröffentlichten Stream nutzt.Sie können benutzerdefinierte Video-Capturer und Video-Renderer implementieren, indem Sie Klassen erstellen, die die im OpenTok Windows SDK definierten Schnittstellen „IVideoCapturer“ und „IVideoRenderer“ implementieren. Beispielcode finden Sie in den Beispielanwendungen „CustomVideoRenderer“ und „ScreenSharing“ im vonage-video-windows-sdk-beispiele Repo auf GitHub.

Schritt 7: Andere Client-Streams abonnieren

Wir möchten, dass die Kunden in der Lage sind abonnieren auf die Streams anderer Clients in der Sitzung zugreifen (oder diese anzeigen):

Ändern Sie die Implementierung der Session_StreamReceived() Methode, um Code zum Abonnieren der Streams anderer Clients in die Sitzung aufzunehmen:

private void Session_StreamReceived(object sender, Session.StreamEventArgs e) { Subscriber subscriber = new Subscriber(Context.Instance, e.Stream, SubscriberVideo); Session.Subscribe(subscriber); }

Wenn ein anderer Client einen Stream in einer Sitzung veröffentlicht, wird der Session.StreamReceived Die Nachricht wird gesendet und diese Methode aufgerufen. Ein im OpenTok Windows SDK definiertes Stream-Objekt wird an den Ereignishandler übergeben. Es repräsentiert einen Audio-Video-Stream in der OpenTok-Sitzung.

Der Code initialisiert eine Instanz der Klasse „Subscriber“, die im OpenTok Windows SDK definiert ist. Die Klasse „Subscriber“ definiert ein Objekt, mit dem ein Client von anderen Clients veröffentlichte Streams abonnieren (anzeigen) kann.

Die Subscriber() Konstruktor benötigt drei Parameter:

Der Windows-Anwendungskontext.
Das Stream-Objekt.
Der Renderer für das Abonnentenobjekt. In dieser Anwendung ist der Renderer der SubscriberVideo Objekt, das in der Datei MainWindow.xaml definiert ist.

Schritt 8: Die App ausführen und ein Installationsprogramm erstellen

Um der Sitzung einen zweiten Stream hinzuzufügen (der in Ihrem Emulator als Teilnehmer angezeigt wird), führen Sie die Anwendung entweder ein zweites Mal auf einem anderen Windows-Gerät aus oder verwenden Sie die OpenTok Playground um eine Verbindung zur Sitzung in einem unterstützten Webbrowser herzustellen, indem Sie die folgenden Schritte ausführen:

Gehe zu OpenTok Playground (Sie müssen sich bei Ihrem Account)
Wählen Sie die An einer bestehenden Sitzung teilnehmen Registerkarte
Kopieren Sie die Sitzungs-ID, die Sie in Ihrer ViewController.m-Datei verwendet haben, und fügen Sie sie ein Sitzungs-ID Eingabefeld
Klicken Sie auf Sitzung beitreten
Klicken Sie auf dem nächsten Bildschirm auf Verbinden Sieund klicken Sie dann auf Stream veröffentlichen
Sie können die Publisher-Optionen anpassen (nicht erforderlich) und dann auf Weiter um eine Verbindung herzustellen und mit der Veröffentlichung und dem Abonnement zu beginnen

Zu diesem Zeitpunkt sollten Sie sehen, dass der Stream von Ihrer Webcam und der Stream vom Emulator veröffentlicht wird. Wenn Sie zum Emulator zurückkehren, sollte der neue Herausgeber auch auf dem emulierten Bildschirm angezeigt werden.

Wenn Sie ein Installationsprogramm für Ihre Anwendung erstellen, fügen Sie Visual C++ Redistributable for Visual Studio 2015 als Installationspaket hinzu. Verwenden Sie die x86-Version, die x64-Version oder beide, je nach der Architektur Ihrer Anwendung.

Herzlichen Glückwunsch! Sie haben den Lehrgang "Einrichten eines einfachen Windows-Clients" abgeschlossen.
Sie können mit dem Code, den Sie hier entwickelt haben, weiter spielen und ihn für die Client-Seite Ihrer Anwendung anpassen, aber denken Sie daran, dass Sie die Serverkomponente Ihrer Anwendung, bevor sie in Produktion geht (siehe Einrichten Ihres Servers unten).

Eine fertige Version dieser Beispielanwendung finden Sie in der BasicVideoChat Ordner des vonage-video-windows-sdk-beispiele Repo auf GitHub. Diese fertige Version fügt Code hinzu, um die Sitzungs-ID, das Token und den API-Schlüssel von einem Webdienst zu laden (anstatt hart kodierte Werte zu verwenden).

Nächste Schritte

Wenn Sie hier fertig sind, können Sie Ihre OpenTok-Application mit diesen hilfreichen Ressourcen weiter ausbauen und verbessern:

Einrichten Ihres Servers

Im obigen Tutorial haben wir Sie gebeten, Ihre Anmeldedaten fest einprogrammieren. Für eine Produktionsanwendung gilt jedoch, dass die sessionId und token Die Werte in Ihrem Code müssen von Ihrem Anwendungsserver generiert und an den Client übergeben werden. Hier sind einige Gründe, warum Sie in Ihrer Produktionsanwendung keine fest eingestellten Anmeldedaten verwenden sollten:

Token verfallen nach einer bestimmten Zeit (die bei der Generierung festgelegt wird), daher müssen regelmäßig neue generiert werden.
Sie können keine neuen Sitzungen dynamisch erstellen, sodass alle Nutzer Ihrer App in einem einzigen „Raum“ festsitzen würden.

Sie können Ihre Anwendung weiterhin mit fest programmierten Werten testen, aber wenn Sie bereit sind, einen Server einzurichten, gibt es dafür verschiedene Möglichkeiten:

Server-Option 1 – Starten Sie mit einem Klick einen einfachen REST-Server auf Heroku

Dies ist wahrscheinlich der schnellste Weg, einen Server in Betrieb zu nehmen, allerdings ist der Funktionsumfang dabei eingeschränkt. Klicken Sie einfach auf die Heroku-Schaltfläche unten. Sie werden dann zur Heroku-Website weitergeleitet und aufgefordert, Ihren OpenTok-API-Schlüssel und Ihr API-Geheimnis einzugeben – diese Werte finden Sie auf Ihrer Projektseite in Ihrem Video API-Konto. Falls Sie noch keinen Heroku-Account haben, müssen Sie sich registrieren (das ist kostenlos).

Möchtest du dir den Code ansehen? Über die Schaltfläche oben wird der Servercode aus der Lernen mit OpenTok PHP GitHub-Repo. Besuchen Sie das Repo, um den Code sowie die zusätzliche Dokumentation einzusehen – Sie können das Repo sogar forken und vor der Bereitstellung Änderungen vornehmen.

Bevorzugen Sie Node.js? Besuchen Sie die Lernen mit OpenTok Node Repo für dieselbe Funktionalität mit Node.js (einschließlich einer Schaltfläche zum Bereitstellen auf Heroku).

Sobald der Server auf Heroku bereitgestellt ist, müssen Sie Ihrem Projekt etwas Code hinzufügen, um die Anmeldedaten vom Server abzurufen. Der Code sollte eine HTTP-GET-Anfrage an https://YOURAPPNAME.herokuapp.com/session. Der Hauptteil der Antwort besteht aus JSON-Daten, die Eigenschaften enthalten, die den OpenTok-API-Schlüssel, die Sitzungs-ID und ein Token definieren:


{
    "apiKey": "8675309",
    "sessionId": "2_MX20NTMyODc3Mn5...",
    "token": "eyJhbG..."
}

Server-Option 2 – Komplette Neuerstellung mithilfe der Server-SDKs

Option 1 nutzt REST-Endpunkte zur Übertragung von Anmeldedaten an den Client, doch dies ist nur eine von vielen Möglichkeiten, einen Server mit OpenTok zu implementieren. Wenn Sie ein höheres Maß an Anpassung wünschen, können Sie sich die Dokumentation von OpenTok ansehen. Dokumentation zum Server-SDK für die Serversprache Ihrer Wahl (verfügbar für PHP, Node.js, Java, .NET, Python und Rubinrot). Die Dokumentation behandelt den Einrichtungsprozess und die verschiedenen Methoden, die Sie zum Generieren von Sitzungen und Tokens benötigen, sowie weitere serverseitige Funktionen.