Swift

Aufbau der Aufrufschnittstelle

Um den Aufruf zu ermöglichen, müssen Sie einen neuen View Controller für die aufrufende Schnittstelle erstellen. Wählen Sie aus dem Xcode-Menü File > New > File.... Wählen Sie eine Kakao-Touch-Klasse, nennen Sie es CallViewController mit einer Unterklasse von UIViewController und Sprache der Swift.

Xcode adding file

Dadurch wird eine neue Datei mit dem Namen CallViewControlleran der Spitze der Einfuhr VonageClientSDKVoice.

import UIKit
import VonageClientSDKVoice

Die Schnittstelle für den Anruf wird benötigt:

  • A UIButton um ein Gespräch zu beginnen
  • A UIButton um ein Gespräch zu beenden
  • A UILabel um Statusaktualisierungen anzuzeigen

Öffnen Sie CallViewController.swift und fügen Sie es programmatisch hinzu.

class CallViewController: UIViewController {
    
    let callButton = UIButton(type: .system)
    let hangUpButton = UIButton(type: .system)
    let statusLabel = UILabel()
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        
        callButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(callButton)
        
        hangUpButton.setTitle("Hang up", for: .normal)
        hangUpButton.translatesAutoresizingMaskIntoConstraints = false
        
        setHangUpButtonHidden(true)
        view.addSubview(hangUpButton)
        
        setStatusLabelText("Ready to receive call...")
        statusLabel.textAlignment = .center
        statusLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(statusLabel)
        
        NSLayoutConstraint.activate([
            callButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            callButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            callButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            callButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            
            hangUpButton.topAnchor.constraint(equalTo: callButton.bottomAnchor, constant: 20),
            hangUpButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            hangUpButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            hangUpButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            
            statusLabel.topAnchor.constraint(equalTo: hangUpButton.bottomAnchor, constant: 20),
            statusLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            statusLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            statusLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
    
    private func setHangUpButtonHidden(_ isHidden: Bool) {
        DispatchQueue.main.async { [weak self] in
            guard let self else { return }
            self.hangUpButton.isHidden = isHidden
            self.callButton.isHidden = !self.hangUpButton.isHidden
        }
    }
    
    private func setStatusLabelText(_ text: String?) {
        DispatchQueue.main.async { [weak self] in
            guard let self else { return }
            self.statusLabel.text = text
        }
    }
}

Es gibt zwei Hilfsfunktionen setHangUpButtonHidden und setStatusLabelText um Wiederholungen des Aufrufs zu vermeiden DispatchQueue.main.async da die Änderung des Zustands der UI-Elemente im Haupt-Thread erfolgen muss, wie es die UIKit. Die setHangUpButtonHidden Funktion schaltet die Sichtbarkeit der hangUpButton da diese nur während eines aktiven Anrufs sichtbar sein muss.

Die Präsentation der CallViewController

Jetzt, wo die Aufrufschnittstelle erstellt ist, müssen Sie den View-Controller aus dem Anmeldebildschirm, den Sie zuvor erstellt haben, präsentieren. Sie benötigen Informationen über den angemeldeten Benutzer und ein authentifiziertes Client-Objekt, das zwischen den beiden View Controllern übergeben wird, in CallViewController.swift das Folgende hinzufügen.

class CallViewController: UIViewController {
    ...
    let user: User
    let client: VGVoiceClient
    
    var callID: String?
    
    init(user: User, client: VGVoiceClient) {
        self.user = user
        self.client = client
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    ...

Dies definiert einen benutzerdefinierten Initialisierer für die Klasse, der eine User.type und VGVoiceClient.type als seine Parameter, die dann in der lokalen user und client Eigenschaften. Da Sie nun die Benutzerinformationen haben, können Sie die callButton um anzuzeigen, wen der Benutzer anrufen wird, in viewDidLoad das Folgende hinzufügen.

navigationItem.leftBarButtonItem = UIBarButtonItem(
    title: "Logout", 
    style: .done, 
    target: self,
    action: #selector(self.logout)
)
callButton.setTitle("Call \(user.callPartnerName)", for: .normal)

Er setzt den Titel des View-Controllers und erstellt eine Abmeldeschaltfläche in der Navigationsleiste. Fügen Sie den entsprechenden logout Funktion an das Ende von CallViewController.swift

class CallViewController: UIViewController {
    ...

    @objc func logout() {
        client.deleteSession { error in
            if error == nil {
                DispatchQueue.main.async { [weak self] in
                    self?.dismiss(animated: true, completion: nil)
                }
            }
        }
    }

    ...
}

Jetzt können Sie die Anruferschnittstelle zusammen mit den Benutzerinformationen anzeigen. Zu diesem Zweck müssen Sie die login Funktion in der ViewController.swift Datei.

func login() {
    guard let user = self.user else { return }
    let config = VGClientConfig(region: .US)
    config.enableWebsocketInvites = true
    client.setConfig(config)
    client.createSession(user.jwt) { error, sessionId in
        DispatchQueue.main.async { [weak self] in
            guard let self else { return }
            if error == nil {
                let navigationController = UINavigationController(rootViewController: CallViewController(user: user, client: self.client))
                navigationController.modalPresentationStyle = .overFullScreen
                self.present(navigationController, animated: true, completion: nil)
            } else {
                self.connectionStatusLabel.text = error?.localizedDescription
            }
        }
    }
}

Wenn der Benutzer erfolgreich eine Verbindung herstellt, wird ein CallViewController werden die benötigten Benutzerdaten angezeigt.

Bauen und Ausführen

Führen Sie das Projekt erneut aus (Cmd + R), um sie im Simulator zu starten. Wenn Sie sich mit einem der Benutzer anmelden, sehen Sie die aufrufende Schnittstelle

Call interface