以下の用途向け：REACT NATIVE

React Native ライブ配信 UI Kit

Tencent RTC の React Native Live Streaming UI Kit を使ってモバイル配信を追加します。TUILiveKit の配信者、視聴者、ルームリストの各ページをアプリのナビゲーションに接続してください。

構築を始める Liveデモを見る

開発者向けリソース

React Native ライブ配信 UI Kitのドキュメントとサンプル

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

React Native ライブ配信 UI Kit コンポーネントをご覧ください。

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

導入ガイド

React Native ライブ配信 UI Kit をインストールし、ユーザーを接続します。

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

サンプルとソース

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

Liveデモを見る React Native のソースコードを見る

React Native によるライブ製品デモ

視聴者がクリエイターの商品デモを見ながら会話に参加できます。カタログと購入体験はお使いのアプリケーションで管理します。

ライブショッピングを体験

React Nativeでライブイベントを視聴

プレゼンテーションとその視聴者をReact Nativeアプリに取り込めます。視聴画面をルームに接続し、ライブイベントを見られるようにします。

イベント配信を見る

REACT NATIVE LIVE の機能

React Native ライブ配信機能

ライブ配信を開始

ホストと視聴者の役割
ルームのライフサイクル管理

人々をつなぐ

ライブ映像再生
視聴者参加

自分らしく仕上げる

柔軟なアプリケーションレイアウト
プラットフォーム固有の構成要素

React Native ライブ配信コンポーネントを見る

配信者ビュー、視聴者ビュー、ライブルーム一覧をアプリのナビゲーションに接続します。

ホストプレビュー

クリエイターが始められる場所を提供

React Native のホスト準備画面を追加し、配信前にクリエイターがカメラをプレビューできるようにします。この画面を認証済みのホストアカウントに連携してください。

ドキュメントを読む

import { AnchorPage } from 'react-native-tuikit-live';

<AnchorPage onBack={goBack} onEndLive={showLiveSummary} />

視聴者ビュー

視聴体験をアプリに統合

選択したライブ配信ルームで React Native の視聴者向け画面を開きます。ルームへの入退室をアプリのナビゲーションに連携してください。

ドキュメントを読む

import { LiveAudiencePage } from 'react-native-tuikit-live';

<LiveAudiencePage
  onBack={goBack}
  onEndLive={showLiveSummary}
/>

ライブ配信ルーム一覧

ライブコンテンツとの新たな出会いをひらく

閲覧可能な一覧を追加し、視聴フローに接続します。

ドキュメントを読む

import { LiveListPage } from 'react-native-tuikit-live';

<LiveListPage onBack={goBack} />

カスタマイズ

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

React Nativeアプリで、ライブ体験を中心に動画、視聴者との交流、ナビゲーションを構成します。

独自のビジュアルアイデンティティ

プラットフォームで利用できるカスタマイズオプションを使用して、表示を調整します。

ドキュメントを読む

始める

React Nativeアプリにライブ配信を追加

01
アプリを作成
アプリケーションとテストユーザー向けに Live を有効にします。
Live コンソールを開く
02
React Native ライブ配信 UI Kit を追加する
プラットフォームガイドに沿ってプロジェクトを接続します。
統合ガイドに従う
03
最初のルームに接続
一方のアカウントで配信し、もう一方で視聴します。
認証を設定

React Native Live UI Kit

git clone https://github.com/Tencent-RTC/TUIKit_ReactNative.git

import { useLoginState } from
  'react-native-tuikit-atomic-x';

const { login } = useLoginState();
login({ sdkAppID: SDKAppID, userID, userSig });

React Native ライブ配信 UI Kit のよくある質問

React Native Live UI Kit では何を構築できますか？

React NativeライブストリーミングUI Kitには、ホスト、視聴者、ルーム一覧の各インターフェースが含まれます。これらのTUILiveKitコンポーネントをユーザーアカウントとReact Nativeナビゲーションに接続し、一連の視聴フローを構築できます。

この UI Kit は SDK とどのように連携しますか？

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

React Native ライブ配信 SDK

React Native のライブ視聴画面を配信に接続するにはどうすればよいですか？

Liveサービスを有効にし、視聴者を認証して、ホストが作成したルームに参加させます。別々のアカウントでReact Nativeの視聴者画面をテストし、プラットフォームガイドに従って設定してください。

React Native 視聴者向け統合ガイド

React Nativeライブ配信UI Kitのユーザーを認証するにはどうすればよいですか？

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

認証ガイドを読む

React Native Live Streaming UI Kitは無料で利用できますか？

インターフェースとホステッド Live サービスでは役割が異なります。アプリケーション向けにサービスを有効化し、現在のプラン、機能の提供状況、利用料金を確認してください。

Liveの料金を見る

React Native で React Native ライブ配信 UI Kit を導入するには？

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

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

アプリのリリース前に React Native ライブ配信 UI Kit をテストするには？

配信者・視聴者の役割、対応する配信・再生イベント、再接続をテスト。

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

React Native ライブ配信 UI Kit のインターフェースをカスタマイズするには？

コピーした live/src/pages/Anchor/index.tsx 画面と、共有の tuikit-atomic-x リソースをカスタマイズします。例えば、下部バーに Product アクションを追加し、その onPress を独自の商品カタログパネルにつなぎます。アイコンは tuikit-atomic-x 内の src/static/images、テキストは src/locales にあります。変更後は再ビルドしてください。このボタン自体は、カタログ、購入手続き、決済バックエンドを提供しません。これらは引き続きアプリケーション側で実装する必要があります。

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

React Native Live の導入サポート

統合に関する質問

React Native ライブ配信 UI Kit のセットアップに関するヘルプをご覧ください。

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

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

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

営業担当者への連絡

React Native アプリにライブ配信を導入

React Native Live Streaming UI Kit と各プラットフォーム向けガイドを使用して、クリエイターと視聴者をつなぎます。

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

React Native ライブ配信 UI Kit

React Native ライブ配信 UI Kitのドキュメントとサンプル

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

導入ガイド

サンプルとソース

React Native によるライブ製品デモ

React Nativeでライブイベントを視聴

React Native ライブ配信機能

ライブ配信を開始

人々をつなぐ

自分らしく仕上げる

React Native ライブ配信コンポーネントを見る

クリエイターが始められる場所を提供

視聴体験をアプリに統合

ライブコンテンツとの新たな出会いをひらく

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

独自のビジュアルアイデンティティ

コメントとコンテンツ

React Nativeアプリにライブ配信を追加

アプリを作成

React Native ライブ配信 UI Kit を追加する

最初のルームに接続

React Native ライブ配信 UI Kit のよくある質問

React Native Live UI Kit では何を構築できますか？

この UI Kit は SDK とどのように連携しますか？

React Native のライブ視聴画面を配信に接続するにはどうすればよいですか？

React Nativeライブ配信UI Kitのユーザーを認証するにはどうすればよいですか？

React Native Live Streaming UI Kitは無料で利用できますか？

React Native で React Native ライブ配信 UI Kit を導入するには？

アプリのリリース前に React Native ライブ配信 UI Kit をテストするには？

React Native ライブ配信 UI Kit のインターフェースをカスタマイズするには？

React Native Live の導入サポート

統合に関する質問

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

React Native アプリにライブ配信を導入