Call
  • Overview
  • Web
    • Demo のクイックスタート
    • インテグレーション
      • Web&H5 (React)
      • Web&H5 (Vue3)
    • AI ノイズ低減
    • 仮想背景
    • UI のカスタマイズ
    • クラウドレコーディング
    • その他の機能
      • ニックネームとプロファイルフォトの設定
      • 解像度とフィルモードの設定
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • インターフェースドキュメンテーション
      • インターフェースの概要
      • TUICallKit
      • TUICallEngine
      • TUICallEvent
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • リリース説明
  • Android
    • Demo のクイックスタート
    • インテグレーション
    • AI ノイズ低減
    • 仮想背景
    • UI のカスタマイズ
    • オフライン通話プッシュ
    • クラウドレコーディング
    • その他の機能
      • ニックネームとプロファイルフォトの設定
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • インターフェースドキュメンテーション
      • インターフェースの概要
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • タイプ定義
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • リリース説明
  • iOS
    • Demo のクイックスタート
    • インテグレーション
    • AI ノイズ低減
    • 仮想背景
    • UI のカスタマイズ
    • オフライン通話プッシュ
      • VoIP
      • APN
    • クラウドレコーディング
    • その他の機能
      • ニックネームとプロファイルフォトの設定
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • インターフェースドキュメンテーション
      • インターフェースの概要
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • タイプ定義
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • リリース説明
  • Flutter
    • Demo のクイックスタート
    • インテグレーション
    • AI ノイズ低減
    • 仮想背景
    • UI のカスタマイズ
    • オフライン通話プッシュ
      • 通知
      • VoIP(オプション)
    • クラウドレコーディング
    • その他の機能
      • ニックネームとプロファイルフォトの設定
      • グループ通話
      • フローティングウィンドウ
      • 美顔エフェクト
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • インターフェースドキュメンテーション
      • インターフェースの概要
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • タイプ定義
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • アップグレード
    • リリース説明
  • Overview
    • Overview
  • サービスをアクティブ化します
  • 価格
    • 無料時間
    • オーディオ・ビデオ通話 Call の月額パッケージ
    • Billing Explanation for Subscription Package Duration
    • Pay-as-you-go
      • Billing of Audio and Video Duration
      • Billing of On-Cloud Recording and Recording Delivery
      • Billing of MixTranscoding and Relay to CDN
  • ErrorCode
  • よくあるご質問
    • All Platform
      • FAQs
      • UserSig
    • Web
    • Flutter
    • iOS
    • Android
Call

UI のカスタマイズ

ここではTUICallKitのユーザーインターフェースをカスタマイズする方法についてご説明します。インターフェース微調整自身でのUI実装という2つのソリューションをご用意しています。

方法1:インターフェース微調整ソリューション

ご提供するUIソースコードを直接変更することで、TUICallKitのユーザーインターフェースを調整します。TUICallKitのインターフェースソースコードはGithubiOS/TUICallKitフォルダにあります。
アイコンの置き換えResources\Calling.xcassetsフォルダ内のアイコンを直接置き換え、app全体のアイコンの色やスタイルに統一性を持たせることができます。置き換える際にアイコンファイルの名前を変更しないようにしてください。
img

着信音の置き換えResources\AudioFileフォルダ内の3つのオーディオファイルを置き換えることで、着信音の置き換えができます。
ファイル名
用途
phone_dialing.m4a
呼び出し開始時の音声
phone_hangup.mp3
通話終了の音声
phone_ringing.flac
呼び出し応答時の音声
テキストの置き換え zh-Hans.lprojおよびen.lproj内のCallingLocalized.stringsファイルを変更することで、ビデオ通話画面内の文字列の内容を変更できます。

方法2:自身でのUI実装ソリューション

TUICallKitの通話機能全体はTUICallEngineというUIレスコンポーネントをベースにして実装されています。tuicallkitフォルダを削除し、TUICallEngineを完全にベースにしてご自身のUIを実装することが可能です。

TUICallEngine

TUICallEngine APIは通話コンポーネント全体の基盤インターフェースです。主に1対1オーディオビデオ通話およびグループ内通話の開始、応答、拒否、終了、デバイス操作などの重要なインターフェースを提供します。
API
説明
TUICallEngineインスタンスの作成(シングルトンモード)
TUICallEngineインスタンスの破棄(シングルトンモード)
オーディオビデオ通話基本機能の認証完了
イベントコールバックの追加
コールバックインターフェースの削除
1v1通話の開始
グループ通話の開始
通話応答
通話拒否
通話終了
通話を無視
グループ通話中に他の人を招待
現在のグループ通話に自主的に参加
通話メディアタイプの切り替え。ビデオ通話からオーディオ通話への切り替えなど
リモートユーザービデオストリームのサブスクリプション開始
リモートユーザービデオストリームのサブスクリプション停止
カメラの起動
カメラの終了
フロント/リアカメラの切り替え
マイクをオンにする
マイクをオフにする
オーディオ再生デバイスの選択(ヘッドホン/スピーカー)
ユーザーのニックネーム、プロフィール画像の設定
TUICallEngineのマルチデバイスログインモードのオン/オフ (プレミアム版パッケージのみサポート)

TUICallObserver

TUICallObserverはTUICallEngineに対応するコールバックイベントクラスです。このコールバックによって、関心のあるコールバックイベントを監視することができます。
API
説明
通話中のエラーコールバック
通話リクエストのコールバック
通話キャンセルのコールバック
通話接続のコールバック
通話終了のコールバック
通話メディアタイプ変更発生のコールバック
xxxxユーザーによる通話拒否のコールバック
xxxxユーザーの応答なしのコールバック
xxxxユーザーが通話中である場合のコールバック
xxxxユーザーの通話参加のコールバック
xxxxユーザーの通話からの退出のコールバック
xxxユーザーのビデオストリームの有無のコールバック
xxxユーザーのオーディオストリームの有無のコールバック
全ユーザーの音量レベルフィードバックのコールバック
全ユーザーのネットワーク品質フィードバックのコールバック

主要なタイプの定義

API
説明
TUICallMediaType
通話のメディアタイプ。列挙タイプ:ビデオ通話、音声通話
TUICallRole
通話のロール。列挙タイプ:発呼側、着呼側
TUICallStatus
通話の状態。列挙タイプ:アイドル状態、応答待ち、応答中
TUIRoomId
オーディオビデオルームID。数字、文字列の2種類をサポートしています
TUICallCamera
カメラIDパラメータ。列挙タイプ:フロントカメラ、リアカメラ
TUIAudioPlaybackDevice
音声再生デバイス。列挙タイプ:スピーカー、ヘッドホン
TUINetworkQualityInfo
現在のネットワーク品質情報