Swift

Construir la interfaz de llamada

Para poder llamar, necesitarás crear un nuevo View Controller para la interfaz de llamada. En el menú de Xcode, seleccione File > New > File.... Elige un Clase Cocoa TouchNombre CallViewController con una subclase de UIViewController y el lenguaje de Swift.

Xcode adding file

Esto creará un nuevo archivo llamado CallViewControlleren la parte superior importar VonageClientSDKVoice.

import UIKit
import VonageClientSDKVoice

La interfaz de llamada necesitará:

  • A UIButton para iniciar una llamada
  • A UIButton para colgar
  • A UILabel para mostrar las actualizaciones de estado

Abrir CallViewController.swift y añadirlo mediante programación.

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

Existen dos funciones de ayuda setHangUpButtonHidden y setStatusLabelText para evitar la repetición de llamadas DispatchQueue.main.async ya que el cambio de estado de los elementos de la interfaz de usuario debe realizarse en el hilo principal, tal y como exige UIKit. En setHangUpButtonHidden Esta función activa o desactiva la visibilidad del hangUpButton ya que solo tiene que estar visible durante una llamada activa.

Presentación de la CallViewController

Ahora que la interfaz de llamada está construida necesitarás presentar el controlador de vista desde la pantalla de inicio de sesión que construiste anteriormente. Necesitarás información sobre el usuario que ha iniciado sesión y un objeto cliente autenticado para pasarlo entre los dos controladores de vista, en CallViewController.swift añade lo siguiente.

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

Esto define un inicializador personalizado para la clase que tiene un atributo User.type y VGVoiceClient.type como parámetros, que luego se almacenan en la variable local user y client propiedades. Ahora que tiene la información del usuario puede utilizar la función callButton para mostrar a quién va a llamar el usuario, en viewDidLoad añade lo siguiente.

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

Establece el título del controlador de vista y crea un botón de cierre de sesión en la barra de navegación. Añade el correspondiente logout al final de 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)
                }
            }
        }
    }

    ...
}

Ahora ya estás listo para mostrar la interfaz de llamada junto con la información del usuario. Para ello, tendrás que editar el login función en el ViewController.swift archivo.

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

Si el usuario se conecta con éxito a CallViewController se presentarán los datos de usuario necesarios.

Construir y ejecutar

Vuelve a ejecutar el proyecto (Cmd + R) para iniciarlo en el simulador. Si te conectas con uno de los usuarios verás la interfaz de llamada

Call interface