Configurer un client Windows de base

Ce tutoriel vous guidera pas à pas dans la configuration d'un client Windows de base utilisant la Video API vonage.

Vue d'ensemble

Toutes les Applications qui utilisent l'API Video de Vonage nécessitent à la fois un client et un serveur composant. Le code côté client est celui qui se charge dans l'application Windows de l'utilisateur final et gère la plupart des fonctionnalités d'OpenTok, notamment connexion à la session, l'édition audio-vidéo cours d'eau à la session, et souscrire aux flux d'autres clients. Pour plus d'informations sur les clients, les serveurs et les sessions, voir Notions de base sur OpenTok.

Dans ce tutoriel, vous utiliserez la fonction SDK OpenTok pour Windows, la bibliothèque côté client d'OpenTok pour Windows, qui permet de développer rapidement et facilement une application vidéo interactive en temps réel.

Voici les points qui seront abordés dans ce tutoriel :

Exigences
Étape 1 : Création d'un nouveau projet
Étape 2 : Ajout du SDK OpenTok pour Windows
Étape 3 : Configuration de l'authentification
Étape 4 : Connexion à la session
Étape 5 : Personnalisation de l'interface utilisateur de l'application d'exemple
Étape 6 : Publication d'un flux vers la session
Étape 7 : S'abonner à d'autres flux de clients
Étape 8 : Lancer l'application et créer un programme d'installation
Prochaines étapes
Configuration de votre serveur

Temps de réalisation estimé : 25 minutes

Vous voulez sauter ce tutoriel ? Vous pouvez accéder au code du client Windows dans la section Chat vidéo de base de notre Exemple d'application Windows sur GitHub. Le dépôt comprend un README avec de la documentation pour l'exécution et l'exploration du code.

Exigences

Pour réaliser ce tutoriel, vous aurez besoin de :

Un Account Video API de Vonage valide - si vous n'en avez pas, vous pouvez s'inscrire pour un essai gratuit
Microsoft Visual Studio

Étape 1 : Création d'un nouveau projet

Ouvrez Visual Studio et sélectionnez Nouveau > Projet de la Fichier menu.
Dans le cadre de la Nouveau projet Dans la boîte de dialogue, sélectionnez Fenêtres > Applications WPF (Visual C#), donnez un nom à l'application, puis cliquez sur le bouton OK bouton.

Étape 2 : Ajout du SDK OpenTok pour Windows

Utilisez NuGet pour installer le SDK OpenTok pour Windows, en suivant l'une des méthodes suivantes :

Dans Visual Studio, à partir du menu Outils sélectionner le menu Gestionnaire de paquets NuGet > Gérer les paquets NuGet pour la solutionet rechercher ensuite OpenTok.Client. Attribuez le paquet OpenTok.Client au projet que vous êtes en train de construire.
Dans la console Visual Studio Package Manager, entrez la commande suivante :
Copie
```
Install-Package OpenTok.Client
```
Utilisez les outils de ligne de commande .NET Core pour installer le paquet OpenTok. Exécutez la commande suivante à partir du répertoire de votre projet :
Copie
```
dotnet add package OpenTok.Client
```

Ajoutez les classes OpenTok pour Windows à l'application — dans Visual Studio, ouvrez le fichier MainWindow.xaml.cs fichier. Et ajoutez les déclarations suivantes :

using OpenTok;

Cela permet d'importer les classes du SDK OpenTok pour Windows que l'application va utiliser.

Étape 3 : Configuration de l'authentification

Pour se connecter à une session OpenTok, le client devra disposer de certaines informations d'authentification — un Clé API, ID de la sessionet jeton. Dans une application de production, ces informations d'identification doivent être générées par une application serveur, mais pour aller plus vite, nous allons simplement définir les valeurs de manière statique pour l'instant :

Dans la classe MainWindow, ajoutez quelques variables statiques pour stocker la clé API, l'identifiant de session et le jeton. Nous ajouterons également quelques constantes pour l'identifiant du message de journal et les autorisations :

public partial class MainWindow : Window { public const string API_KEY = ""; public const string SESSION_ID = ""; public const string TOKEN = "";
Ajuster le code en codant en dur les valeurs des API_KEY, SESSION_ID et TOKEN.

Pour ce faire, connectez-vous à votre Video API Account, créez un nouveau projet API OpenTok ou utilisez un projet API OpenTok existant, puis rendez-vous sur la page de votre projet et faites défiler vers le bas jusqu'à la section Outils de projet section. À partir de là, vous pouvez générer manuellement un identifiant de session et un jeton. Utilisez la clé API du projet avec l'identifiant de session et le jeton que vous avez générés.

Important : Vous pouvez continuer à récupérer l'identifiant de session et le jeton depuis votre Account pendant les phases de test et de développement, mais avant de passer en production, vous devez configurer un serveur. Nous aborderons ce sujet dans Prochaines étapes à la fin de ce tutoriel.

Pour plus d'informations sur les sessions, les jetons et les serveurs, consultez le site suivant Les bases de Video API.

Étape 4 : Connexion à la session

Nous allons maintenant nous connecter à la session OpenTok. Vous devez effectuer cette opération avant de pouvoir diffuser votre flux audio-vidéo vers la session ou visionner les flux des autres participants.

Ajouter un Session dans la classe MainWindow (juste après la dernière ligne que vous avez ajoutée dans la section Étape 3) :

Session Session;

La classe `Session` est définie dans le SDK Windows d'OpenTok. Elle représente une session OpenTok et comprend des méthodes permettant d'interagir avec celle-ci.
Dans le cadre de la MainWindow() ajouter les lignes suivantes, après la fonction de construction InitializeComponent() méthode :

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

Ce code utilise le Session() pour instancier un objet Session. Le constructeur prend trois paramètres :
- Le contexte Windows associé à cette application
- L'identifiant de session OpenTok
- Le jeton
Les lignes suivantes ajoutent des gestionnaires d'événements pour les événements liés à la session. (Nous les mettrons en œuvre dans les prochaines étapes).

Les Session.Connect() de la méthode session Cet objet connecte l'application cliente à la session OpenTok. Vous devez vous connecter avant d'envoyer ou de recevoir des flux audio-vidéo dans la session (ou avant d'interagir de quelque manière que ce soit avec la session). Le Connect() Cette méthode prend un paramètre : le jeton d'authentification permettant à ce client de se connecter à la session OpenTok.
Nous allons ensuite mettre en œuvre les méthodes de l'interface SessionListener. Ajoutez le code suivant à la fin de la classe MainWindow (avant le crochet de fermeture de la classe) :

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."); }
- Lorsque le client se connecte à la session OpenTok, le Session.Connected est levé (et l'événement Session_Connected() est appelé).
- Lorsque le client se déconnecte de la session OpenTok, la fonction Session.Disconnected est envoyé (et l'événement Session_Disconnected() est appelée).
- Si le client ne parvient pas à se connecter à la session OpenTok, le Session.Error est envoyé (et l'événement Session_Error() est appelée).
- Lorsqu'un autre client publie un flux vers la session OpenTok, le Session.StreamReceived est levé (et l'événement Session_StreamReceived() est appelé).
Pour l'instant, l'application écrit dans la console du débogueur lorsque l'un de ces événements se produit.

Déboguez votre application. Si l'application parvient à se connecter à la session OpenTok, le Session_Connected() enregistre les données dans la console de débogage.

Étape 5 : Personnalisation de l'interface utilisateur de l'application d'exemple

Par défaut, le SDK OpenTok pour Windows affiche les vidéos que vous publiez et auxquelles vous vous abonnez à l'aide de la classe `VideoRenderer` (définie dans le SDK OpenTok pour Windows). Cette classe affiche les vidéos dans un contrôle Windows Presentation Framework.

Pour cet exemple d'application, définissez les contrôles cibles dans le fichier MainWindow.xaml de l'application. Dans Visual Studio, ouvrez ce fichier et modifiez son XML pour ajouter une référence au contrôle OpenTok et d'ajouter deux VideoRenderer à l'objet principal Grid le contrôle de l'application :

Étape 6 : Publication d'un flux vers la session

Lorsque l'application se connecte à la session OpenTok, nous souhaitons qu'elle diffuse un flux audio-vidéo vers la session, en utilisant la caméra et le microphone :

Ajouter un Publisher dans la classe MainWindow (après la déclaration de la variable membre Session ) :

Publisher Publisher;

La classe `Publisher` est définie dans le SDK Windows d'OpenTok.
Modifier le MainWindow() pour inclure du code permettant d'initialiser un capteur vidéo pour l'éditeur et d'utiliser ce capteur vidéo dans un objet Publisher :

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

Le code utilise le Publisher() pour instancier un objet Publisher. Deux paramètres sont transmis au constructeur : le contexte de l'application Windows et le moteur de rendu vidéo (défini dans le fichier MainApplication.xaml).
Modifier le Session_Connected() pour inclure le code permettant de publier un flux dans la session :

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

Lorsque l'application se connecte à la session (et que le fichier SessionConnected est levé), l'événement Session_Connected appelle le gestionnaire d'événement Session.Publish() méthode, en lui transmettant l'objet Publisher. Cela permet à l'application de publier un flux audio-vidéo vers la session OpenTok, en utilisant le microphone et la caméra du dispositif de capture vidéo comme source audio et source vidéo.

Déboguez votre application. L'application affiche l'aperçu vidéo local de l'éditeur et, lorsqu'elle se connecte avec succès à la session OpenTok, elle publie un flux vers cette session.

Remarque : Cette application utilise le capteur vidéo par défaut, qui utilise la caméra et le microphone par défaut du système comme sources vidéo et audio pour le flux publié.Vous pouvez implémenter des capteurs vidéo et des moteurs de rendu vidéo personnalisés en créant des classes qui implémentent les interfaces IVideoCapturer et IVideoRenderer, définies dans le SDK OpenTok pour Windows. Pour obtenir des exemples de code, consultez les applications d'exemple CustomVideoRenderer et ScreenSharing dans le vonage-video-windows-sdk-samples sur GitHub.

Étape 7 : S'abonner à d'autres flux de clients

Nous voulons que les clients puissent souscrire à (ou voir) les flux d'autres clients dans la session :

Modifier la mise en œuvre de la Session_StreamReceived() pour inclure du code permettant de s'abonner aux flux des autres clients de la session :

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

Lorsqu'un autre client publie un flux dans une session, le fichier Session.StreamReceived Le message est envoyé et cette méthode est appelée. Un objet Stream, défini dans le SDK Windows d'OpenTok, est transmis au gestionnaire d'événements. Il représente un flux audio-vidéo dans la session OpenTok.

Le code initialise une instance de la classe `Subscriber`, définie dans le SDK Windows d'OpenTok. La classe `Subscriber` définit un objet qu'un client utilise pour s'abonner (afficher) aux flux publiés par d'autres clients.

Les Subscriber() prend trois paramètres :

Le contexte de l'application Windows.
L'objet Stream.
Le moteur de rendu de l'objet abonné. Dans cette application, le moteur de rendu est l'objet SubscriberVideo défini dans le fichier MainWindow.xaml.

Étape 8 : Lancer l'application et créer un programme d'installation

Pour ajouter un second flux à la session (qui s'affichera en tant qu'abonné dans votre émulateur), exécutez l'application une seconde fois sur un autre appareil Windows ou utilisez la commande OpenTok Playground pour se connecter à la session dans un navigateur web compatible en suivant les étapes ci-dessous :

Aller à OpenTok Playground (vous devez être connecté à votre Account)
Sélectionnez l'option Rejoindre une session existante onglet
Copiez l'identifiant de session que vous avez utilisé dans votre fichier ViewController.m et collez-le dans le fichier ID de la session champ de saisie
Cliquez sur Rejoindre la session
Dans l'écran suivant, cliquez sur Connecterpuis cliquez sur Publier un flux
Vous pouvez ajuster les options de l'éditeur (non obligatoire), puis cliquez sur Continuer pour se connecter et commencer à publier et à s'abonner

À ce stade, vous devriez voir le flux publié par votre webcam ainsi que le flux publié par l'émulateur. Si vous revenez à l'émulateur, vous devriez également voir le nouvel éditeur s'afficher sur l'écran émulé.

Lorsque vous créez un programme d'installation pour votre application, ajoutez Visual C++ Redistributable pour Visual Studio 2015 en tant que package d'installation. Utilisez la version x86, la version x64 ou les deux, en fonction de l'architecture de votre application.

Vous avez terminé le tutoriel "Configurer un client Windows de base". Vous avez terminé le tutoriel "Configurer un client Windows de base".
Vous pouvez continuer à jouer avec le code que vous avez développé ici et l'ajuster pour le côté client de votre application, mais gardez à l'esprit que vous devrez mettre en œuvre la méthode composant du serveur de votre application avant de la mettre en production (voir Configuration de votre serveur ci-dessous).

Vous pouvez consulter une version complète de cet exemple d'application dans la section BasicVideoChat du dossier vonage-video-windows-sdk-samples sur GitHub. Cette version complète ajoute du code pour charger l'ID de session, le jeton et la clé API à partir d'un service web (au lieu d'utiliser des valeurs codées en dur).

Prochaines étapes

Une fois que vous aurez terminé cette étape, poursuivez le développement et l'amélioration de votre application OpenTok à l'aide des ressources utiles suivantes :

Configuration de votre serveur

Dans le tutoriel ci-dessus, nous vous avons demandé de enregistrer vos identifiants d'authentification en dur. Toutefois, pour une application en production, le sessionId et token Les valeurs présentes dans votre code doivent être générées par votre serveur d'applications et transmises au client. Voici quelques raisons pour lesquelles il vaut mieux éviter d'utiliser des identifiants codés en dur dans votre application de production :

Les jetons expirent au bout d'un certain temps (déterminé lors de leur génération) ; il est donc nécessaire d'en générer régulièrement de nouveaux.
Vous ne pourrez pas créer de nouvelles sessions de manière dynamique ; par conséquent, tous les utilisateurs de votre application se retrouveront confinés dans une seule et même « salle ».

Vous pouvez continuer à tester votre application avec des valeurs codées en dur, mais lorsque vous serez prêt à mettre en place un serveur, plusieurs solutions s'offrent à vous :

Option serveur n° 1 — Lancer un serveur REST simple sur Heroku en un seul clic

C'est sans doute le moyen le plus rapide de mettre un serveur en service, mais ses fonctionnalités sont limitées. Il vous suffit de cliquer sur le bouton « Heroku » ci-dessous ; vous serez alors redirigé vers le site web de Heroku et invité à saisir votre clé API OpenTok et votre secret API — vous pouvez retrouver ces informations sur la page de votre projet dans votre Video API Account. Si vous n'avez pas d'account Heroku, vous devrez vous inscrire (c'est gratuit).

Envie de découvrir le code ? Le bouton ci-dessus lance le code du serveur à partir du apprentissage-opentok-php Dépôt GitHub. Rendez-vous sur ce dépôt pour consulter le code ainsi que la documentation complémentaire ; vous pouvez même créer une branche dérivée du dépôt et y apporter des modifications avant le déploiement.

Vous préférez Node.js ? Visitez le site apprentissage-opentok-node dépôt contenant la même fonctionnalité sous Node.js (avec notamment un bouton de déploiement sur Heroku).

Une fois le serveur déployé sur Heroku, vous devrez ajouter du code à votre projet pour récupérer les identifiants depuis le serveur. Le code doit envoyer une requête HTTP GET vers https://YOURAPPNAME.herokuapp.com/session. Le corps de la réponse est au format JSON et comprend des propriétés définissant la clé API OpenTok, l'identifiant de session et un jeton :


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

Option 2 pour le serveur — Développement à partir de zéro à l'aide des SDK du serveur

L'option 1 utilise des points de terminaison REST pour transmettre les identifiants au client, mais ce n'est qu'une des nombreuses façons de mettre en œuvre un serveur avec OpenTok. Si vous souhaitez bénéficier d'un niveau de personnalisation plus poussé, vous pouvez consulter la documentation d'OpenTok Documentation du SDK serveur pour le langage côté serveur de votre choix (disponible pour PHP, Node.js, Java, .NET, Python et Rubis). La documentation décrit le processus de configuration et les différentes méthodes à utiliser pour générer des sessions et des jetons, ainsi que d'autres fonctionnalités côté serveur.