Configurer un client iOS de base (Objective-C)

Ce tutoriel vous guidera à travers les différentes étapes de la configuration d'un client iOS basique utilisant la Video API de 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 s'exécute sur l'appareil iOS 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 Les bases de Video API.

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

Remarque : Le code de ce tutoriel est écrit en Objective-C. Il existe également un tutoriel dont le code est écrit en Swift.

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

Temps de réalisation estimé : 25 minutes

Vous voulez sauter ce tutoriel ? Vous pouvez accéder au code client iOS Objective-C dans la section Chat vidéo de base de notre Exemple d'application iOS 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 :

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

  1. Ouvrez Xcode et créez un nouveau projet.

  2. Sélectionner Application à vue unique comme modèle.

  3. Sélectionner Objectif-C comme langage pour le code de l'application.

Étape 2 : Ajout de la bibliothèque OpenTok

Suivez les étapes ci-dessous pour utiliser CocoaPods afin d'ajouter la bibliothèque OpenTok et ses dépendances à votre application. Si vous préférez ne pas utiliser CocoaPods, suivez ces instructions pour l'utilisation du SDK.

  1. Dans le Terminal, naviguez jusqu'au répertoire racine de votre projet et entrez ce qui suit :

    pod init

    Cette opération crée un fichier Podfile à la racine du répertoire de votre projet.

  2. Modifiez le fichier Podfile et ajoutez la ligne suivante après le commentaire qui dit # Pods for [YourProjectName] (Le fichier pod ne sera pas visible dans votre projet XCode, vous devrez donc l'ouvrir directement à partir du dossier du projet) :

    pod 'OpenTok'

  3. Enregistrer les modifications dans le fichier Podfile.

  4. Dans le Terminal, dans le répertoire racine de votre projet, tapez :

    pod install

  5. Fermez votre projet dans Xcode. Rouvrez ensuite votre projet en double-cliquant sur le nouveau fichier .xcworkspace dans le Finder (dans le répertoire racine de votre projet).

Pour l'accès à la caméra et au microphone, vous devez modifier le fichier Info.plist :

  1. Dans le volet de navigation de gauche de Xcode, cliquez sur le fichier de projet (portant le nom de votre projet) pour ouvrir le volet central dédié au projet.

    À gauche du Général dans le panneau du projet, vous devriez voir le nom de votre projet. Si le nom est différent de celui de votre projet (par exemple [VotreNomDeProjet]Tests), cliquez dessus et définissez la cible sur le nom de votre projet.

  2. Dans le tableau de bord, passez à l'onglet Info.

  3. Développez la section Propriétés de la cible iOS personnalisée si elle est réduite.

  4. Passez la souris sur n'importe quelle clé et cliquez sur le bouton + pour ajouter une nouvelle clé. Ajouter une Privacy - Camera Usage Description et lui attribuer la chaîne suivante :

    $(PRODUCT_NAME) uses the camera.

    Cliquez ensuite sur le bouton + pour ajouter un nouveau Privacy - Microphone Usage Description et lui attribuer la chaîne suivante :

    $(PRODUCT_NAME) uses the microphone.

    L'application affiche ces chaînes lorsqu'elle accède pour la première fois à la caméra et au microphone.

    (Ces fonctionnalités de sécurité ont été ajoutées dans iOS 10.)

Ajoutez la bibliothèque OpenTok au contrôleur de vue.

  • Dans Xcode, ouvrez le fichier ViewController.m et, au début du fichier, ajoutez une ligne pour importer la bibliothèque OpenTok :

    #import "ViewController.h" #import <OpenTok/OpenTok.h>

É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 :

  1. Commencez par copier le bloc de code suivant et ajoutez-le à votre fichier ViewController.m :

    // Replace with your OpenTok API key static NSString* kApiKey = @""; // Replace with your generated session ID static NSString* kSessionId = @""; // Replace with your generated token static NSString* kToken = @"";

    Ajouter ces lignes avant le @interface déclaration.

  2. Ajuster le code en codant en dur les valeurs des kApiKey, kSessionId et kToken (à l'intérieur des guillemets vides).

    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 ainsi que 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.

  1. Ajouter un session à la classe ViewController :

    @interface ViewController() @property (nonatomic) OTSession *session; @end

    La classe OTSession est définie dans le SDK OpenTok pour iOS. Elle représente une session OpenTok et comprend des méthodes permettant d'interagir avec cette session.

  2. Ajoutez une méthode permettant d'instancier l'objet OTSession et d'appeler sa méthode [OTSession connectWithToken: error:] méthode. Vous pouvez ensuite l'appeler dans viewDidLoad:

    - (void)viewDidLoad { [super viewDidLoad]; [self connectToAnOpenTokSession]; } - (void)connectToAnOpenTokSession { _session = [[OTSession alloc] initWithApiKey:kApiKey sessionId:kSessionId delegate:self]; NSError *error; [_session connectWithToken:kToken error:&error]; if (error) { NSLog(@"%@", error); } }

    Les [OTSession initWithApiKey:sessionId:delegate:] prend trois paramètres :

    • Votre clé API OpenTok
    • L'identifiant de la session
    • L'objet qui implémente le protocole OTSessionDelegate

    Les [OTSession connectWithToken: error:] Cette méthode permet à l'application cliente de se connecter à 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). La méthode prend deux paramètres :

    • token Il s'agit du jeton d'authentification permettant à ce client de se connecter à la session OpenTok.

    • error est remplacée par un objet OTError si une erreur se produit de manière synchrone lors de l'appel de la méthode.

  3. Modifier la déclaration de l'interface ViewController pour indiquer que la classe implémente l'interface OTSessionDelegate protocole :

    @interface ViewController() <OTSessionDelegate>

    Ensuite, nous allons implémenter les méthodes du protocole OTSessionDelegate. Ajoutez le code suivant à la fin de la classe ViewController (avant la section @end ) :

    # pragma mark - OTSession delegate callbacks - (void)sessionDidConnect:(OTSession*)session { NSLog(@"The client connected to the OpenTok session."); } - (void)sessionDidDisconnect:(OTSession*)session { NSLog(@"The client disconnected from the OpenTok session."); } - (void) session:(OTSession*)session didFailWithError:(OTError*)error { NSLog(@"The client failed to connect to the OpenTok session: (%@)", error); } - (void)session:(OTSession*)session streamCreated:(OTStream *)stream { NSLog(@"A stream was created in the session."); } - (void)session:(OTSession*)session streamDestroyed:(OTStream *)stream { NSLog(@"A stream was destroyed in the session."); }

    Ce protocole comprend des méthodes pour gérer les événements liés à la session :

    • Lorsque le client se connecte à la session OpenTok, le [OTSessionDelegate sessionDidConnect:] est envoyé.

    • Si le client ne parvient pas à se connecter à la session OpenTok, le [OTSessionDelegate session:didFailWithError:] est envoyé.

    • Lorsque le client se déconnecte de la session OpenTok, la fonction [OTSessionDelegate sessionDidDisconnect:] est envoyé.

    • Lorsqu'un autre client publie un flux vers la session OpenTok, le [OTSessionDelegate session:streamCreated:] est envoyé.

    • Lorsqu'un autre client cesse de diffuser un flux vers la session OpenTok, le [OTSessionDelegate session:streamDestroyed:] est envoyé.

    Pour l'instant, l'application affiche 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, alors le [OTSessionDelegate sessionDidConnect:] doit s'afficher sur la console de débogage.

Étape 5 : 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 de l'appareil :

  1. Ajouter un publisher à la classe ViewController :

    @interface ViewController() <OTSessionDelegate> @property (nonatomic) OTSession *session; @property (nonatomic) OTPublisher *publisher; @end

    La classe OTPublisher est définie dans le SDK OpenTok pour iOS. Elle utilise la caméra et le microphone de l'appareil pour diffuser une session OpenTok en continu.

  2. Modifier la mise en œuvre de la sessionDidConnect(_:) pour inclure le code permettant de publier un flux dans la session :

    - (void)sessionDidConnect:(OTSession*)session { OTPublisherSettings *settings = [[OTPublisherSettings alloc] init]; _publisher = [[OTPublisher alloc] initWithDelegate:self settings:settings]; OTError *error = nil; [_session publish:_publisher error:&error]; if (error) { NSLog(@"Unable to publish (%@)", error.localizedDescription); return; } CGSize screenSize = [UIScreen mainScreen].bounds.size; CGRect rect = CGRectMake(screenSize.width - 150 - 20, screenSize.height - 150 - 20, 150, 150); [_publisher.view setFrame:rect]; [self.view addSubview:_publisher.view]; }

    Lorsque l'application se connecte à une session, elle initialise une instance de l'OTPublisher, définie dans le SDK OpenTok pour iOS. Le [OTPublisher initWithDelegate:] prend deux paramètres : l'objet qui implémente le protocole OTPublisherDelegate et un paramètre settingsobjet.

    Le code transmet ensuite l'objet OTPublisher en tant que paramètre de la fonction [OTSession publish:] méthode. Cette méthode diffuse un flux audio-vidéo vers la session OpenTok, en utilisant la caméra et le microphone de l'appareil iOS. (Notez que dans le simulateur Xcode, le SDK OpenTok pour iOS utilise une vidéo de test lors de la diffusion d'un flux.)

    L'objet OTPublisher dispose d'un view propriété, qui est un objet UIView. Cette vue affiche la vidéo capturée par la caméra de l'appareil. Le code ajoute cette vue en tant que sous-vue de la vue du ViewController principal.

  3. Modifier la déclaration de l'interface ViewController pour indiquer que la classe implémente l'interface OTPublisherDelegate protocole :

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate>

    Ensuite, nous allons implémenter les méthodes du protocole OTSessionDelegate. Ajoutez le code suivant à la fin de la classe ViewController (avant la section @end ) :

    # pragma mark - OTPublisher delegate callbacks - (void)publisher:(OTPublisherKit*)publisher didFailWithError:(OTError*) error { NSLog(@"The publisher failed: %@", error); }

    Si le client ne parvient pas à publier vers la session OpenTok, un objet OTError est transmis à la [OTPublisherDelegate publisher:didFailWithError:] méthode.

Déboguez votre application. Si celle-ci parvient à se connecter à la session OpenTok, elle publiera un flux vers cette session et vous verrez la vidéo de l'émetteur s'afficher dans l'application.

Étape 6 : S'abonner aux flux d'autres clients

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

  1. Ajouter un subscriber à la classe ViewController :

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate> @property (nonatomic) OTSession *session; @property (nonatomic) OTPublisher *publisher; @property (nonatomic) OTSubscriber *subscriber; @end

    La classe OTSubscriber est définie dans le SDK OpenTok pour iOS. Elle utilise la caméra et le microphone de l'appareil pour s'abonner à une session OpenTok en streaming.

  2. Modifier la mise en œuvre de la [OTSessionDelegate session: streamCreated] méthode (l'une des fonctions de rappel de l'interface OTSessionDelegate) pour intégrer du code permettant de s'abonner aux flux d'autres clients au sein de la session :

    - (void)session:(OTSession*)session streamCreated:(OTStream *)stream { _subscriber = [[OTSubscriber alloc] initWithStream:stream delegate:self]; OTError *error = nil; [_session subscribe:_subscriber error:&error]; if (error) { NSLog(@"Unable to subscribe (%@)", error.localizedDescription); return; } [_subscriber.view setFrame:[UIScreen mainScreen].bounds]; [self.view insertSubview:_subscriber.view atIndex:0]; }

    Lorsqu'un autre client publie un flux vers une session, cette méthode est appelée et un objet OTStream lui est transmis. La classe OTStream est définie dans le SDK iOS d’OpenTok et représente un flux audio-vidéo dans la session OpenTok. Le code initialise une instance de la classe OTSubscriber, définie dans le SDK iOS d’OpenTok. Le OTSubscriber() Le constructeur prend deux paramètres : l'objet OTStream (correspondant au flux que vous souhaitez visualiser) et l'objet qui implémente le protocole OTSubscriberDelegate.

  3. Modifier la déclaration de l'interface ViewController pour indiquer que la classe implémente l'interface OTSubscriberDelegate protocole :

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate,OTSubscriberDelegate>

    Ensuite, nous allons implémenter les méthodes du protocole OTSessionDelegate. Ajoutez le code suivant à la fin de la classe ViewController (avant la section @end ) :

    # pragma mark - OTSubscriber delegate callbacks - (void)subscriberDidConnectToStream:(OTSubscriberKit *)subscriber { NSLog(@"The subscirber: %@ did connect to the stream", subscriber); } - (void)subscriber:(OTSubscriberKit*)subscriber didFailWithError:(OTError*)error { NSLog(@"subscriber %@ didFailWithError %@", subscriber.stream.streamId, error); }

    • Si le client ne parvient pas à se connecter à la session OpenTok, un objet OTError est transmis à la subscriber(_: didFailWithError:) méthode.

Étape 7 : Lancer l'application

Maintenant que votre code est terminé, vous pouvez lancer l'application dans l'émulateur Xcode. Cela créera une vidéo d'éditeur simulée : comme l'émulateur ne peut pas accéder à votre webcam, la vidéo d'éditeur affichera l'image d'une théière qui tourne à la place du flux de votre caméra.

Pour ajouter un deuxième éditeur (qui apparaîtra comme abonné dans votre émulateur), lancez l'application une deuxième fois sur un appareil iOS connecté ou utilisez la commande OpenTok Playground pour se connecter à la session dans un navigateur web compatible en suivant les étapes ci-dessous :

  1. Aller à OpenTok Playground (vous devez être connecté à votre Account)

  2. Sélectionnez l'option Rejoindre une session existante onglet

  3. 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

  4. Cliquez sur Rejoindre la session

  5. Dans l'écran suivant, cliquez sur Connecterpuis cliquez sur Publier un flux

  6. 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é.

Nous vous félicitons ! Vous avez terminé le tutoriel "Configurer un client iOS de base (Objective-C)".
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 Chat vidéo de base du dossier opentok-ios-sdk-échantillons sur GitHub. Cette version complète ajoute du code pour charger l'ID de session, le jeton et la clé API depuis 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).

Deploy

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 un bouton de déploiement sur Heroku).

Une fois le serveur déployé sur Heroku, vous devrez ajouter quelques lignes à votre code côté client. Au lieu d'appeler connectToAnOpenTokSession directement, vous devrez effectuer un appel réseau vers le chemin d'accès /session sur votre serveur afin de récupérer au préalable des identifiants OpenTok valides.

Copiez le code suivant et utilisez-le pour remplacer viewDidLoad Dans votre fichier ViewController.m :

- (void)viewDidLoad { [super viewDidLoad]; NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration]; NSURLSession *session = [NSURLSession sessionWithConfiguration:configuration]; NSURL *url = [NSURL URLWithString:<#https://YOURAPPNAME.herokuapp.com/session#>]; NSURLSessionDataTask *dataTask = [session dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { if (!error) { NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil]; kApiKey = dict[@"apiKey"]; kSessionId = dict[@"sessionId"]; kToken = dict[@"token"]; [self connectToAnOpenTokSession]; } else { NSLog(@"%@", error); } }]; [dataTask resume]; [session finishTasksAndInvalidate]; }

Vous devrez remplacer https://YOURAPPNAME.herokuapp.com en remplaçant par l'URL réelle de votre application Heroku — vous la trouverez sur la page de votre application sur le site web de Heroku.

Le code ci-dessus envoie une requête à la /session point final (https://YOURAPPNAME.herokuapp.com/session), qui devrait renvoyer une réponse HTTP contenant l'identifiant de session, le jeton et la clé API au format JSON, lesquels sont ensuite affectés aux variables correspondantes.

Le présent /session Le point de terminaison renverra toujours le même identifiant de session, mais générera un nouveau jeton à chaque fois qu'il sera appelé ; ainsi, chaque client recevra un jeton unique.

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.