以下の用途向け：REACT

React ビデオ通話 UI Kit

Tencent RTC の React Video Calling UI Kit でアプリ内通話を追加できます。TUICallKit を組み込み、ユーザーを接続し、通話画面とフローティングウィンドウを React アプリに合わせて調整できます。

構築を始める Callデモを試す

開発者向けリソース

React ビデオ通話 UI Kitのドキュメントとサンプル

コンポーネントリファレンス

React ビデオ通話 UI Kit コンポーネントをご覧ください。

コンポーネントを見るユーザー認証

導入ガイド

React ビデオ通話 UI Kit をインストールし、ユーザーを接続します。

React の導入クイックスタート

サンプルとソース

製品の実際の動作を確認し、その実装方法をご覧ください。

Callデモを試す React のソースコードを見る

Reactでの1対1ビデオ通話

個人的な交流や相談に使える対面形式の会話を React アプリに導入し、ビデオと通話の操作を一つの体験にまとめます。

ビデオ相談を見る

React でのグループビデオ通話

React 通話コンポーネントで複数の参加者を接続します。プラットフォームガイドに従って、通話フローと対応するグループレイアウトを設定してください。

グループ通話を見る

REACT CALL の機能

Reactビデオ通話機能

人と人をつなぐ

音声・ビデオ通話
着信処理

通話体験を自在にコントロール

カメラとマイクのコントロール
通話ライフサイクルイベント

自分らしく仕上げる

アプリケーションのフロー
プラットフォーム固有の統合

React ビデオ通話コンポーネントを見る

TUICallKit をコンポーネントレイアウトに組み込み、アプリ内の操作から通話を開始します。

通話インターフェース

React通話インターフェースを埋め込む

コンポーネントのレイアウトに TUICallKit をマウントし、認証済みユーザーで初期化します。このコンポーネントが通話インターフェースとコントロールを提供します。

ドキュメントを読む

import { TUICallKit } from '@trtc/calls-uikit-react';

export function CallView() {
  return <TUICallKit />;
}

通話を開始

React でビデオ通話を開始

アプリケーションから通話 API に受信者 ID を渡します。この操作を React インターフェース内の連絡先、会話、または通話ボタンに接続します。

ドキュメントを読む

import { TUICallKitAPI, CallMediaType } from
  '@trtc/calls-uikit-react';

await TUICallKitAPI.calls({
  userIDList: [recipientID],
  type: CallMediaType.VIDEO,
});

フローティングウィンドウ

ユーザーがアプリ内を移動しても、会話を表示し続けます。

ドキュメントを読む

TUICallKitAPI.enableFloatWindow(true);

カスタマイズ

React Call UI Kitをカスタマイズ

React の通話コンポーネント、コントロール、着信フローを製品に合わせて調整します。

レイアウトとコントロール

プラットフォームガイドに記載されたカスタマイズオプションを使用して、通話エクスペリエンスを調整します。

ドキュメントを読む

始める

React アプリにビデオ通話を追加

01
アプリを作成
アプリケーションとテストユーザー向けに Call を有効にします。
Call コンソールを開く
02
React ビデオ通話 UI Kit を追加する
プラットフォームガイドに沿ってプロジェクトを接続します。
統合ガイドに従う
03
最初の通話を開始
2人のテストユーザーとしてサインインし、発信と応答を行います。
認証を設定

React Call UI Kit

npm install @trtc/calls-uikit-react

import { TUICallKitAPI } from '@trtc/calls-uikit-react';

await TUICallKitAPI.init({ SDKAppID, userID, userSig });

React ビデオ通話 UI Kit のよくある質問

React Video Calling UI Kit には何が含まれていますか？

React Video Calling UI Kit は TUICallKit の画面と通話コントロールを提供します。ユーザーIDとコンポーネントレイアウトに接続すると、Call サービスが参加者を接続します。

React の通話 SDK と UI Kit のどちらを使用すべきですか？

UI Kit は基盤サービス上にインターフェースコンポーネントを提供します。独自のアプリケーション UI をより細かく制御する必要がある場合は、SDK を選択してください。

Web ビデオ通話 SDK

ブラウザで React ビデオ通話を利用するには何が必要ですか？

Call サービスが有効になっている認証済みユーザー向けに TUICallKit を初期化します。HTTPS または localhost を使用し、カメラ、マイク、ブラウザ再生の権限を処理します。

React 通話統合ガイド

React ビデオ通話 UI Kit のユーザーを認証するにはどうすればよいですか？

サーバー上で UserSig を作成し、独自のサインインフローが完了した後にクライアントへ渡します。アプリケーションシークレットは常にサーバー上に保持してください。

認証ガイドを読む

React ビデオ通話 UI Kit は無料で利用できますか？

インターフェースとホスト型 Call サービスは、それぞれ異なる役割を担います。アプリケーションでサービスを有効化し、現在のプラン、機能の提供状況、利用料金を確認してください。

Callの料金を確認

React で React ビデオ通話 UI Kit を導入するには？

ドキュメントに記載された provider を初期化し、接続済みコンポーネントを組み合わせます。購読とクリーンアップを React のライフサイクルに合わせ、実際のアプリでナビゲーションと繰り返しマウントをテストします。

プラットフォームガイドを読む

アプリのリリース前に React ビデオ通話 UI Kit をテストするには？

別々のユーザー間で招待、応答、拒否、通話終了の状態をテストし、権限が拒否された場合も確認します。

プラットフォームガイドを読む

React ビデオ通話 UI Kit のインターフェースをカスタマイズするには？

サポートされているコントロールの変更には、@trtc/calls-uikit-react の TUICallKitAPI を使います。例えば、hideFeatureButton(FeatureButton.Camera) はカメラボタンを非表示にし、setLayoutMode(LayoutMode.LocalInLargeView) はローカル映像を大きいビューに表示します。このレイアウト設定は、1 対 1 のビデオ通話にのみ適用されます。まったく異なるインターフェースが必要な場合は TUICallEngine を基に構築してください。すべての内部ビューに置き換え用の React prop があるとは限りません。

カスタマイズガイドを読む

React Call の導入サポート

統合に関する質問

React ビデオ通話 UI Kit のセットアップに関するヘルプをご覧ください。

開発者向けドキュメントを表示

アプリケーションについて相談

製品、想定利用量、統合要件についてご相談ください。

営業担当者への連絡

React アプリにビデオ通話を導入

React Video Calling UI Kit を導入し、2 人のテストユーザーを接続して、最初の通話を構築します。

無料で始める UI Kit ガイドを見る

React ビデオ通話 UI Kit

React ビデオ通話 UI Kitのドキュメントとサンプル

コンポーネントリファレンス

導入ガイド

サンプルとソース

Reactでの1対1ビデオ通話

React でのグループビデオ通話

Reactビデオ通話機能

人と人をつなぐ

通話体験を自在にコントロール

自分らしく仕上げる

React ビデオ通話コンポーネントを見る

React通話インターフェースを埋め込む

React でビデオ通話を開始

フローティングウィンドウ

React Call UI Kitをカスタマイズ

レイアウトとコントロール

着信音と発信者情報

React アプリにビデオ通話を追加

アプリを作成

React ビデオ通話 UI Kit を追加する

最初の通話を開始

React ビデオ通話 UI Kit のよくある質問

React Video Calling UI Kit には何が含まれていますか？

React の通話 SDK と UI Kit のどちらを使用すべきですか？

ブラウザで React ビデオ通話を利用するには何が必要ですか？

React ビデオ通話 UI Kit のユーザーを認証するにはどうすればよいですか？

React ビデオ通話 UI Kit は無料で利用できますか？

React で React ビデオ通話 UI Kit を導入するには？

アプリのリリース前に React ビデオ通話 UI Kit をテストするには？

React ビデオ通話 UI Kit のインターフェースをカスタマイズするには？

React Call の導入サポート

統合に関する質問

アプリケーションについて相談

React アプリにビデオ通話を導入