Comment passer des appels Video avec SwiftUI

Cet article a été mis à jour en mars 2025

Dans ce tutoriel, vous utiliserez le SDK Vonage Video Client SDK pour iOS pour créer un chat vidéo personnalisé dans SwiftUI.

Conditions préalables

• A Compte API Vonage.

• Xcode 12 et Swift 5 ou supérieur.

Créer un projet API Video de Vonage

Ouvrez votre tableau de bord tableau de bord API de Vonage et créez une nouvelle Applications Vonage. Vous pouvez l'appeler comme vous le souhaitez, mais activez Video sous les capacités, puis cliquez sur générer une nouvelle application. Une fois l'application créée, copiez l'ID de l'application. Ensuite visitez le aire de jeu Video de Vonage et créez une nouvelle session :

1. Assurez-vous que l'onglet "Créer une nouvelle session" est sélectionné en haut.

2. Sélectionnez "Oui" sous "Disposer d'un identifiant d'application spécifique ?"

3. Collez l'identifiant de l'application que vous avez généré précédemment dans la case "Identifiant de l'application" qui apparaît.

4. Laissez tout le reste tel quel et cliquez sur "Créer une session".

5. Sur la page suivante, notez l'"ID SESSION".

6. Cliquez sur le bouton "Connect" en haut de la page.

7. Développez la section "Session and token info" en haut.

8. Notez le "TOKEN" qui a été généré.

Création de l'application iOS

L'étape suivante consiste à faire en sorte que l'application iOS soit configurée. Une fois l'application créée, vous devez installer le Client SDK Video et demander les autorisations pour le microphone et la caméra.

Créer un projet Xcode

Pour commencer, ouvrez Xcode et créez un nouveau projet en allant dans Fichier > Nouveau > Projet. Sélectionnez iOS comme plateforme et App comme modèle et donnez-lui un nom.

Sélectionnez SwiftUI pour l'interface, SwiftUI App pour le cycle de vie et Swift pour le langage. Enfin, indiquez l'emplacement où vous souhaitez enregistrer votre projet.

Installer le Client SDK

Maintenant que vous avez créé le projet, vous pouvez ajouter le Client Video SDK en tant que dépendance. Fermez votre projet Xcode et naviguez vers l'emplacement où vous avez enregistré le projet dans votre terminal et exécutez les commandes suivantes :

1. Exécutez la commande pod init pour créer un nouveau fichier pod pour votre projet.

2. Ouvrez le Podfile dans Xcode en utilisant open -a Xcode Podfile.

3. Mettre à jour le Podfile pour avoir OTXCFramework comme dépendance.

# Uncomment the next line to define a global platform for your project
# platform :ios, '12.0'

target 'VideoChat' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for VideoChat
  pod 'OTXCFramework'

end

1. Installer le SDK en utilisant pod install.

2. Ouvrez le nouvel espace de travail xcworkspace dans Xcode en utilisant open VideoChat.xcworkspace.

Permissions

Étant donné que l'application utilisera le microphone et la caméra pour le Video chat, vous devez ajouter des descriptions expliquant pourquoi vous avez besoin de ces autorisations, qui s'afficheront dans une invite lors de l'exécution de l'application.

Modifier le Info.plist fichier. Le fichier Info.plist est un fichier qui contient toutes les métadonnées nécessaires à l'application. Ajoutez une nouvelle entrée au fichier en passant votre souris sur la dernière entrée de la liste et cliquez sur le petit bouton + qui apparaît. Dans la liste déroulante, choisissez Privacy - Microphone Usage Description et ajoutez Microphone access required to video chat pour sa valeur. Répétez les étapes pour Privacy - Camera Usage Description.

Le Client SDK Video

Le Client SDK Video utilise les informations d'identification que vous avez créées dans le tableau de bord Video API pour se connecter aux serveurs de Vonage.

Connexion du Client SDK

Créez un nouveau fichier appelé OpenTokManager.swift en allant dans Fichier > Nouveau fichier (CMD + N) et ajoutez les éléments suivants, en remplaçant les chaînes vides par vos informations d'identification :

import OpenTok

final class OpenTokManager: NSObject, ObservableObject {
    // Replace with your Vonage Application ID
    private let kAppId = ""
    // Replace with your generated session ID
    private let kSessionId = ""
    // Replace with your generated token
    private let kToken = ""

    private lazy var session: OTSession = {
        return OTSession(apiKey: kAppId, sessionId: kSessionId, delegate: self)!
    }()

    private lazy var publisher: OTPublisher = {
        let settings = OTPublisherSettings()
        settings.name = UIDevice.current.name
        return OTPublisher(delegate: self, settings: settings)!
    }()
    
    private var subscriber: OTSubscriber?
    
    @Published var pubView: UIView?
    @Published var subView: UIView?
    @Published var error: OTErrorWrapper?
}

Outre les informations d'identification, il existe des variables pour une session, l'éditeur et abonné. Comme indiqué précédemment, vous pouvez considérer une session comme une salle à laquelle les clients se connectent ; le SDK dispose de la classe OTSession pour cela. Les éditeurs, OTPublisherpermettent au client de publier des fichiers audio et vidéo lorsqu'il est connecté à une session. Abonnés, OTSubscriberpermettent au client de s'abonner aux fichiers audio et vidéo des autres clients de la session. Il existe également des variables utilisant l'enveloppe de propriété @Published qui permet à la classe OpenTokManager communiquera plus tard avec le code de la vue.

Maintenant que les propriétés sont en place, ajoutez les fonctions suivantes à la classe OpenTokManager les fonctions suivantes :

import OpenTok

final class OpenTokManager: NSObject, ObservableObject {
    ...

    public func setup() {
        doConnect()
    }
    
    private func doConnect() {
        var error: OTError?
        defer {
            processError(error)
        }
        session.connect(withToken: kToken, error: &error)
    }
    
    private func doPublish() {
        var error: OTError?
        defer {
            processError(error)
        }
        
        session.publish(publisher, error: &error)
        
        if let view = publisher.view {
            DispatchQueue.main.async {
                self.pubView = view
            }
        }
    }
    
    private func doSubscribe(_ stream: OTStream) {
        var error: OTError?
        defer {
            processError(error)
        }
        subscriber = OTSubscriber(stream: stream, delegate: self)
        session.subscribe(subscriber!, error: &error)
    }
    
    private func cleanupSubscriber() {
        DispatchQueue.main.async {
            self.subView = nil
        }
    }
    
    private func cleanupPublisher() {
        DispatchQueue.main.async {
            self.pubView = nil
        }
    }
    
    private func processError(_ error: OTError?) {
        if let err = error {
            DispatchQueue.main.async {
                self.error = OTErrorWrapper(error: err.localizedDescription)
            }
        }
    }
}

La fonction doConnect connecte le client à la session, doPublish commence à publier, doSubscribe commence à s'abonner. Ensuite, il y a des fonctions pour nettoyer l'abonné (cleanupSubscriber) et de l'éditeur (cleanupPublisher) lorsque le client se déconnecte de l'un ou l'autre, suivies d'une fonction pour gérer les erreurs (processError).

LeOTSessionDelegate

Le OTSessionDelegate permet au Video Client SDK de vous communiquer les modifications apportées à la session. Ajouter une extension dans le même fichier :

extension OpenTokManager: OTSessionDelegate {
    func sessionDidConnect(_ session: OTSession) {
        print("Session connected")
        doPublish()
    }
    
    func sessionDidDisconnect(_ session: OTSession) {
        print("Session disconnected")
    }
    
    func session(_ session: OTSession, didFailWithError error: OTError) {
        print("session Failed to connect: \(error.localizedDescription)")
    }
    
    func session(_ session: OTSession, streamCreated stream: OTStream) {
        print("Session streamCreated: \(stream.streamId)")
        doSubscribe(stream)
    }
    
    func session(_ session: OTSession, streamDestroyed stream: OTStream) {
        print("Session streamDestroyed: \(stream.streamId)")
        if let subStream = subscriber?.stream, subStream.streamId == stream.streamId {
            cleanupSubscriber()
        }
    }
}

Lorsque la session se connecte, doPublish est appelée, lorsqu'un flux est créé doSubscribe est appelé et lorsque le flux est détruit cleanupSubscriber est appelé.

LeOTPublisherDelegate

Le OTPublisherDelegate est la façon dont le Client Video SDK vous communique les modifications apportées à la publication d'une session. Ajouter une extension dans le même fichier :

extension OpenTokManager: OTPublisherDelegate {
    func publisher(_ publisher: OTPublisherKit, streamCreated stream: OTStream) {
        print("Publishing")
    }
    
    func publisher(_ publisher: OTPublisherKit, streamDestroyed stream: OTStream) {
        cleanupPublisher()
        if let subStream = subscriber?.stream, subStream.streamId == stream.streamId {
            cleanupSubscriber()
        }
    }
    
    func publisher(_ publisher: OTPublisherKit, didFailWithError error: OTError) {
        print("Publisher failed: \(error.localizedDescription)")
    }
}

De la même manière que pour le OTSessionDelegate lorsque le flux est détruit, cleanupPublisher est appelé, et cleanupSubscriber s'il existe un abonnement actif à un flux.

LeOTSubscriberDelegate

Le OTSubscriberDelegate est la façon dont le Client SDK Video communique les changements en s'abonnant à une session en retour. Ajouter une extension dans le même fichier :

extension OpenTokManager: OTSubscriberDelegate {
    
    func subscriberDidConnect(toStream subscriberKit: OTSubscriberKit) {
        if let view = subscriber?.view {
            DispatchQueue.main.async {
                self.subView = view
            }
        }
    }
    
    func subscriber(_ subscriber: OTSubscriberKit, didFailWithError error: OTError) {
        print("Subscriber failed: \(error.localizedDescription)")
    }
}

De la même manière que pour la publication dans une session, si l'abonnement est réussi, un objet UIView objet. Dans le cas de subscriberDidConnect l'objet de vue renvoyé est celui de l'abonné.

Création de l'interface utilisateur du Video Chat

Une fois la classe OpenTokManager terminée, vous pouvez maintenant construire l'interface utilisateur. Le Video Client SDK vous donne des objets pour les vues de l'éditeur et de l'abonné UIView pour les vues publisher et subscriber qui ne peuvent pas être utilisées directement dans SwiftUI. Le protocole UIViewRepresentable permet de passer d'un objet UIView à un objet View pour SwiftUI. Dans le fichier ContentView.swift ajoutez les structures suivantes :

struct OTErrorWrapper: Identifiable {
    var id = UUID()
    let error: String
}

struct OTView: UIViewRepresentable {
    @State var view: UIView
    
    func makeUIView(context: Context) -> UIView {
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        DispatchQueue.main.async {
            self.view = uiView
        }
    }
}

La structure OTView qui est conforme à la norme UIViewRepresentable a pour propriété un objet UIView comme propriété. Cette vue est renvoyée lorsque le système appelle makeUIView. Puisque le cycle de vie des vues dans SwiftUI est contrôlé par le système, vous devez également implémenterupdateUIViewpour gérer cela. La structureOTErrorWrapperpermet à l'erreur de se conformer àIdentifiablece qui est nécessaire pour utiliser les alertes de SwiftUI.

Ensuite, remplacez la ContentView par ce qui suit :

struct ContentView: View {
    @ObservedObject var otManager = OpenTokManager()
    
    var body: some View {
        VStack {
            otManager.pubView.flatMap { view in
                OTView(view: view)
                    .frame(width: 200, height: 200, alignment: .center)
            }.cornerRadius(5.0)
            otManager.subView.flatMap { view in
                OTView(view: view)
                    .frame(width: 200, height: 200, alignment: .center)
            }.cornerRadius(5.0)
        }
        .alert(item: $otManager.error, content: { error -> Alert in
            Alert(title: Text("OpenTok Error"), message: Text(error.error), dismissButton: .default(Text("Ok")))
        })
        .animation(.default)
        .onAppear(perform: {
            otManager.setup()
        })
    }
}

Ce code ajoute une propriété pour une instance de la classe OpenTokManager de la classe précédente. Puisque les vues que OpenTokManager est en train de publier sont optionnelles, .flatmap est utilisé. Ainsi, lorsque les vues sont nulles, elles sont ignorées, et lorsqu'il y a une valeur, elles sont déballées. Si la classe OpenTokManager publie une erreur, l'alerte s'affichera automatiquement puisqu'elle surveille les changements sur la valeur publiée. .error publiée.

Si vous construisez et exécutez le projet, vous devriez maintenant être en mesure de démarrer un chat vidéo ! Vous pouvez utiliser un autre appareil ou le Video API Playground pour vous connecter à la session depuis votre ordinateur portable.

Quelle est la prochaine étape ?

Le projet achevé est disponible sur GitHubet vous pouvez en savoir plus sur l'API Video de Vonage en consultant notre documentation.