以下の用途向け：REACT NATIVE

React Native ビデオ通話 UI Kit

Tencent RTC の React Native ビデオ通話 UI Kit でモバイルユーザーをつなぎます。すぐに使える着信画面と通話中画面を追加し、ネイティブ統合とインターフェース言語を設定します。

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

開発者向けリソース

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

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

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

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

導入ガイド

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

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

サンプルとソース

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

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

React Native での 1 対 1 ビデオ通話

個人的な交流や相談のための対面型コミュニケーションをReact Nativeアプリに組み込み、同じ体験の中で映像と通話を操作できます。

ビデオ相談を見る

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

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

グループ通話を見る

REACT NATIVE CALL の機能

React Native ビデオ通話の機能

人と人をつなぐ

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

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

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

自分らしく仕上げる

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

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

TUICallKit をモバイルナビゲーションに接続し、アプリ内の操作から通話を開始します。

通話インターフェース

React Native の通話インターフェースを組み込む

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

ドキュメントを読む

import { TUICallKit, MediaType } from
  '@tencentcloud/call-uikit-react-native';

await TUICallKit.calls({
  userIdList: [recipientID], mediaType: MediaType.Video,
});

通話を開始

React Nativeでビデオ通話を開始

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

ドキュメントを読む

import { TUICallKit, MediaType } from
  '@tencentcloud/call-uikit-react-native';

await TUICallKit.calls({
  userIdList: [recipientID], mediaType: MediaType.Video,
});

言語

通話インターフェースの言語をアプリケーションに合わせて設定します。

ドキュメントを読む

import { TUICallKit, Language } from
  '@tencentcloud/call-uikit-react-native';

TUICallKit.setLanguage(Language.EN);

カスタマイズ

React Native Call UI Kit をカスタマイズ

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

言語

React Native アプリケーションで対応するインターフェース言語を選択します。

ドキュメントを読む

始める

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

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

React Native Call UI Kit

npm install @tencentcloud/call-uikit-react-native

import { TUICallKit } from
  '@tencentcloud/call-uikit-react-native';

await TUICallKit.login({
  sdkAppId: SDKAppID, userId: userID, userSig,
});

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

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

React Native Video Calling UI Kitは、TUICallKitの画面と通話コントロールを提供します。ユーザーIDシステムとモバイルナビゲーションに接続すると、Callサービスが参加者をつなぎます。

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

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

React Native ビデオ通話 SDK

着信に応答するには何が必要ですか？

ユーザーの認証と Call サービスの有効化が必要です。ネイティブ環境でのバックグラウンド動作とオフライン動作には、ドキュメントに記載されたプッシュ設定も必要です。

プラットフォームガイドを見る

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

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

認証ガイドを読む

React Native Video Calling UI Kit は無料で利用できますか？

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

Callの料金を確認

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

ドキュメントに記載されたパッケージとネイティブ依存関係をインストールし、ネイティブアプリを再ビルドします。JavaScript だけで動くと想定せず、権限、ライフサイクル、ネイティブコールバックを確認します。

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

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

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

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

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

ネイティブ UI Kit が公開するメソッドで通話の表示や動作を調整します。例えば、@tencentcloud/call-uikit-react-native から Language をインポートし、TUICallKit.setLanguage(Language.EN) を呼び出します。setCallingBell は着信音を変更し、enableMuteMode(true) は着信音を鳴らさないようにします。React Web の CSS や provider props では、このネイティブインターフェースを設定できません。Android と iOS の権限設定を維持し、各メソッドを React Native ガイドで確認してください。

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

React Native Call の導入サポート

統合に関する質問

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

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

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

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

営業担当者への連絡

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

React Native Video Calling UI Kitから始めて、2人のテストユーザーを接続し、最初の通話を実現します。

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

React Native ビデオ通話 UI Kit

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

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

導入ガイド

サンプルとソース

React Native での 1 対 1 ビデオ通話

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

React Native ビデオ通話の機能

人と人をつなぐ

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

自分らしく仕上げる

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

React Native の通話インターフェースを組み込む

React Nativeでビデオ通話を開始

言語

React Native Call UI Kit をカスタマイズ

言語

着信音と発信者情報

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

アプリを作成

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

最初の通話を開始

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

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

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

着信に応答するには何が必要ですか？

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

React Native Video Calling UI Kit は無料で利用できますか？

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

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

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

React Native Call の導入サポート

統合に関する質問

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

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