TUIPusher&TUIPlayer (Web)の統合

最終更新日:2024-07-19 15:35:35

TUIPusher&TUIPlayer (Web)の統合

最終更新日: 2024-07-19 15:35:35

コンポーネントの説明
TUIPusher & TUIPlayerは、Web端末オープンソースの、UIを備えたライブストリーミングインタラクションコンポーネントです。TUIPusher & TUIPlayerはTRTC、 IMなどの基本SDKを統合し、企業によるライブストリーミング、eコマースマーケティング、業界研修、リモート教育などの様々なライブストリーミングシーン向けに、すぐにリリースできるWeb端末ライブストリーミングプッシュプルストリーミングツールによるソリューションをご提供します。
説明：
TUIKitシリーズコンポーネントはTencent CloudのTRTCとIMという2つの基本的なPaaSサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期してアクティブ化することができます。 IMサービスの課金ルールの詳細については、Instant Messagingの料金説明をご参照ください。TRTCをアクティブ化すると、関連するIM SDKの体験版がデフォルトでアクティブ化されます。これは100 DAUのみをサポートします。
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プッシュコンポーネントの機能説明
カメラとマイクからのストリームの収集とプッシュをサポート
必要に応じてビデオパラメータ（フレームレート、解像度、ビットレート）を設定
美顔の起動とビデオ美顔パラメータの設定をサポート
画面共有ストリームの収集とプッシュをサポート
Tencent Real-Time Communicationバックエンドへのプッシュ、Tencent Cloud CDNへのプッシュをサポート
オンラインチャットルームをサポートし、オンライン視聴者とのインタラクティブなチャットを実現
視聴者リストの取得、オンライン視聴者のミュート操作の実行をサポート
TUIPlayerプルコンポーネントの機能説明
オーディオビデオストリーミングと画面共有ストリーミングの同時再生をサポート
オンラインチャットルームをサポートし、キャスターおよびその他視聴者のインタラクティブなチャットを実現
超低遅延ライブストリーミング（300msの遅延）、ライブイベントストリーミング（1000ms以下の遅延）、標準ライブストリーミング（超高速同時視聴をサポート）の3種類のプル回線をサポート
デスクトップブラウザおよびモバイル端末ブラウザとの互換性あり、モバイル端末ブラウザの横画面表示をサポート
ご注意：
一部のブラウザではWebRTCがサポートされておらず、標準ライブストリーミング回線を使用した視聴のみ可能です。他の回線の体験をご希望の場合は、ブラウザの変更をお試しください。
コンポーネントの統合
ステップ1：Tencent Cloudサービスのアクティブ化
ご注意：
TUIPusher&TUIPlayerは、Tencent Cloud TRTCとInstant Messagingサービスをベースに開発されています。アカウントと認証を再利用するためには、TRTCアプリケーションとIMアプリケーションのSDKAppIDが一致している必要があります。
IMアプリケーションは、テキストメッセージに対し、ベーシック版のセキュリティ対策機能を提供します。不適切な単語のカスタム機能を使用したい場合は、アップグレードをクリックします。
-UserSigをローカルで計算する方法は、ローカルの開発とデバッグにのみ使用されます。SECRETKEYが漏えいすると、攻撃者がTencent Cloudトラフィックを盗用する可能性があるので、ネット上にそのまま公開しないでください。UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し、動的にUserSigを取得します。詳細については、サーバーでのUserSig新規作成をご参照ください。
方法1：TRTCの場合
方法2：インスタントメッセージIMの場合
ステップ1：TRTCアプリケーションの作成
1. Tencent Cloudアカウントの登録を行い、Tencent Real-Time Communication（TRTC）とInstant Messagingサービスをアクティブ化します。
2. ﻿TRTCコンソール で、アプリケーション管理>アプリケーションの作成 をクリックし、新たなアプリケーションを作成します。
﻿
﻿
ステップ2： TRTCキー情報の取得
1. アプリケーション管理>アプリケーション情報でSDKAppID情報を取得します。
﻿
﻿
2. アプリケーション管理>クイックマスターでアプリケーションのsecretKey情報を取得します。
﻿
﻿
説明：
TRTCアプリケーションを初めて作成するTencent Cloudアカウントは、10000分間のオーディオビデオリソース無料トライアルパッケージを受け取ることができます。
TRTCプリケーションを作成すると、同じSDKAppIDのIMアプリケーションが自動的に作成され、 IMコンソールでこのアプリケーションのパッケージ情報を設定することができます。
ステップ1：IMアプリケーションの作成
1. ﻿IMコンソールにログインし、新しいアプリケーションの作成をクリックするとダイアログボックスがポップアップします。
﻿
﻿
2. 自分のアプリケーション名を入力して、確定をクリックすると作成が完了します。
﻿
﻿
3. IMコンソールの概要画面で、新規作成したアプリケーションのステータス、サービスバージョン、SDKAppID、作成時間、有効期限を確認することができます。SDKAppID情報を記録してください。
ステップ2：IMキーを取得してTRTC Video Serviceをアクティブにする
1. ﻿IMコンソールの概要ページで、自分で作成を完了したIMアプリケーションをクリックして、直ちにそのアプリケーションの基本設定ページにリダイレクトします。基本情報領域で、キーの表示をクリックして、キー情報をコピーし保存します。
﻿
﻿
ご注意：
キー情報を適切に保管して、漏えいしないようにしてください。
﻿
2. そのアプリケーションの基本設定ページで、Tencent Cloud TRTC Video Serviceをアクティブにします。
﻿
﻿
ステップ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サービス に依存しているため、ライブイベントストリーミングと標準ライブストリーミング回線をサポートするには、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 Embeddedブラウザ
-
サポートあり
サポートなし
サポートなし
iOS
WeCom Embeddedブラウザ
-
サポートあり
サポートなし
サポートなし
iOS
モバイル版Safariブラウザ
-
サポートあり
サポートなし
サポートなし
iOS
モバイル版Chromeブラウザ
-
サポートあり
サポートなし
サポートなし
Android
WeChat Embeddedブラウザ
-
サポートあり
サポートなし
サポートなし
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を使用する時、ユーザはファイアーフォールの制限でオーディオビデオ通話を利用できない可能性があります。ファイアウォール制限への対応 を参照し、関連するポートとドメイン名をファイアウォールのホワイトリストに追加してください。
結び
今後のイテレーションにおいて、TRTC Web端末のプッシュプルコンポーネントは徐々にiOS、Andriodなどの各端末との接続が可能になるほか、Web端末上での視聴者のマイク接続、高度な美顔、カスタムレイアウト、複数のプラットフォームへのリツイート、画像・テキスト・音楽などのアップロード機能が実装されます。ぜひご利用いただき、貴重なご意見をお寄せください。
ご要望やフィードバックなどがございましたら、colleenyu@tencent.comまでご連絡ください。

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

営業担当者にお問い合わせいただくかチケットを提出してサポートを求めることができます。

はい

いいえ

フィードバック

オペレーションシステム（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 Embeddedブラウザ	-	サポートあり	サポートなし	サポートなし
iOS	WeCom Embeddedブラウザ	-	サポートあり	サポートなし	サポートなし
iOS	モバイル版Safariブラウザ	-	サポートあり	サポートなし	サポートなし
iOS	モバイル版Chromeブラウザ	-	サポートあり	サポートなし	サポートなし
Android	WeChat Embeddedブラウザ	-	サポートあり	サポートなし	サポートなし
Android	WeComブラウザ	-	サポートあり	サポートなし	サポートなし
Android	モバイル版Chromeブラウザ	-	サポートあり	サポートなし	サポートなし
Android	モバイル版QQブラウザ	-	サポートあり	サポートなし	サポートなし
Android	モバイル版Firefoxブラウザ	-	サポートあり	サポートなし	サポートなし
Android	モバイル版UCブラウザ	-	サポートあり（標準ライブストリーミング視聴のみサポート）	サポートなし	サポートなし

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

tencent cloud

コンポーネントの説明

クイック体験

TUIPusherプッシュコンポーネントの機能説明

TUIPlayerプルコンポーネントの機能説明

コンポーネントの統合

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

ステップ1：TRTCアプリケーションの作成

ステップ2： TRTCキー情報の取得

ステップ1：IMアプリケーションの作成

ステップ2：IMキーを取得してTRTC Video Serviceをアクティブにする

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

ステップ3：Relayed live streaming

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

関連する質問

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

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

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

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

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

注意事項

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

ドメイン名要件

ファイアウォールの制限

結び