Guide de migration Twilio (iOS)

Ce guide vous accompagne dans la migration de votre application vidéo Twilio existante vers Vonage Video.

Pour une flexibilité et une polyvalence maximales dans la programmation de votre solution vidéo, le logiciel SDK iOS Video API de Vonage vous couvre.

Si vos besoins vont au-delà des simples fonctions vidéo et incluent des caractéristiques telles que la diffusion, l'intégration SIP, le traitement des médias et les paramètres de flux personnalisables, vous découvrirez que le SDK iOS vidéo de Vonage offre une puissance et une flexibilité inégalées.

Vue d'ensemble

Les API Video de Twilio et de Vonage ont des concepts très similaires. Ce guide de démarrage a pour but de vous aider à migrer votre application vidéo.

L'une des principales différences entre les implémentations vidéo de Twilio et de Vonage est l'utilisation de pièce SIDIl s'agit d'un ID de la session lorsqu'il s'agit de Vonage. Nous verrons comment générer un identifiant de session dans une section ultérieure.

Vous aurez également besoin d'un jeton d'authentification lors de la connexion d'un client à une session active.

Le diagramme ci-dessous illustre les différences architecturales entre la vidéo Twilio et la vidéo Vonage.

Vonage Twilio migraiton illustration 1 Vonage Twilio migraiton illustration 1

Cartographie terminologique Twilio Vonage

Twilio Vonage
Room Session
Participants Subscriber(s) + Publisher(s)
Tracks Stream
RemoteTracks Subscribers(s).stream
LocalTracks Publisher(s).stream

Obtenir les informations d'identification du SDK vidéo

Créer un Compte de développeur pour accéder au portail des développeurs.

Pour commencer à utiliser la vidéo, vous devez créer une application. Vous pouvez suivre le créer une application pour obtenir votre ID de l'application et clé privée.

Installer le SDK

Vous pouvez installer le SDK iOS de Vonage Video par l'intermédiaire de l'option Gestionnaire de paquets Swift ou Cocoapodes:

Utilisation du gestionnaire de paquets Swift

Pour ajouter une dépendance à un paquet à votre projet Xcode, sélectionnez Fichier > Forfaits Swift > Ajouter une dépendance de paquetage et saisissez l'URL du référentiel :

https://github.com/vonage/vonage-video-client-sdk-swift.git

Utiliser les cocoapodes

Lorsque vous ajoutez le SDK à l'aide de CocoaPods, modifiez le fichier Podfile et ajoutez la ligne suivante :

pod 'OTXCFramework'

Enregistrez les modifications dans le fichier Podfile, ouvrez le répertoire racine du projet dans le terminal/ligne de commande et exécutez :

pod install

Cela devrait permettre d'intégrer le SDK vidéo de Vonage et ses dépendances.

Vous pouvez maintenant ajouter le SDK à votre contrôleur de vue. Dans Xcode, ouvrez votre ViewController.swift et, tout en haut du fichier, ajoutez les lignes suivantes pour importer la vidéothèque :

import UIKit
import OpenTok

Authentification

Le SDK vidéo de Vonage utilise des jetons pour authentifier les utilisateurs. Lors de la génération d'un jeton, vous pouvez définir le rôle de l'utilisateur (abonné, éditeur ou modérateur). En option, vous pouvez également assigner une chaîne de métadonnées au jeton (c'est-à-dire pour identifier le client connecté).

Veuillez vous référer à notre Guide de création de jetons pour apprendre à générer des jetons. Les jetons sont générés côté serveur et utilisés côté client. Visitez la page Guides des SDK côté serveur pour en savoir plus.

Créer une session vidéo

A session est comme un chambre. Tous les clients utilisant le même ID de la session pourront communiquer entre eux.

Comme jetons, sessions sont créées côté serveur. Veuillez vous référer à notre Création d'un guide de session pour en savoir plus.

Pour créer une session et générer un jeton, utilisez l'un de nos outils SDK serveur.

Vous pouvez déclarer toutes vos clés en tant que propriétés dans votre fichier ViewController.swift fichier :

// Replace with your Application ID
var kApplicationId = ""
// Replace with your generated session ID
var kSessionId = ""
// Replace with your generated token
var kToken = ""

Se connecter à une session vidéo

Une fois toutes les clés définies, vous pouvez vous connecter à une session vidéo active.

Vous devez effectuer cette opération avant de pouvoir publier votre flux audio-vidéo dans la session ou de voir les flux des autres participants.

Twilio

let twimlParamTo = "to"
let connectOptions: TVOConnectOptions = TVOConnectOptions(accessToken: accessToken) { (builder) in
            builder.params = [twimlParamTo : “{to}”]
        }
TwilioVoice.connect(with: connectOptions, delegate: self)

Vonage

class ViewController: UIViewController
   var session: OTSession?

override func viewDidLoad() {
   super.viewDidLoad()
   connectToAnOpenTokSession()
}

func connectToAnOpenTokSession() {
    // Important: Please note that your Application ID is your API key.
    session = OTSession(apiKey: kApplicationId, sessionId: kSessionId, delegate: self)
    var error: OTError?
    session?.connect(withToken: kToken, error: &error)
    if error != nil {
        print(error!)
    }
}

Écouteurs d'événements

Vonage et Twilio disposent de protocoles de délégation pour vous aider à maintenir l'état d'une session/d'un appel pour tous les participants connectés à une session.

Modifications de la connexion entre la session et la salle

Twilio

// MARK: TVOCallDelegate
func callDidStartRinging(_ call: TVOCall) {
        NSLog("callDidStartRinging:")
}
func callDidConnect(_ call: TVOCall) {
        NSLog("callDidConnect:")
}
func call(_ call: TVOCall, isReconnectingWithError error: Error) {
        NSLog("call:isReconnectingWithError:")
}
func callDidReconnect(_ call: TVOCall) {
        NSLog("callDidReconnect:")
}
func call(_ call: TVOCall, didFailToConnectWithError error: Error) {
        NSLog("Call failed to connect: \(error.localizedDescription)")
}
func call(_ call: TVOCall, didDisconnectWithError error: Error?) {
        NSLog("Call disconnected")
}

Vonage

// MARK: - OTSessionDelegate callbacks
extension ViewController: OTSessionDelegate {
   func sessionDidConnect(_ session: OTSession) {
       print("The client connected to the Vonage Video API session.")
   }
   func sessionDidDisconnect(_ session: OTSession) {
       print("The client disconnected from the Vonage Video API session.")
   }
   func session(_ session: OTSession, didFailWithError error: OTError) {
       print("The client failed to connect to the Vonage Video API 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.")
   }
}

Vidéo d'édition

Lorsqu'un utilisateur est connecté à une session active, il peut publier un flux audio-vidéo dans la session, en utilisant la caméra et le microphone de l'appareil :

Pour ce faire, il suffit d'ajouter une propriété publisher à la classe ViewController :

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

Modifier la mise en œuvre de la OTSessionDelegate.sessionDidConnect(_:) pour inclure du code permettant de publier un flux dans la session. Voici un exemple :

func sessionDidConnect(_ session: OTSession) {
    print("The client connected to the OpenTok session.")
    let settings = OTPublisherSettings()
    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)
}

Le SDK vidéo de Vonage gère la qualité vidéo automatiquement, en fonction des conditions du réseau et des capacités de l'appareil. Cela dit, vous pouvez configurer certaines propriétés, telles que résolution, taux de rafraîchissementet repli audio.

Ensuite, nous mettrons en œuvre les méthodes de la OTPublisherDelegate protocole. Ce protocole comprend des méthodes pour gérer les événements liés à l'éditeur.

Pour ce faire, vous pouvez ajouter le code suivant à votre ViewController.swift fichier :

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

Allumer/éteindre l'appareil photo

Le SDK de Vonage offre des méthodes simples pour contrôler la caméra.

Twilio

participant?.unpublishVideoTrack(cameraManager.track)
self.cameraManager = nil

Vonage

// This will only stop publishing Video to the session. You can still see your local preview

    publisher.publishVideo = false
// This will only stop publishing all media (audio and video) to the session. You can still see your local preview
    var error: OTError?
    session.unpublish(publisher, error: &error)
    guard error == nil else {
        print(error!)
        Return
    }

Rendu d'une vidéo d'utilisateur distant

Similaire à celui de Twilio participantDidConnect et didSubscribeToVideoTrack Vonage déclenche également les événements suivants connectionCreated et streamCreated lorsqu'un participant distant se connecte à la session et commence à envoyer de la vidéo.

Twilio

func participantDidConnect(room: Room, participant: RemoteParticipant) {
    print ("Participant \(participant.identity) has joined Room \(room.name)")

    // Set the delegate of the remote participant to receive callbacks
    participant.delegate = self
}

func participantDidDisconnect(room: Room, participant: RemoteParticipant) {
    print ("Participant \(participant.identity) has left Room \(room.name)")
}

 func didSubscribeToVideoTrack(videoTrack: RemoteVideoTrack,
                              publication: RemoteVideoTrackPublication,
                              participant: RemoteParticipant) {

    print("Participant \(participant.identity) added a video track.")
    if let remoteView = VideoView.init(frame: self.view.bounds,
                                       delegate:self) {
        videoTrack.addRenderer(remoteView)
        self.view.addSubview(remoteView)
        self.remoteView = remoteView
    }
}

Vonage

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

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


// 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.")
   }
}

Audio

Vonage gère à la fois l'audio et la vidéo à l'aide d'un seul objet Publisher. Lorsque vous commencez à publier avec les options par défaut, le SDK publie à la fois l'audio et la vidéo. Cependant, si vous préférez avoir une session audio uniquement, vous pouvez configurer l'objet éditeur pour qu'il ne publie pas la vidéo.

Microphone muet

Avec Twilio, vous devez obtenir la piste audio pour couper le microphone. Vonage simplifie cela en fournissant une seule méthode invocable.

Twilio

guard let micTrack = LocalAudioTrack(options: nil, enabled: true, name: TrackName.mic) else {
           return
}
participant?.unpublishAudioTrack(micTrack)

Vonage

publisher.publishAudio = false

Débrancher le microphone

De même, avec Twilio Video, vous devez obtenir la piste audio pour rétablir le microphone. Vonage simplifie cette opération en fournissant une seule méthode invocable.

Twilio

guard let micTrack = LocalAudioTrack(options: nil, enabled: true, name: TrackName.mic) else {
           return
}
participant?.publishAudioTrack(micTrack)

Vonage

publisher.publishAudio = true

Chat textuel

Vous pouvez échanger des données (c'est-à-dire des messages de chat textuels ou des messages JSON personnalisés) entre les participants individuels d'une session, ainsi qu'avec tous les participants d'une session.

La méthode suivante envoie un message aux clients connectés à la session. Chaque signal est défini par un type de chaîne identifiant le type de message (dans ce cas "chat") et une chaîne contenant le message :

func sendChatMessage(message: String) {
    var error: OTError?
    session.signal(withType: "chat", string: message, connection: nil, error: &error)
    if let error {
        print(error)
    }
}

Lorsqu'un autre client connecté à la session envoie un message, l'implémentation d'un rappel de OTSessionDelegate vous permet de recevoir le message :

func session(_ session: OTSession, receivedSignalType type: String?, from connection: OTConnection?, with string: String?) {
        print("Received signal type \(type) with message \(string)")
    }

Quitter et terminer les sessions Le code ci-dessous montre comment mettre fin à une session active (déconnecter un utilisateur d'une session).

Twilio

// To disconnect from a Room, we call:
room?.disconnect()

// This results in a callback to RoomDelegate#roomDidDisconnect(room: Room, error: Error?)

// MARK: RoomDelegate

func roomDidDisconnect(room: Room, error: Error?) {
    print("Disconnected from room \(room.name)")
}

Vonage

var error: OTError?
session?.disconnect(&error)
if error != nil {
    print(error!)
}

// MARK: OTSessionDelegate

func sessionDidDisconnect(_ session: OTSession) {
print("The client disconnected to the OpenTok session.")
}

Plus d'informations :