Swift

コール・インターフェイスの構築

呼び出しができるようにするには、呼び出しインターフェイス用の新しいビューコントローラを作成する必要があります。Xcodeのメニューから File > New > File....を選択する。 ココア・タッチ・クラス名前を付けてください CallViewController のサブクラスを持つ UIViewController そして Swift.

Xcode adding file

という新しいファイルが作成される。 CallViewControllerトップインポート VonageClientSDKVoice.

import UIKit
import VonageClientSDKVoice

通話インターフェイスが必要になる:

  • A UIButton 通話を開始する
  • A UIButton 通話を終了する
  • A UILabel ステータスの更新を表示する

オープン CallViewController.swift をプログラムで追加する。

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

つのヘルパー関数がある。 setHangUpButtonHidden そして setStatusLabelText 呼び出しの繰り返しを避けるために DispatchQueue.main.async が要求するように、UI要素の状態の変更はメインスレッドで行う必要があるからだ。 UIKit.その setHangUpButtonHidden 関数は hangUpButton これは、アクティブな通話中だけ表示されればよいからである。

を発表する。 CallViewController

これで呼び出しインターフェイスが作成できたので、 先ほど作成したログイン画面からビューコントローラを呼び出す必要があります。ログインしているユーザについての情報と、 認証済みのクライアントオブジェクトを 2 つのビューコントローラ間で受け渡す必要があります。 CallViewController.swift 以下を加える。

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

これは、クラスのカスタム・イニシャライザを定義します。 User.type そして VGVoiceClient.type に格納される。 user そして client プロパティを使用します。ユーザー情報が得られたので callButton で、ユーザーが誰に電話をかけるのかを示す。 viewDidLoad 以下を加える。

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

ビューコントローラのタイトルを設定し、ナビゲーションバーにログアウトボタンを作成します。対応する logout 関数を 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)
                }
            }
        }
    }

    ...
}

これで、ユーザー情報とともに通話インターフェースを表示する準備ができました。そのためには login 関数の ViewController.swift ファイル。

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

ユーザーが接続に成功した場合 CallViewController には、必要なユーザーデータが表示される。

ビルド&ラン

プロジェクトを再度実行する (Cmd + R) をクリックしてシミュレーターで起動します。いずれかのユーザーでログインすると、次のようなインターフェイスが表示されます。

Call interface