Configurer un client iOS de base (Swift)

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 Swift. Il existe également un tutoriel dont le code est écrit en Objectif-C.

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 du client iOS Swift dans la section Chat vidéo de base de notre Exemple d'application Swift 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 Swift comme langage pour le code de l'application.

  4. Sélectionner Storyboard en tant qu'interface utilisateur 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 :

    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. Ouvrez le répertoire racine de votre projet dans le Terminal et 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.swift et, au début du fichier, ajoutez une ligne pour importer la bibliothèque OpenTok :

    import UIKit import OpenTok

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

    // Replace with your OpenTok API key var kApiKey = "" // Replace with your generated session ID var kSessionId = "" // Replace with your generated token var kToken = ""

    Ajouter ces lignes avant le class ViewController déclaration.

  2. Ajuster le code en codant en dur les valeurs des kApiKey, kSessionId et kToken.

    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 :

    class ViewController: UIViewController var session: OTSession?

    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:

    override func viewDidLoad() { super.viewDidLoad() connectToAnOpenTokSession() } func connectToAnOpenTokSession() { session = OTSession(apiKey: kApiKey, sessionId: kSessionId, delegate: self) var error: OTError? session?.connect(withToken: kToken, error: &error) if error != nil { print(error!) } }

    Les OTSession() prend trois paramètres :

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

    Les 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() 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. Nous allons maintenant implémenter les méthodes du protocole `OTSessionDelegate`. Ajoutez le code suivant à la fin du fichier `ViewController.swift`, après la parenthèse fermante de la classe `ViewController` :

    // MARK: - OTSessionDelegate callbacks extension ViewController: OTSessionDelegate { func sessionDidConnect(_ session: OTSession) { print("The client connected to the OpenTok session.") } func sessionDidDisconnect(_ session: OTSession) { print("The client disconnected from the OpenTok session.") } func session(_ session: OTSession, didFailWithError error: OTError) { print("The client failed to connect to the OpenTok session: \(error).") } func session(_ session: OTSession, streamCreated stream: OTStream) { print("A stream was created in the session.") } func session(_ session: OTSession, streamDestroyed stream: OTStream) { print("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 sessionDidConnect(_:) est appelée.

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

    • Lorsque le client se déconnecte de la session OpenTok, la fonction sessionDidDisconnect(_:) est appelée.

    • Lorsqu'un autre client publie un flux vers la session OpenTok.

    • Lorsqu'un autre client cesse de diffuser un flux vers la session OpenTok.

    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 sessionDidConnect(_:) méthode permettant d'afficher des informations 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 :

    class ViewController: UIViewController { var session: OTSession? var publisher: OTPublisher?

    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 :

    func sessionDidConnect(_ session: OTSession) { print("The client connected to the OpenTok session.") let settings = OTPublisherSettings() settings.name = UIDevice.current.name guard let publisher = OTPublisher(delegate: self, settings: settings) else { return } var error: OTError? session.publish(publisher, error: &error) guard error == nil else { print(error!) return } guard let publisherView = publisher.view else { return } let screenBounds = UIScreen.main.bounds publisherView.frame = CGRect(x: screenBounds.width - 150 - 20, y: screenBounds.height - 150 - 20, width: 150, height: 150) view.addSubview(publisherView) }

    Lorsque l'application se connecte à une session, elle initialise une instance de l'objet `OTPublisher`, défini dans le SDK OpenTok pour iOS. Le constructeur prend deux paramètres : l'objet qui implémente le protocole `OTPublisherDelegate` et un settings objet.

    Le code transmet ensuite l'objet OTPublisher en tant que paramètre de la fonction session.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. Nous allons maintenant implémenter les méthodes du protocole `OTPublisherDelegate`. Ce protocole comprend des méthodes permettant de gérer les événements liés à l'éditeur. Ajoutez le code suivant à la fin du fichier `ViewController.swift`, après la parenthèse fermante de l'extension `OTSessionDelegate` :

    // MARK: - OTPublisherDelegate callbacks extension ViewController: OTPublisherDelegate { func publisher(_ publisher: OTPublisherKit, didFailWithError error: OTError) { print("The publisher failed: \(error)") } }

    • Si le client ne parvient pas à publier vers la session OpenTok, un objet OTError est transmis à la 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 publisher à la classe ViewController :

    class ViewController: UIViewController { var session: OTSession? var publisher: OTPublisher? var subscriber: OTSubscriber?

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

    func session(_ session: OTSession, streamCreated stream: OTStream) { subscriber = OTSubscriber(stream: stream, delegate: self) guard let subscriber = subscriber else { return } var error: OTError? session.subscribe(subscriber, error: &error) guard error == nil else { print(error!) return } guard let subscriberView = subscriber.view else { return } subscriberView.frame = UIScreen.main.bounds view.insertSubview(subscriberView, at: 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. Nous allons maintenant implémenter les méthodes du protocole `OTSubscriberDelegate`. Ce protocole comprend des méthodes permettant de gérer les événements liés à l'abonné. Ajoutez le code suivant à la fin du fichier `ViewController.swift`, après la parenthèse fermante de l'extension `OTPublisherDelegate` :

    // MARK: - OTSubscriberDelegate callbacks extension ViewController: OTSubscriberDelegate { public func subscriberDidConnect(toStream subscriber: OTSubscriberKit) { print("The subscriber did connect to the stream.") } public func subscriber(_ subscriber: OTSubscriberKit, didFailWithError error: OTError) { print("The subscriber failed to connect to the stream.") } }

    • Lorsque le client se connecte à la session OpenTok, le subscriberDidConnect(_:) est appelée.

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

Félicitations ! Vous avez terminé le tutoriel "Configurer un client iOS de base (Swift)".
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 vonage-ios-sdk-exemples-swift 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 PHP 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.

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 :

override func viewDidLoad() { super.viewDidLoad() let configuration = URLSessionConfiguration.default let session = URLSession(configuration: configuration) let url = URL(string: <#https://YOURAPPNAME.herokuapp.com/session#>) let dataTask = session.dataTask(with: url!) { (data: Data?, response: URLResponse?, error: Error?) in guard error == nil, let data = data else { print(error!) return } let dict = try! JSONSerialization.jsonObject(with: data, options: .allowFragments) as? [AnyHashable: Any] kApiKey = dict?["apiKey"] as? String ?? "" kSessionId = dict?["sessionId"] as? String ?? "" kToken = dict?["token"] as? String ?? "" self.connectToAnOpenTokSession() } 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.