以下の用途向け：REACT

React ライブ配信 UI Kit

Tencent RTC の React Live Streaming UI Kit でライブ動画視聴機能を追加します。視聴者向けコンポーネント、視聴者コメント、ライブルーム一覧を組み合わせ、カスタマイズ可能な視聴体験を構築できます。

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

開発者向けリソース

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

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

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

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

導入ガイド

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

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

サンプルとソース

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

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

React で商品デモを視聴

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

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

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

プレゼンテーションと視聴者を React アプリに取り込みます。視聴画面をルームに接続し、ライブイベントを視聴できるようにします。

イベント配信を見る

REACT LIVE の機能

Reactライブ動画視聴機能

ライブを視聴

ライブ動画コンポーネント
ルームへの入退室

会話に参加

視聴者のコメント
視聴者リストコンポーネント

さらに詳しく

ライブルーム一覧
アプリケーションのナビゲーション

React ライブストリーミングコンポーネントを詳しく見る

Reactコンポーネントのレイアウトに、動画表示、視聴者コメント、ルーム検索を組み合わせます。

ライブ映像

ライブの瞬間を最優先に

ライブ動画コンポーネントをReactレイアウトに埋め込み、既存の配信に接続します。この統合によって視聴者向けの視聴体験を提供できます。

ドキュメントを読む

import { LiveView } from 'tuikit-atomicx-react';

export function VideoPanel() {
  return <LiveView />;
}

ライブコメント

視聴者に参加してもらう

Reactのライブ映像ビューの横に視聴者コメントを配置します。会話と映像を同じライブ配信ルームに関連付けてください。

ドキュメントを読む

import { BarrageList, BarrageInput } from 'tuikit-atomicx-react';

export function Comments() {
  return <><BarrageList /><BarrageInput /></>;
}

ライブ配信ルーム一覧

ライブ配信中のコンテンツを見つけやすくする

ルーム検索をアプリ内の視聴ページに接続します。

ドキュメントを読む

import { LiveList } from 'tuikit-atomicx-react';

<LiveList
  columnCount={3}
  onLiveRoomClick={openLiveRoom}
/>

カスタマイズ

React Live UI Kit をカスタマイズ

Reactアプリのライブ体験を中心に、動画、視聴者インタラクション、ナビゲーションを配置します。

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

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

ドキュメントを読む

始める

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

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

React Live UI Kit

npm install tuikit-atomicx-react \
  @tencentcloud/uikit-base-component-react

import { useLoginState } from 'tuikit-atomicx-react';

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

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

React でホスト向け配信ページを構築できますか？

React Live Streaming UI Kitは現在、視聴者向けの視聴機能とライブ配信ルーム一覧に対応しています。Reactの配信者向け配信機能は近日提供予定です。すでに利用可能なWeb配信インターフェースが必要な場合は、Vueの配信者向け実装を使用してください。

Vue ライブ配信 UI Kit

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

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

Web ライブ配信 SDK

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

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

React 視聴者向け統合ガイド

React Live Streaming UI Kit のユーザーを認証するにはどうすればよいですか？

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

認証ガイドを読む

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

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

Liveの料金を見る

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

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

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

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

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

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

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

React の視聴者向けコンポーネントを UIKitProvider で囲み、ライトまたはダークテーマを選択します。例えば、LiveList を columnCount={5} と、視聴者用ルートを開く onLiveRoomClick ハンドラーで表示します。ハンドラーでは、選択したルームを視聴フローにつなぐ必要があります。リストの列数を変更するだけでは配信に参加しません。このページの React 統合は視聴者の視聴体験を構築するもので、配信は別の配信者向け統合で実装します。

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

React Live の導入サポート

統合に関する質問

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

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

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

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

営業担当者への連絡

Reactでライブ視聴体験を構築

視聴者をライブ映像、コメント、ルーム検索につなげます。

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

React ライブ配信 UI Kit

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

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

導入ガイド

サンプルとソース

React で商品デモを視聴

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

Reactライブ動画視聴機能

ライブを視聴

会話に参加

さらに詳しく

React ライブストリーミングコンポーネントを詳しく見る

ライブの瞬間を最優先に

視聴者に参加してもらう

ライブ配信中のコンテンツを見つけやすくする

React Live UI Kit をカスタマイズ

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

コメントとコンテンツ

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

アプリを作成

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

最初のルームに接続

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

React でホスト向け配信ページを構築できますか？

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

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

React Live Streaming UI Kit のユーザーを認証するにはどうすればよいですか？

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

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

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

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

React Live の導入サポート

統合に関する質問

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

Reactでライブ視聴体験を構築