tencent cloud

ここでは、UIを有するWeb端末ライブブロードキャストインタラクションコンポーネント、TUIPusher & TUIPlayerをご紹介します。TUIPusher & TUIPlayerはTRTC、IMなどの基本SDKを統合し、企業によるライブブロードキャスト、eコマースマーケティング、業界研修、リモート教育などの様々なライブブロードキャストシーン向けに、すぐにリリースできるWeb端末ライブブロードキャストプッシュプルストリーミングツールによるソリューションをご提供します。

TUIPusher & TUIPlayerのメリット：

• ライブブロードキャストシーンのニーズに合わせ、UI付きのライブブロードキャストシーン向け汎用ソリューションをご提供します。ライブブロードキャストシーンの一般的な機能（デバイス選択、美顔、CSSプッシュ、視聴者によるプル、チャットなど）をすべて網羅し、ビジネスの速やかなリリースを支援します。
• Tencent Cloud Real-Time Communication（TRTC）、Tencent Cloud Instant Messaging（IM）、およびTencent Cloud Super Player（TCPlayer） などの基本SDKに直接接続し、お客様のビジネス機能のフレキシブルな拡張に役立ちます。
• Web端末はユーザーにとって使いやすく、機能のイテレーションも行いやすいというメリットがあります。

クイック体験

TUIPusherとTUIPlayerの機能デモンストレーションについては下図をご参照ください。また、TUIPusher & TUIPlayerの機能をすぐに体験していただけるよう、ユーザー管理システムとルーム管理システムを組み合わせたTUIPusher体験リンクおよびTUIPlayer体験リンクをご提供しています。

注意：

TUIPusherとTUIPlayerを同時に体験するには、異なるアカウントを使用してログインする必要があります。

コードのダウンロード

Web端末ライブブロードキャストインタラクションコンポーネント（TUIPusher & TUIPlayer）のダウンロード方法は次のとおりです。

• TUIPusher
• TUIPlayer

機能の説明

TUIPusherプッシュコンポーネント

• カメラとマイクからのストリームの収集とプッシュをサポート
  • 必要に応じてビデオパラメータ（フレームレート、解像度、ビットレート）を設定
  • 美顔の起動とビデオ美顔パラメータの設定をサポート
• 画面共有ストリームの収集とプッシュをサポート
• Tencent Real-Time Communicationバックエンドへのプッシュ、Tencent Cloud CDNへのプッシュをサポート
• オンラインチャットルームをサポートし、オンライン視聴者とのインタラクティブなチャットを実現
• 視聴者リストの取得、オンライン視聴者のミュート操作の実行をサポート

TUIPlayerプルコンポーネント

• オーディオビデオストリーミングと画面共有ストリーミングの同時再生をサポート
• オンラインチャットルームをサポートし、キャスターおよびその他視聴者のインタラクティブなチャットを実現
• 超低遅延ライブブロードキャスト（300msの遅延）、ライブイベントストリーミング（1000ms以下の遅延）、標準ライブブロードキャスト（超高速同時視聴をサポート）の3種類のプル回線をサポート
• デスクトップブラウザおよびモバイルブラウザの互換性があり、モバイルブラウザの横画面表示が可能

  注意：

  
  一部のブラウザはWebRTCをサポートせず、標準のライブブロードキャスト回線でしか視聴できません。他の回線を体験する場合はブラウザを変更してみてください。

アクセス方法

注意事項

• TUIPusher&TUIPlayerは、Tencent Cloud TRTCとInstant Messagingサービスをベースに開発されています。アカウントと認証を再利用するためには、TRTCアプリケーションとIMアプリケーションのSDKAppIDが一致している必要があります。
• IMアプリケーションは、テキストメッセージに対し、ベーシック版のセキュリティ対策機能を提供します。不適切な単語のカスタム機能を使用したい場合は、アップグレードをクリックします。
• UserSigをローカルで計算する方式は、ローカルでの開発とデバッグのみに使用されます。SECRETKEYが漏洩すると、攻撃者がTencent Cloudトラフィックを盗用する可能性があるので、オンラインで直接発行しないでください。UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。 UserSigが必要なときは、Appからサービスサーバーにリクエストを発出しダイナミックUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。

ステップ1：Tencent Cloudサービスのアクティブ化

ステップ2：プロジェクトの準備

1. GitHubでTUIPusher & TUIPlayerコードをダウンロードします。

2. TUIPusher & TUIPlayerのためにインストールして依存します。

   cd Web/TUIPusher
   npm install
   cd Web/TUIPlayer
   npm install
   

3. sdkAppIdとsecretKeyをTUIPusher/src/config/basic-info-config.js、TUIPlayer/src/config/basic-info-config.js設定ファイルに入力します。
   

4. ローカル開発環境でTUIPusher＆TUIPlayerを実行します。

   cd Web/TUIPusher
   npm run serve
   cd Web/TUIPlayer
   npm run serve
   

5. http://localhost:8080とhttp://localhost:8081を開き、TUIPusherとTUIPlayer機能を体験することができます。

6. TUIPusher/src/config/basic-info-config.js、TUIPlayer/src/config/basic-info-config.js設定ファイル中のルーム，キャスターおよび視聴者などの情報を変更することができます。TUIPusherとTUIPlayerのルーム情報、キャスター情報を一致させてください。

注意：

• 上記設定が完了すると、TUIPusher & TUIPlayerを使用して超低遅延ライブブロードキャストを実行することができます。ライブイベントストリーミングと標準ライブブロードキャストをサポートする必要がある場合は、引き続きステップ3：Relayed Live Streamingをご参照ください。
• UserSigをローカルで計算する方法は、ローカルの開発とデバッグにのみ使用されます。SECRETKEYが漏えいすると、攻撃者がTencent Cloudのトラフィックを盗用する可能性があるので、ネット上にそのままリリースしないでください。
• UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appからサービスサーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。

ステップ3：Relayed live streaming

TUIPusher&TUIPlayerによって実装されるライブイベントストリーミングと標準ライブブロードキャストはTencent Cloud[CSSサービス]（https://www.tencentcloud.com/document/product/267）に依存しているため、ライブイベントストリーミングと標準ライブブロードキャスト回線をサポートするには、Relayed Push機能を有効にする必要があります。

1. TRTCコンソール で現在使用中のアプリケーションのRelayed Push設定を有効にします。必要に応じてRelayed Push用指定ストリームまたはGlobal Auto-relayを起動することができます。
   
2. ドメイン名管理ページで独自の再生ドメイン名を追加します。具体的な内容は独自のドメイン名の追加をご参照ください。
3. TUIPlayer/src/config/basic-info-config.js設定ファイルで再生ドメイン名を設定します。

上記設定が完了すると、TUIPusher & TUIPlayerがサポートする超低遅延ライブブロードキャスト、ライブイベントストリーミング、標準ライブブロードキャストの全機能を体験できます。

ステップ4：本番環境アプリケーション

TUIPusher & TUIPlayerを本番環境アプリケーションに使用する場合は、TUIPusher & TUIPlayerにアクセスすることに加え、次の手順を実行する必要があります。

• ユーザーID、ユーザー名、ユーザープロフィール画像などを含む製品ユーザー情報を管理するためのユーザー管理システムを作成します。
• ライブブロードキャストルームID、ライブブロードキャストルーム名、ライブブロードキャストルームのホスト情報などを含む製品のライブブロードキャストルーム情報を管理するためのルーム管理システムを作成します。
• サーバーがUserSigを発行します。

  注意：

  • ここでのUserSigの発行方法は、クライアントが入力したsdkAppIdとsecretKeyに基づきuserSigを発行する方法です。この方法で発行されるsecretKeyは逆コンパイルによって逆クラッキングされやすく、キーがいったん漏洩すると、攻撃者がお客様のTencent Cloudトラフィックを盗用できるようになります。そのためこの方法はローカルのTUIPusher & TUIPlayerクイックスタート機能デバッグの実行のみに適しています。
  • UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、アプリケーションからサービスサーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。

• TUIPusher/src/pusher.vue、TUIPlayer/src/player.vueファイルを参照し、ユーザー情報、ライブブロードキャストルーム情報、SDKAppId、UserSigなどのアカウント情報をvuexのstoreに送信し、グローバルストレージを実行すると、プッシュプルストリーミングする2つのクライアントの全機能をクイックスタートすることができます。詳細なサービスフローについては下図をご参照ください。
  

関連する質問

Web端末での美顔機能の実現方法。

美顔を有効にするをご参照ください。

Web端末での画面共有の実現方法。

画面共有をご参照ください。

Web端末でのクラウドレコーディングの実現方法。

1. クラウドレコーディング機能を有効にするための具体的な操作については、クラウドレコーディングと再生の実現をご参照ください 。
2. クラウドレコーディング> 指定ユーザーレコーディングを有効にすると、Web端末がTRTC.createClientインターフェース呼び出し時にuserDefineRecordIdパラメータを渡すことによってレコーディングを開始できます。

Web端末でのCDNへのプッシュの実現方法。

Web端末でのCDNへのプッシュについては、CDNへのプッシュの実現 をご参照ください。

#Web端末でのライブイベントストリーミングプルの実現方法。

ライブイベントストリーミングプルの実現方法は、Web SDKを介してCDNにプッシュした後、WebRTCプロトコルを使用してプルします。

注意事項

プラットフォームのサポート

オペレーションシステム（OS）	ブラウザタイプ	ブラウザ最低バージョン要件	TUIPlayer	TUIPusher	TUIPusher画面共有
Mac OS	デスクトップ版Safariブラウザ	11+	サポートあり	サポートあり	サポートあり（Safari13以降のバージョンが必要）
Mac OS	デスクトップ版Chromeブラウザ	56+	サポートあり	サポートあり	サポートあり（Chrome72以降のバージョンが必要）
Mac OS	デスクトップ版Firefoxブラウザ	56+	サポートあり	サポートあり	サポートあり（Firefox66以降のバージョンが必要）
Mac OS	デスクトップ版Edgeブラウザ	80+	サポートあり	サポートあり	サポートあり
Mac OS	デスクトップ版WeChat Embedded Web	-	サポートあり	サポートなし	サポートなし
Mac OS	デスクトップ版WeCom Embedded Web	-	サポートあり	サポートなし	サポートなし
Windows	デスクトップ版Chromeブラウザ	56+	サポートあり	サポートあり	サポートあり（Chrome72以降のバージョンが必要）
Windows	デスクトップ版QQブラウザ（クイックコア）	10.4+	サポートあり	サポートあり	サポートなし
Windows	デスクトップ版Firefoxブラウザ	56+	サポートあり	サポートあり	サポートあり（Firefox66以降のバージョンが必要）
Windows	デスクトップ版Edgeブラウザ	80+	サポートあり	サポートあり	サポートあり
Windows	デスクトップ版WeChat Embedded Web	-	サポートあり	サポートなし	サポートなし
Windows	デスクトップ版WeCom Embedded Web	-	サポートあり	サポートなし	サポートなし
iOS	WeChat内蔵ブラウザ	-	サポートあり	サポートなし	サポートなし
iOS	WeChat Work内蔵ブラウザ	-	サポートあり	サポートなし	サポートなし
iOS	モバイル版Safariブラウザ	-	サポートあり	サポートなし	サポートなし
iOS	モバイル版Chromeブラウザ	-	サポートあり	サポートなし	サポートなし
Android	WeChat内蔵ブラウザ	-	サポートあり	サポートなし	サポートなし
Android	WeComブラウザ	-	サポートあり	サポートなし	サポートなし
Android	モバイル版Chromeブラウザ	-	サポートあり	サポートなし	サポートなし
Android	モバイル版QQブラウザ	-	サポートあり	サポートなし	サポートなし
Android	モバイル版Firefoxブラウザ	-	サポートあり	サポートなし	サポートなし
Android	モバイル端末UCブラウザ	-	サポートあり（標準ライブブロードキャスト視聴のみ）	サポートなし	サポートなし

ドメイン名要件

ユーザーのセキュリティ、プライバシーなどの問題を考慮し、ブラウザはHTTPSプロトコルでしかTUIPusher & TUIPlayerの全機能を正常に使用できないようにウェブページを制限しています。本番環境のユーザーがTUIPusher & TUIPlayerの全機能にスムーズにアクセスし体験できるようにするには、HTTPSプロトコルを使用してオーディオビデオアプリケーションページにアクセスしてください。

注意：

ローカル開発には、http：// localhostプロトコルを使用してアクセスできます。

URLドメイン名およびプロトコルのサポート状況については、以下の表をご参照ください。

ユースケース	プロトコル	TUIPlayer	TUIPusher	TUIPusher画面共有	備考
本番環境	HTTPSプロトコル	サポートあり	サポートあり	サポートあり	推奨
本番環境	HTTPプロトコル	サポートあり	サポートなし	サポートなし	-
ローカル開発環境	http://localhost	サポートあり	サポートあり	サポートあり	推奨
ローカル開発環境	http://127.0.0.1	サポート	サポート	サポート	-
ローカル開発環境	http://[ローカルマシンIP]	サポートあり	サポートなし	サポートなし	-

ファイアウォールの制限

TUIPusher & TUIPlayerは次のポートに依存してデータ送信を実行しています。これらのポートをファイアウォールのホワイトリストに追加してください。

• TCPポート：8687
• UDPポート：8000、8080、8800、843、443、16285
• ドメイン名：qcloud.rtc.qq.com

結び

今後のイテレーションにおいて、TRTC Web端末のプッシュプルコンポーネントは徐々にiOS、Andriodなどの各端末との接続が可能になるほか、Web端末上での視聴者のマイク接続、高度な美顔、カスタムレイアウト、複数のプラットフォームへのリツイート、画像・テキスト・音楽などのアップロード機能が実装されます。ぜひご利用いただき、貴重なご意見をお寄せください。

ご要望やフィードバックなどがございましたら、colleenyu@tencent.comまでご連絡ください。