以下の用途向け：REACT NATIVE

React Native ライブ配信 SDK

Tencent RTCのReact Native Live Streaming SDKでモバイル配信を構築します。ネイティブのビデオビューとルーム状態を、React Nativeの画面やプラットフォーム設定と組み合わせられます。

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

開発者向けリソース

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

API リファレンス

React Native ライブ配信 SDK API を見る。

APIを見るユーザー認証

導入ガイド

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

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

サンプルとソース

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

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

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

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

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

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

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

イベント配信を見る

REACT NATIVE LIVE の機能

React Native ライブ配信機能

ライブ配信を開始

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

人々をつなぐ

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

自分らしく仕上げる

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

React Nativeライブ配信APIを見る

AtomicXCoreのビデオビューとルーム状態をReact Nativeのホストおよび視聴者インターフェースに接続します。

ビデオキャンバス

React Native のライブビデオビューを追加

AtomicXCore のビデオビューを React Native レイアウトに配置します。ルーム状態にバインドし、周囲のコントロールとナビゲーションはアプリ側で用意します。

ドキュメントを読む

import { LiveCoreView } from
  'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';

<LiveCoreView
  liveId={liveID}
  coreViewType="pushView"
  style={{ flex: 1 }}
/>

ライブ配信を開始

React Native でライブ配信を開始

ホストを認証し、ローカルの音声と映像を準備して、ライブ配信ルームを作成します。メディアビューとルームのライフサイクルには同じルームIDを使用してください。

ドキュメントを読む

const { createLive } = useLiveListState();

createLive({
  liveInfo: {
    liveID, liveName: 'Studio sessions',
    seatLayoutTemplateID: 600, keepOwnerOnSeat: true,
  },
  onSuccess: handleStarted, onError: handleError,
});

ルームに参加

視聴者をその瞬間へ

同じルーム ID を使用して視聴者を接続します。

ドキュメントを読む

const { joinLive } = useLiveListState();

joinLive({
  liveID,
  onSuccess: handleJoined, onError: handleError,
});

カスタマイズ

React Native のライブインターフェースをカスタマイズ

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

レイアウト

中心となるビデオキャンバスとルームの状態を軸にインターフェースを構築します。

ドキュメントを読む

始める

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

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

React Native Live SDK

npx expo install react-native-tuikit-atomic-x \
  expo-dev-client expo-build-properties

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

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

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

React NativeライブストリーミングSDKにはビデオビューが含まれていますか？

React Native Live Streaming SDK には、AtomicXCore のビデオビューとルーム状態 API が含まれます。これらのビューを使用するホスト向けおよび視聴者向けのインターフェースはアプリ側で用意します。すぐに使える画面が必要な場合は TUILiveKit をお選びください。

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

SDK API を使用して独自のインターフェースを構築できます。既製の画面とコントロールが必要な場合は UI Kit を選択してください。

React Native ライブ配信 UI Kit

Expo GoでSDKを実行できますか？

SDKにはネイティブモジュールが含まれます。Expo development clientなどのネイティブ開発ビルドを使用し、ガイドに沿ってiOSとAndroidの設定を完了してください。

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

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

認証ガイドを読む

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

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

Liveの料金を見る

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

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

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

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

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

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

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

対応する配信者・視聴者 API で独自画面を構築。コマース、チケット、再生権限フローはアプリが担当。

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

React Native Live の導入サポート

統合に関する質問

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

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

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

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

営業担当者への連絡

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

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

無料で始める SDK ガイドを見る

React Native ライブ配信 SDK

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

API リファレンス

導入ガイド

サンプルとソース

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

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

React Native ライブ配信機能

ライブ配信を開始

人々をつなぐ

自分らしく仕上げる

React Nativeライブ配信APIを見る

React Native のライブビデオビューを追加

React Native でライブ配信を開始

視聴者をその瞬間へ

React Native のライブインターフェースをカスタマイズ

レイアウト

視聴者とのインタラクション

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

アプリを作成

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

最初のルームに接続

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

React NativeライブストリーミングSDKにはビデオビューが含まれていますか？

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

Expo GoでSDKを実行できますか？

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

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

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

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

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

React Native Live の導入サポート

統合に関する質問

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

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