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
このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

Demo のクイックスタート

This article will guide you on how to quickly run through the Audio and Video Call Demo. By following this document, you can have the Demo up and running in 10 minutes, and ultimately experience an Audio and Video Call feature with a complete UI interface.
1v1 Video Call
Group call







Environment preparations

Flutter

Flutter 3.0 or later.

Android

Android Studio 3.5 or above.
Android devices with Android 4.1 or higher versions.

iOS

Xcode 13.0 or above.
Please ensure your project is set up with a valid developer signature.

Step 1: Download the Demo

1. Download the TUICallKit Demo source code from GitHub, or directly run the following command in the command line:
2. Open the TUICallKit Flutter example in Android Studio or VSCode. The following process will take Android Studio as an example:




Step 2: Configure the Demo

1. Activate the audio and video services, to obtain the SDKAppID and SDKSecretKey.



2. Open the Flutter/example/lib/debug/generate_test_user_sig.dart file and fill in the SDKAppID and SDKSecretKey obtained when Activating the Service:




Step 3: Running the Demo

1. In the top right corner of Android Studio, select the device you want to run the Demo on as shown below:



2. After selecting, click Run to execute the TUICallKit Android Demo on the target device.




Make the first call

Note:
To experience the complete audio and video calling process, please log into the Demo on two devices as two different users, with one acting as the caller and the other as the callee.
1. Log in & Signup
Please enter the ID at the User ID. If your current User ID has not been used before, you will be taken to the Signup screen, where you can set your own avatar and nickname.



Note:
Try to avoid setting your User ID to simple strings like "1", "123", "111", as TRTC does not support the same User ID being logged into from multiple devices. Such User IDs like "1", "123", "111" are easily occupied by your colleagues during collaborative development, leading to login failures. Therefore, we recommend setting highly recognizable User IDs while debugging.
2. Make a phone call
2.1 The caller should click 1V1 Call on the interface, enter the callee's User ID in the pop-up interface, and select the desired call type.
2.2 Click Initiate Call.