tencent cloud

Tencent Real-Time Communication

お知らせ・リリースノート
製品アップデート情報
Tencent Cloudオーディオビデオ端末SDKの再生アップグレードおよび承認チェック追加に関するお知らせ
TRTCアプリケーションのサブスクリプションパッケージサービスのリリースに関する説明について
製品の説明
製品概要
基礎概念
製品の機能
製品の強み
ユースケース
性能データ
購入ガイド
Billing Overview
無料時間の説明
Monthly subscription
Pay-as-you-go
TRTC Overdue and Suspension Policy
課金に関するよくあるご質問
Refund Instructions
初心者ガイド
Demo体験
Call
コンポーネントの説明(TUICallKit)
Activate the Service
Run Demo
クイック導入
オフライン通知
Conversational Chat
クラウドレコーディング(TUICallKit)
AI Noise Reduction
インターフェースのカスタマイズ
Calls integration to Chat
Additional Features
No UI Integration
Server APIs
Client APIs
Solution
ErrorCode
公開ログ
よくある質問
ライブ配信
Billing of Video Live Component
Overview
Activating the Service (TUILiveKit)
Demo のクイックスタート
No UI Integration
UI Customization
Live Broadcast Monitoring
Video Live Streaming
Voice Chat Room
Advanced Features
Client APIs
Server APIs
Error Codes
Release Notes
FAQs
RTC Engine
Activate Service
SDKのダウンロード
APIコードサンプル
Usage Guidelines
クライアント側 API
高度な機能
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
コンソールガイド
アプリケーション管理
使用統計
監視ダッシュボード
開発支援
Solution
Real-Time Chorus
よくあるご質問
課金関連問題
機能関連
UserSig関連
ファイアウォールの制限の対応関連
インストールパッケージの圧縮に関するご質問
AndriodおよびiOS関連
Web端末関連
Flutter関連
Electron関連
TRTCCalling Web関連
オーディオビデオ品質関連
その他のご質問
旧バージョンのドキュメント
TUIRoom(Web)の統合
TUIRoom (Android)の統合
TUIRoom (iOS)の統合
TUIRoom (Flutter)の統合
TUIRoom (Electron)の統合
TUIRoom APIのクエリー
クラウドレコーディングと再生の実現(旧)
Protocols and Policies
セキュリティコンプライアンス認証
セキュリティホワイトペーパー
情報セキュリティの説明
Service Level Agreement
Apple Privacy Policy: PrivacyInfo.xcprivacy
TRTC ポリシー
プライバシーポリシー
データ処理とセキュリティ契約
用語集

TUIRoom (Flutter)の統合

PDF
フォーカスモード
フォントサイズ
最終更新日: 2024-07-19 15:35:35
当社のAppをダウンロードしてインストールし、多人数オーディオビデオルームの効果をご体験いただけます。これには、画面共有、美顔、低遅延ミーティングなど、TRTCの多人数オーディオビデオルームシーン関連の機能が含まれています。
説明:
TUIKitシリーズコンポーネントはTencent CloudのTRTCIMという2つの基本的なPaaSサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期的にアクティブにすることができます。IMサービスの課金ルールの詳細については、Instant Messagingの料金説明をご参照ください。TRTCをアクティブにすると、デフォルトでは、100DAUまでサポートするIM SDK体験版もアクティブになります。

AppのUIの再利用

ステップ1:新規アプリケーションの作成

1. TRTCコンソールにログインし、開発支援 > Demoクイックスタートを選択します。
2. アプリケーション名(例:TestMeetingRoom)を入力し、作成をクリックします。
3. ダウンロードしました。次のステップをクリックすると、この手順をスキップします。



ご注意:
本機能はTencent CloudのTRTCIMという2つの基本的なPaaSサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期的にアクティブにすることができます。IMは付加価値サービスであり、課金ルールの詳細については 、Instant Messagingの料金説明をご参照ください。

ステップ2:Appソースコードのダウンロード

TRTCFlutterScenesDemoクリックして当該ページに入り、ソースコードをCloneまたはダウンロードします。

ステップ3:Appファイルの設定

1. 設定変更画面に進み、ダウンロードしたソースコードパッケージに基づき、対応する開発環境を選択します。
2. /lib/debug/GenerateTestUserSig.dartファイルを見つけて開きます。
3. GenerateTestUserSig.dart ファイル内の関連パラメータを設定します:
SDKAPPID: A placeholder by default. Set it to the actual `SDKAppID`.
SECRETKEY: A placeholder by default. Set it to the actual secret key.



4. 貼り付け完了後、貼り付けました。次のステップをクリックすれば、作成が完了します。
5. コンパイル完了後、 コンソール概要に戻る をクリックすれば終了です。
ご注意:
ここで言及したUserSigの新規作成ソリューションでは、クライアントコードでSECRETKEYを設定します。この手法のうちSECRETKEYは逆コンパイルによって逆向きにクラッキングされやすく、キーがいったん漏洩すると、攻撃者はTencent Cloudトラフィックを盗用できるようになります。そのためこの手法は、ローカルのDemoクイックスタートおよび機能デバッグにのみ適合します
UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、App向けのインターフェースを提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを発出し動的にUserSigを取得します。詳細はサーバーでUserSigを生成するをご参照ください。

ステップ4:コンパイルと実行

ご注意:
Android端末は実際のマシンで実行する必要があり、エミュレーターのデバッグはサポートされていません。
1. flutter pub getを実行します。
2. コンパイルを実行し、デバッグを行います:
iOS 端末
Android 端末
1. XCode(11.0およびそれ以降のバージョン)を使用して、ソースコードディレクトリの /iosプロジェクト を開きます。
2. コンパイルを行い、Demoプロジェクトを実行します。
1. flutter runを実行します。
2. Android Studio(3.5およびそれ以降のバージョン)を使用して、ソースプロジェクトを開き、実行をクリックすれば完了です。

ステップ5:Demoソースコードの修正

ソースコードのTRTCMeetingDemoフォルダには、uiとmodelの2つのサブフォルダが含まれ、uiフォルダの中はいずれもインターフェースコードです。以下の表にはファイルまたはフォルダおよび対応するUIをリストアップし、二次調整に便利です:
ファイルまたはフォルダ
機能説明
TRTCMeetingIndex.dart
ミーティング作成または参加インターフェース
TRTCMeetingRoom.dart
ビデオミーティングのメインインターフェース
TRTCMeetingMemberList.dart
参加者リストインターフェース
TRTCMeetingSetting.dart
ビデオミーティング関連パラメータ設定インターフェース

UIカスタマイズの実装

ソースコードの中のTRTCMeetingDemoフォルダにはuiとmodelの2つのサブフォルダが含まれ、modelフォルダには再利用可能なオープンソースコンポーネントTRTCMeetingが含まれています。TRTCMeeting.dartファイルの中からこのコンポーネントが提供するインターフェース関数を見つけ、対応するインターフェースを使用してカスマイズUIを実装することが可能です。



ステップ1:SDKの統合

インタラクティブライブストリーミングコンポーネントTRTCMeetingは、TRTC SDKIM SDKに依存しています。pubspec.yamlを設定することで、自動的にダウンロードして更新できます。
プロジェクトのpubspec.yaml に次の依存関係を記述します:
dependencies:
tencent_trtc_cloud: 最新バージョン番号
tencent_im_sdk_plugin: 最新バージョン番号

ステップ2:権限の設定および難読化ルール

iOS 端末
Android 端末
Info.plistにカメラとマイクの権限申請を追加してください:
<key>NSMicrophoneUsageDescription</key>
<string>通常の音声通話が行えるようにマイクの権限を承認します</string>
1. /android/app/src/main/AndroidManifest.xmlファイルを開きます。
2. xmlns:tools="http://schemas.android.com/tools" をmanifestの中に追加します。
3. `tools:replace="android:label"をapplicationの中に追加します。
explain
この手順を実行しないと、Android Manifest merge failedコンパイルの失敗という問題が発生します。

アイコン



ステップ3:TRTCMeetingコンポーネントのインポート

次のディレクトリ内のすべてのファイルをプロジェクトにコピーします:
lib/TRTCMeetingDemo/model/

ステップ4:コンポーネントの作成およびログイン

1. sharedInstanceインターフェースを呼び出すと、TRTCMeetingコンポーネントのインスタンスオブジェクトを作成できます。
2. registerListener関数を呼び出して、コンポーネントのイベント通知を登録します。
3. login関数を呼び出してコンポーネントのログインを完了します。下表を参考にキーパラメータを入力してください:
パラメータ名
作用
sdkAppId
TRTCコンソール で SDKAppIDを表示できます。
userId
現在のユーザーID。文字列タイプであり、英語のアルファベット(a-z、A-Z)、数字(0-9)、ハイフン(-)とアンダーライン(_)のみ使用できます。業務の実際のアカウントシステムと組み合わせてご自身で設定することをお勧めします。
userSig
Tencent Cloudによって設計されたセキュリティ保護署名。取得方法については、UserSigの計算、使用方法をご参照ください。
TRTCMeeting trtcMeeting = TRTCMeeting.sharedInstance();
trtcMeeting.registerListener(onListener);
ActionCallback res = await trtcMeeting.login(
GenerateTestUserSig.sdkAppId,
userId,
GenerateTestUserSig.genTestSig(userId),
);
if (res.code == 0) {
// ログイン成功
}


ステップ5:多人数ミーティングの新規作成

1. キャスターは、手順4でログインした後、setSelfProfileを呼び出して自身のニックネームおよびプロフィール画像を設定することができます。
2. キャスターがcreateMeetingを呼び出し、新しいミーティングルームを作成します。
3. キャスターは、startCameraPreviewを呼び出してビデオ画面をキャプチャすることができ、startMicrophoneを呼び出して音声をキャプチャすることもできます。
4. キャスターに美顔のニーズがある場合は、インターフェース上に美顔調節ボタンを設定して呼び出すことができ、getBeautyManager を介して美顔設定を行います。
説明:
エンタープライズ版以外のSDKは変顔やスタンプの機能をサポートしていません。



// 1. キャスターがニックネームとプロフィール画像を設定
trtcMeeting.setSelfProfile('my_name', 'my_avatar');

// 2. キャスターがミーティングを作成
ActionCallback res = await trtcMeeting.createMeeting(roomId);
if (res.code == 0) {
// ミーティング作成に成功
// 3. カメラと音声キャプチャを起動
trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId);
trtcMeeting.startMicrophone();
// 4. 美顔設定
trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU);
trtcMeeting.getBeautyManager().setBeautyLevel(6);
}


ステップ6:参加者の多人数ミーティングへの参加

1. 参加者は、手順4でログインした後、setSelfProfileを呼び出して自身のニックネームおよびプロフィール画像を設定することができます。
2. 参加者は、enterMeeting呼び出してミーティングルーム番号を渡すと、ミーティングルームに参加できます。
3. 参加者は、startCameraPreviewを呼び出してビデオ画面をキャプチャすることができ、またstartMicrophoneを呼び出して音声をキャプチャすることもできます。
4. 他の参加者がカメラを起動すると、onUserVideoAvailableのイベントを受け取ります。この時、startRemoteViewを呼び出してuserIdを渡すと再生を開始できます。



// 1. 参加者がニックネームとプロフィール画像を設定
trtcMeeting.setSelfProfile('my_name', 'my_avatar');

// 2. 参加者がenterMeetingを呼び出してミーティングルームに参加
ActionCallback res = await trtcMeeting.enterMeeting(roomId);
if (res.code == 0) {
// ミーティング参加に成功
// 3. カメラと音声キャプチャを起動
trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId);
trtcMeeting.startMicrophone();
// 4. 美顔設定
trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU);
trtcMeeting.getBeautyManager().setBeautyLevel(6);
}

// 5. 参加者が他のメンバーのカメラ起動の通知を受信し、再生が開始されます
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onUserVideoAvailable:
if (param['available']) {
trtcMeeting.startCameraPreview(
param['userId'],
TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG,
TRTCCloudVideoViewId
);
}else{
trtcMeeting.stopRemoteView(
param['userId'],
TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG
);
}
break;
}
}


ステップ7:画面共有

1. 画面共有機能は、システムにフローティングウィンドウの権限を申請する必要があり、自分でUIの中で特定のロジックを実装してください。
2. startScreenCaptureを呼び出し、エンコードパラメータとスクリーンキャプチャのプロセスのフローティングウィンドウを渡すと、画面共有機能を実装できます。具体的な情報については、TRTC SDKをご参照ください。
3. ミーティング中の他メンバーがonUserVideoAvailableのイベント通知を受け取ります。
ご注意:
画面共有とカメラキャプチャは相互排他的な操作です。画面共有機能をアクティブにしたい場合は、先にstopCameraPreviewを呼び出してカメラキャプチャを停止してください。詳細については、TRTC SDKをご参照ください。
await trtcMeeting.stopCameraPreview();
trtcMeeting.startScreenCapture(
videoFps: 10,
videoBitrate: 1600,
videoResolution: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_1280_720,
videoResolutionMode: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_MODE_PORTRAIT,
appGroup: iosAppGroup,
);


ステップ8:文字チャットとミュートメッセージの実現

sendRoomTextMsgにより、ノーマルなテキストメッセージを送信でき、そのミーティングのすべての参加者がonRecvRoomTextMsgのコールバックを受信します。IMバックエンドにはデフォルトのセンシティブワードフィルタリングルールが備わっており、センシティブワードと判定されたテキストメッセージがクラウドで転送されることはありません。
// 発信側:テキストメッセージの発信
trtcMeeting.sendRoomTextMsg('Hello Word!');
// 受信側:テキストメッセージのモニタリング
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onRecvRoomTextMsg:
print( param['userName'] + 'からのメッセージ:' + param['message']+'を受信' );
break;
}
}

sendRoomCustomMsgにより、カスタム(シグナリング)メッセージを送信でき、そのミーティングのすべての参加者がonRecvRoomCustomMsgのコールバックを受信します。カスタムメッセージは、通常カスタマイズしたシグナリングの転送に使用されます(例:ミュートの会場内制御など)。
// 送信側:カスタマイズしたcmdでミュートの通知を区別できます
// eg: "CMD_MUTE_AUDIO"はミュートの通知を表します
trtcMeeting.sendRoomCustomMsg('CMD_MUTE_AUDIO', '1');
// 受信側:カスタムメッセージのモニタリング
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onRecvRoomCustomMsg:
if (param['command'] == 'CMD_MUTE_AUDIO') {
// ミュートの通知を受信します
print(param['userName'] +'から' + 'のミュートの通知:' + param['message']'を受信');
trtcMeeting.muteLocalAudio(message == '1');
}
break;
}
}


ヘルプとサポート

この記事はお役に立ちましたか?

フィードバック