以下の用途向け：FLUTTER

Flutter ライブ配信 UI Kit

Tencent RTC の Flutter Live Streaming UI Kit で配信者と視聴者をつなぎましょう。Flutter アプリに TUILiveKit ウィジェットを追加して、配信、視聴、ルームの検索を実現できます。

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

開発者向けリソース

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

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

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

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

導入ガイド

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

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

サンプルとソース

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

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

Flutterでの商品ライブデモ

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

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

Flutter でのライブイベント視聴

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

イベント配信を見る

FLUTTER LIVE の機能

Flutterライブ配信機能

ライブ配信を開始

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

人々をつなぐ

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

自分らしく仕上げる

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

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

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

ホストプレビュー

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

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

ドキュメントを読む

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
  builder: (_) => TUILiveRoomAnchorOverlay(roomId: liveID),
));

視聴者ビュー

視聴体験をアプリに統合

選択したライブ配信ルームでFlutterの視聴者ビューを開きます。ルームへの入退室をアプリのナビゲーションに連携させます。

ドキュメントを読む

Navigator.push(context, MaterialPageRoute(
  builder: (_) => TUILiveRoomAudienceOverlay(
    roomId: liveID,
    liveInfo: LiveInfo(liveID: liveID),
  ),
));

ライブ配信ルーム一覧

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

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

ドキュメントを読む

LiveListWidget(
  style: LiveListViewStyle.doubleColumn,
);

カスタマイズ

Flutter Live UI Kitをカスタマイズ

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

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

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

ドキュメントを読む

始める

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

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

Flutter Live UI Kit

flutter pub add tencent_live_uikit

import 'package:atomic_x_core/atomicxcore.dart';

await LoginStore.shared.login(
  sdkAppID: SDKAppID, userID: userID, userSig: userSig,
);

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

Flutter Live UI Kitで何を構築できますか？

Flutter Live Streaming UI Kit には、配信者、視聴者、ライブルーム一覧の各インターフェースが含まれています。これらの TUILiveKit コンポーネントをユーザーアカウントと Flutter ナビゲーションに接続して、完全な視聴フローを構築できます。

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

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

Flutter ライブ配信 SDK

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

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

Flutter視聴者向け統合ガイド

FlutterライブストリーミングUI Kitのユーザーを認証するにはどうすればよいですか？

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

認証ガイドを読む

Flutter Live Streaming UI Kit は無料で使用できますか？

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

Liveの料金を見る

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

文書記載の Flutter パッケージをインストールし、対象ごとにネイティブプロジェクトを設定します。iOS と Android の動作と合わせてウィジェットのライフサイクルをテストしてください。

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

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

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

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

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

保守するソースのコピーで、配信者画面の PNG アセットと ARB ローカライズファイルをカスタマイズします。例えば、livekit_en.arb のラベルを変更し、flutter gen-l10n を実行してローカライズコードを再生成します。ComponentTheme と LiveKit のナビゲーションオブザーバーは接続したままにしてください。TUILiveRoomAnchorOverlay は独自にオーバーレイとフローティングウィンドウを管理するため、Container や Stack の中に入れず、独立したルートとして開く必要があります。

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

Flutter Live の導入サポート

統合に関する質問

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

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

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

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

営業担当者への連絡

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

FlutterライブストリーミングUI Kitとプラットフォームガイドで、クリエイターと視聴者をつなぎます。

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

Flutter ライブ配信 UI Kit

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

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

導入ガイド

サンプルとソース

Flutterでの商品ライブデモ

Flutter でのライブイベント視聴

Flutterライブ配信機能

ライブ配信を開始

人々をつなぐ

自分らしく仕上げる

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

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

視聴体験をアプリに統合

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

Flutter Live UI Kitをカスタマイズ

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

コメントとコンテンツ

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

アプリを作成

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

最初のルームに接続

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

Flutter Live UI Kitで何を構築できますか？

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

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

FlutterライブストリーミングUI Kitのユーザーを認証するにはどうすればよいですか？

Flutter Live Streaming UI Kit は無料で使用できますか？

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

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

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

Flutter Live の導入サポート

統合に関する質問

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

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