Wie man mit SwiftUI Video-Anrufe tätigt

Dieser Artikel wurde im März 2025 aktualisiert.

In diesem Lernprogramm werden Sie das Vonage Video Client SDK für iOS verwenden, um einen Eins-zu-Eins-Videochat in SwiftUI zu erstellen.

Voraussetzungen

• A Vonage API-Konto.

• Xcode 12 und Swift 5 oder höher.

Erstellen eines Vonage Video API-Projekts

Öffnen Sie Ihr Vonage API-Dashboard und erstellen Sie eine neue Vonage Application. Sie können sie nennen, wie Sie wollen, aber aktivieren Sie unter den Funktionen die Option Video und klicken Sie dann auf Neue Anwendung erstellen. Sobald die Anwendung erstellt ist, kopieren Sie die Anwendungs-ID. Dann besuchen Sie den Vonage Video Spielplatz und erstellen Sie eine neue Sitzung:

1. Vergewissern Sie sich, dass die Registerkarte "Neue Sitzung erstellen" ganz oben ausgewählt ist.

2. Wählen Sie "Ja" unter "Haben Sie eine bestimmte Anwendungs-ID?".

3. Fügen Sie die zuvor erstellte Anwendungs-ID in das Feld "Anwendungs-ID" ein, das angezeigt wird.

4. Lassen Sie alles andere so, wie es ist, und klicken Sie auf "Sitzung erstellen".

5. Notieren Sie sich auf der nun erscheinenden Seite die "SESSION ID".

6. Klicken Sie auf die Schaltfläche "Verbinden" am oberen Rand.

7. Erweitern Sie den Abschnitt "Sitzungs- und Token-Informationen" am oberen Rand.

8. Notieren Sie sich den erzeugten "TOKEN".

Erstellen der iOS-Anwendung

Der nächste Schritt besteht darin, die iOS-Anwendung einzurichten. Sobald Sie die Anwendung erstellt haben, müssen Sie das Video Client SDK installieren und Mikrofon- und Kamerarechte beantragen.

Ein Xcode-Projekt erstellen

Öffnen Sie Xcode und erstellen Sie ein neues Projekt, indem Sie auf Datei > Neu > Projekt gehen. Wählen Sie iOS als Plattform und App für die Vorlage aus und geben Sie ihr einen Namen.

Wählen Sie SwiftUI für die Schnittstelle, SwiftUI App für den Lebenszyklus und Swift für die Sprache. Schließlich wählen Sie einen Speicherort für Ihr Projekt.

Installieren Sie das Client SDK

Nachdem Sie nun das Projekt erstellt haben, können Sie das Video Client SDK als Abhängigkeit hinzufügen. Schließen Sie Ihr Xcode-Projekt und navigieren Sie in Ihrem Terminal zu dem Ort, an dem Sie das Projekt gespeichert haben, und führen Sie die folgenden Befehle aus:

1. Führen Sie den Befehl pod init aus, um eine neue Poddatei für Ihr Projekt zu erstellen.

2. Öffnen Sie die Poddatei in Xcode mit open -a Xcode Podfile.

3. Aktualisieren Sie das Podfile, damit es OTXCFramework als eine Abhängigkeit.

# 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. Installieren Sie das SDK mit pod install.

2. Öffnen Sie den neuen xcworkspace Datei in Xcode mit open VideoChat.xcworkspace.

Berechtigungen

Da die Anwendung das Mikrofon und die Kamera für den Videochat verwendet, müssen Sie Beschreibungen hinzufügen, warum Sie die Berechtigungen benötigen, die in einer Eingabeaufforderung beim Ausführen der Anwendung angezeigt werden.

Bearbeiten Sie die Info.plist Datei. Die Datei Info.plist ist eine Datei, die alle für die Anwendung erforderlichen Metadaten enthält. Fügen Sie der Datei einen neuen Eintrag hinzu, indem Sie den Mauszeiger über den letzten Eintrag in der Liste bewegen und auf die kleine + Schaltfläche, die erscheint. Wählen Sie in der Dropdown-Liste Privacy - Microphone Usage Description und fügen Sie Microphone access required to video chat für seinen Wert. Wiederholen Sie die Schritte für Privacy - Camera Usage Description.

Das Video Client SDK

Das Video Client SDK verwendet die Anmeldeinformationen, die Sie im Video API Dashboard erstellt haben, um eine Verbindung zu den Vonage Servern herzustellen.

Verbinden des Client SDK

Erstellen Sie eine neue Datei mit dem Namen OpenTokManager.swift indem Sie zu Datei > Neue Datei (CMD + N) und fügen Sie Folgendes hinzu, wobei Sie die leeren Zeichenfolgen durch Ihre Anmeldedaten ersetzen:

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

Zusätzlich zu den Anmeldeinformationen gibt es Variablen für eine Sitzung, Herausgeber und Abonnent. Wie bereits erwähnt, können Sie sich eine Sitzung als einen Raum vorstellen, mit dem sich die Clients verbinden; das SDK hat dafür die OTSession Klasse für diesen Zweck. Verleger, OTPublishererlauben es dem Client, Audio und Video zu veröffentlichen, wenn er mit einer Sitzung verbunden ist. Subscribers, OTSubscriberermöglichen es dem Client, Audio und Video von anderen Clients in der Sitzung zu abonnieren. Außerdem gibt es Variablen, die den @Published Eigenschaft Wrapper, über die die OpenTokManager Klasse später mit dem Ansichtscode kommunizieren wird.

Da die Eigenschaften nun vorhanden sind, fügen Sie die folgenden Funktionen in die OpenTokManager Klasse hinzu:

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

Die Funktion doConnect Funktion verbindet den Client mit der Sitzung, doPublish startet die Veröffentlichung, doSubscribe beginnt das Abonnieren. Dann gibt es Funktionen zum Aufräumen des Abonnenten (cleanupSubscriber) und Herausgeber (cleanupPublisher), wenn der Client die Verbindung zu einem der beiden trennt, gefolgt von einer Funktion zur Fehlerbehandlung (processError).

DieOTSessionDelegate

Die OTSessionDelegate ist das Mittel, mit dem das Video Client SDK Änderungen an der Sitzung an Sie zurückmeldet. Fügen Sie eine Erweiterung in der gleichen Datei hinzu:

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

Wenn die Sitzung eine Verbindung herstellt, doPublish aufgerufen wird, wenn ein Stream erzeugt wird doSubscribe aufgerufen wird und wenn der Stream zerstört wird cleanupSubscriber aufgerufen wird.

DieOTPublisherDelegate

Die OTPublisherDelegate ist die Art und Weise, wie das Video Client SDK Änderungen bei der Veröffentlichung einer Sitzung an Sie zurückmeldet. Fügen Sie eine Erweiterung in der gleichen Datei hinzu:

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

Ähnlich wie bei der OTSessionDelegate wenn der Stream zerstört wird, cleanupPublisher aufgerufen wird, und cleanupSubscriber wenn es ein aktives Abonnement für einen Stream gibt.

DieOTSubscriberDelegate

Die OTSubscriberDelegate ist die Art und Weise, wie das Video Client SDK Änderungen durch das Abonnieren einer Sitzung an Sie zurückmeldet. Fügen Sie eine Erweiterung in der gleichen Datei hinzu:

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

Ähnlich wie bei der Veröffentlichung in einer Sitzung erhalten Sie bei erfolgreichem Abonnement ein UIView Objekt zurück. In dem Fall von subscriberDidConnect ist das zurückgegebene Ansichtsobjekt für den Abonnenten.

Aufbau der Video-Chat-Benutzeroberfläche

Nachdem die OpenTokManager Klasse abgeschlossen ist, können Sie nun die Benutzeroberfläche erstellen. Das Video Client SDK bietet Ihnen UIView Objekte für die Publisher- und Subscriber-Ansichten, die nicht direkt in SwiftUI verwendet werden können. Das UIViewRepresentable Protokoll ermöglicht die Überbrückung von einem UIView Objekt zu einem View Objekt für SwiftUI. In der Datei ContentView.swift Datei fügen Sie die folgenden Strukturen hinzu:

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

Die OTView Struktur, die konform zu UIViewRepresentable entspricht, hat ein UIView Objekt als Eigenschaft. Diese Ansicht wird zurückgegeben, wenn das System makeUIView. Da der Lebenszyklus von Ansichten in SwiftUI vom System gesteuert wird, müssen Sie auchupdateUIViewimplementieren, um dies zu handhaben. DieOTErrorWrapperStruktur erlaubt es, dass Fehler konform zuIdentifiablewas notwendig ist, um die SwiftUI-Warnungen zu verwenden.

Als nächstes ersetzen Sie die ContentView Struktur durch die folgende:

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

Dieser Code fügt eine Eigenschaft für eine Instanz der OpenTokManager Klasse von vorhin hinzu. Da die Ansichten, die OpenTokManager veröffentlicht werden, optional sind, .flatmap verwendet. Wenn die Ansichten also Null sind, werden sie ignoriert, und wenn es einen Wert gibt, werden sie ausgepackt. Wenn die OpenTokManager einen Fehler veröffentlicht, wird die Warnung automatisch angezeigt, da sie auf Änderungen des veröffentlichten .error Wert überwacht.

Wenn Sie das Projekt erstellen und ausführen, sollten Sie jetzt in der Lage sein, einen Video-Chat zu starten! Sie können ein anderes Gerät oder den Video API Spielwiese verwenden, um sich von Ihrem Laptop aus mit der Sitzung zu verbinden.

Wie geht es weiter?

Das fertige Projekt ist verfügbar auf GitHubverfügbar, und Sie können mehr über die Vonage Video API in unserer Dokumentation.