tencent cloud
Web

フォーカスモード
フォントサイズ
最終更新日: 2025-12-24 10:30:38
業務プロセス
本節では、オンラインクレーンゲームにおける一般的な業務プロセスをまとめ、シーン全体の実現プロセスをよりよく理解できるようにします。
オンラインクレーンゲーム Real-Time Communication Engine（RTC Engine） 配信
オンラインクレーンゲーム RTMP プッシュ型配信
下図は、オンラインクレーンゲーム RTC Engine プッシュ型配信のシーケンス図を示しており、ネットワークカメラの RTC Engine プッシュ型配信やユーザープル型配信などのプロセスが含まれています。
﻿
下図は、オンラインクレーンゲーム RTMP プッシュ型配信のシーケンス図を示しており、ネットワークカメラの RTMP プッシュ型配信やユーザープル型配信などのプロセスが含まれています。
﻿
導入準備
ステップ1：サービスの開通
オンラインクレーンゲームのシーンでは、通常、Tencent CloudのRTC Engine有料PaaSサービスを利用して構築する必要があります。その中で、RTC Engine はリアルタイム音声動画インタラクション機能を提供します。実際のビジネスニーズに応じて、上記のサービスを自由に選択して開通できます。
1. RTC Engineコンソールにログインし、アプリケーションページでアプリケーションを作成をクリックすると、必要に応じて RTC Engine アプリケーションのバージョンをアップグレードできます。例えば、フラッグシップ版ではより多くの付加価値機能サービスが利用可能になります。
﻿
説明：
テスト環境と本番環境に別々のアプリケーションを作成することをお勧めします。RTC Engineサービスを初めて開通すると、無料の10000分試用パッケージが提供されます。
RTC Engine 月額プラン（体験版、軽量版、標準版、プロフェッショナル版）は、さまざまな付加価値機能サービスを利用できます。詳細は月額プランの説明をご参照ください。
2. アプリケーションの作成が完了したら、アプリケーション > アプリケーション総覧でそのアプリケーションの基本情報を確認できます。その中で、SDKAppID、SDKSecretKeyを適切に保管し、今後の使用に備えてください。同時に、秘密鍵の漏洩による不正なトラフィック使用を防ぐため注意が必要です。
﻿
ステップ2：SDKをインポート
NPM 統合
1. プロジェクトで npm を使用して trtc-sdk-v5 をインストールできます。
npm install trtc-sdk-v5 --save
2. プロジェクトスクリプトでモジュールをインポートします。
import RTC Engine from 'trtc-sdk-v5';
Script 統合
Webページに以下のコードを追加するだけでよい。
<script src="trtc.js"></script>
説明：
trtc.js はプロジェクトローカルにダウンロードして統合する必要があり、対応するSDKのダウンロードリンクとDemoアドレス。
ステップ3：認証と許可
UserSigは、Tencent Cloudが設計したセキュリティ保護署名であり、悪意のある攻撃者によるクラウドサービスの使用権の盗用を防ぐことを目的としています。RTC Engineは入室時にこの認証資格情報を検証します。
デバッグ実行段階：クライアント側のサンプルコードまたはコンソールを使用してUserSigを計算・生成できますが、デバッグテスト専用です。
正式運用段階：より高いセキュリティレベルを提供するサーバー側でUserSig計算方法を推奨します。これにより、クライアント側がリバースエンジニアリングによって秘密鍵が漏洩するのを防ぎます。
具体的な実現フローは以下の通り。
1. お客様のAppは、SDKの初期化関数を呼び出す前に、まずお客様のサーバーにUserSigをリクエストする必要があります。
2. お客様のサーバーはSDKAppIDとUserIDに基づいてUserSigを計算します。
3. サーバーは計算されたUserSigをお客様のAppに返します。
4. お客様のAppは取得したUserSigを特定のAPIを介してSDKに渡します。
5. SDKはSDKAppID + UserID + UserSigをTencent Cloudサーバーに送信し、検証を行います。
6. Tencent CloudはUserSigを検証し、正当性を確認します。
7. 検証が完了すると、RTC Engine SDKにリアルタイム音声動画サービスを提供します。
﻿
﻿
﻿
注意：
デバッグ実行段階でのローカルUserSig計算方法は、オンライン環境での使用をお勧めしません。リバースエンジニアリングで容易に秘密鍵が漏洩する可能性があります。
当社は複数の言語バージョン（Java/Go/PHP/Node.js/Python/C#/C++）のUserSigサーバー側の計算ソースコードを提供しています。詳細はUserSig計算ソースコードをご参照ください。
ステップ4：SDKの初期化とリスニング
RTC Engine SDK インスタンスの作成とイベントリスナーの設定。
const trtc = TRTC.create();
﻿
trtc.on('error', err => {
  console.error(err);
});
説明：
SDKのイベント通知を監視し、一般的なエラーのログ記録と処理を行うことをお勧めします。詳細はエラーコード表をご参照ください。
ステップ5：RTMPプッシュ型配信アドレスを生成します（RTMPプッシュ型配信）
RTMPプッシュ型配信アドレスを生成します。
rtmp://rtmp.rtc.qq.com/push/ルーム番号?sdkappid=アプリケーション&userid=ユーザー名&usersig=署名
RTMP appNameはpushです。
アドレス内のルーム番号、アプリケーション、ユーザー名、署名は業務のものに置き換える必要があります。
パラメータを簡略化するため、文字列のルーム番号のみをサポートし、64文字以内で、文字は数字、アルファベット、アンダースコアのみ使用可能です。
注意：
RTC Engineの他の端末でRTMPストリームを視聴する場合は、文字列ルーム番号で入室してください。
UserSigの生成ルールについては、UserSig関連をご参照ください（署名が有効期限内であることにご注意ください）。
例：
rtmp://rtmp.rtc.qq.com/push/hello-string-room?sdkappid=140*****66&userid=******rtmp2&usersig=eJw1jdE********RBZ8qKGRj8Yp-wVbv*mGMVZqS7w-mMDQL
導入プロセス
API シーケンス図
﻿
ステップ1：クレーンゲームプッシュ型配信
RTC Engine プッシュ型配信
1. クライアント側のサンプルコードとコンソールの二つの方法でUserSigを計算・生成します。
2. SdkAppid、UserId、UserSig、RoomIdなどの情報をRTC Engineネットワークカメラまたはプッシュ型配信ボックスに設定してプッシュ型配信を開始します。
注意：
RTC Engine のルーム番号には、数字型のroomIdと文字列型のstrRoomIdの二種類があります。二種類のルームは相互接続されません。ルーム番号のタイプを統一することをお勧めします。
RTC Engineのユーザーロールは配信者と視聴者に分かれており、配信者のみがストリーミング権限を持ちます。入室時にはユーザーロールを指定する必要があり、指定がない場合はデフォルトで配信者ロールになります。
オンラインプライズゲームシーンでは、入室モードとしてrtcモードを選択することをお勧めします。これにより遅延が低減されます。
RTMPプッシュ型配信
1. RTMPアドレスジェネレータを使用してRTMPプッシュ型配信アドレスを生成します。
﻿
﻿
﻿
2. RTMPプッシュ型配信アドレスをRTMPネットワークカメラまたはプッシュ型配信ボックスに設定してプッシュ型配信を開始します。
ステップ2：ユーザー入室のプル型配信
1. ユーザーがRTC Engineルームに入室します。
const trtc = TRTC.create();
// 入室
try {
  await trtc.enterRoom({ strRoomId, scene:'rtc', sdkAppId, userId, userSig});
  console.log('入室成功');
} catch (error) {
  console.error('入室失敗' + error);
}
2. ユーザーがアンカーのオーディオ・ビデオストリームをサブスクライブします。
﻿
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
  // ビデオ画面を再生するには、DOMにHTMLElementを配置する必要があります。これはdivタグであってもよい。例えば、idが${userId}_${streamType}と仮定した場合。
  const view = ${userId}_${streamType};
  trtc.startRemoteVideo({ userId, streamType, view });
});
﻿
trtc.on(TRTC.EVENT.FIRST_VIDEO_FRAME, event => {
   // event.height: ビデオの高さ
   // event.width: ビデオの幅
   // event.streamType: ビデオストリームのタイプ.
   // event.userId: ユーザーIDであり、空の文字列の場合はローカルビデオを表します。
})
ステップ3：ユーザーの退室
1. ユーザーが退室します。
await trtc.exitRoom(); 
// 退室に成功した後、今後 rtc engine インスタンスを使用する必要がない場合は、trtc.destroyメソッドを呼び出してインスタンスを破棄し、関連リソースを適時に解放できます。
// 破棄後の rtc engine インスタンスは継続して使用できず、新しいインスタンスを再作成する必要があります。
trtc.destroy();
2. ルームを解散。
サーバー側でルームを解散
RTC Engineは、サーバー側での数字型ルーム解散API [DismissRoom] と文字列型ルーム解散API DismissRoomByStrRoomId を提供しています。サーバー側のルーム解散インターフェースを呼び出すことで、ルーム内のすべてのユーザーをルームから退室させ、ルームを解散することができます。
クライアント側でルームを解散
クライアント側にはルームを直接解散するAPIがなく、各クライアントがexitRoomを呼び出して退室する必要があります。ルーム内のすべての配信者と視聴者が退室すると、RTC Engineのルームライフサイクルルールに従ってルームは自動的に解散されます。詳細はRTC Engine 退室をご参照ください。
異常処理
自動再生ポリシー制限
Web側でプル型配信シーンでは、ユーザーが入室する際の体験を向上させるため、デフォルトでルーム入室後に自動再生するように設定されています。しかし、Android および iOS の Webview では、デフォルトの自動再生ポリシーがブラウザと異なる場合があります。以下のドキュメントを参考に、Appで自動再生制限を無効化することができます。
Android Webview 自動再生制限の無効化：setMediaPlaybackRequiresUserGesture(false)を呼び出して自動再生制限を無効化します。
iOS Webview 自動再生制限の無効化：mediaTypesRequiringUserActionForPlaybackをWKAudiovisualMediaTypeNoneに設定します。
説明：
自動再生ポリシー制限に関する完全な対処方法については、、Tutorial: 自動再生制限の対処方法をご参照ください。
RTC Engine iOS のWeChatブラウザでの自動再生は、上記の方法では有効にならない場合があります。必要であれば、当社までお問い合わせください。