tencent cloud

フィードバック

最終更新日:2024-07-19 14:53:21

    TUICallKitインターフェースのカスタマイズガイド

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

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

    ご提供するUIソースコードを直接変更することで、TUICallKitのユーザーインターフェースを調整します。TUICallKitのインターフェースソースコードはGithubWeb/フォルダにあります。

    アイコンの置き換え

    src/iconsフォルダ内のアイコンコンポーネントを直接変更し、app全体のアイコンの色やスタイルに統一性を持たせることができます。置き換える際にアイコンファイルの名前を変更しないようにしてください。アイコンのプレビューはsrc/assetsで参照できます。
    
    
    

    UIレイアウトの調整

    src/components/ファイルのそれぞれのページを変更することで、オーディオビデオ通話インターフェースを変更できます
    - components/
    - Calling-C2CVideo.vue 2人ビデオ通話
    - Calling-Group.Vue 多人数オーディオ・ビデオ通話
    - ControlPanel.vue コントロールパネル
    - ControlPanelItem.vue コントロールパネルサブ項目
    - Dialing.vue 電話発信ページ、着信ページ、2人オーディオ通話
    - MicrophoneIcon.vue 音量の変化を表示できるマイクIcon
    - TUICallKit.vue TUICallKit全体コンポーネント

    スタイルの変更

    スタイルファイルはsrc/style.cssにあります。UIのスタイルに合わせてご自身で調整できます。

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

    TUICallKitのすべての通話機能は、TUICallEngineというUIレスSDKをベースにして実装されており、TUICallEngineを完全にベースにしてご自身のUIを実装することが可能です。詳細については以下をご参照ください
    お問い合わせ

    カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

    テクニカルサポート

    さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

    電話サポート(24 時間365日対応)