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のメリット:
TUIPusher & TUIPlayerの機能をすぐに体験していただけるよう、ユーザー管理システムとルーム管理システムを組み合わせたTUIPusher体験リンクおよびTUIPlayer体験リンクをご提供しています。
注意:TUIPusherとTUIPlayerを同時に体験するには、異なるアカウントを使用してログインする必要があります。
注意:一部のブラウザではWebRTCがサポートされておらず、標準ライブストリーミング回線を使用した視聴のみ可能です。他の回線の体験をご希望の場合は、ブラウザの変更をお試しください。
注意:
- TUIPusher&TUIPlayerは、Tencent Cloud TRTCとInstant Messagingサービスをベースに開発されています。アカウントと認証を再利用するためには、TRTCアプリケーションとIMアプリケーションのSDKAppIDが一致している必要があります。
- IMアプリケーションは、テキストメッセージに対し、ベーシック版のセキュリティ対策機能を提供します。不適切な単語のカスタム機能を使用したい場合は、アップグレードをクリックします。
- UserSigをローカルで計算する方法は、ローカルの開発とデバッグにのみ使用されます。SECRETKEYが漏えいすると、攻撃者がTencent Cloudトラフィックを盗用する可能性があるので、ネット上にそのまま公開しないでください。UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し、動的にUserSigを取得します。詳細については、サーバーでのUserSig新規作成をご参照ください。
説明TRTCアプリケーションを初めて作成するTencent Cloudアカウントは、10000分間のオーディオビデオリソース無料トライアルパッケージを受け取ることができます。 TRTCプリケーションを作成すると、同じSDKAppIDのIMアプリケーションが自動的に作成され、 IMコンソールでこのアプリケーションのパッケージ情報を設定することができます。
GitHubでTUIPusher & TUIPlayerコードをダウンロードします。
TUIPusher & TUIPlayerのためにインストールして依存します。
cd Web/TUIPusher
npm install
cd Web/TUIPlayer
npm install
sdkAppIdとsecretKeyをTUIPusher/src/config/basic-info-config.js
、TUIPlayer/src/config/basic-info-config.js
設定ファイルに入力します。
ローカル開発環境でTUIPusher&TUIPlayerを実行します。
cd Web/TUIPusher
npm run serve
cd Web/TUIPlayer
npm run serve
http://localhost:8080
とhttp://localhost:8081
を開き、TUIPusherとTUIPlayer機能を体験することができます。
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新規作成をご参照ください。
TUIPusher&TUIPlayerによって実装されるライブイベントストリーミングと標準ライブストリーミングはTencent Cloud[CSSサービス](https://www.tencentcloud.com/document/product/267)に依存しているため、ライブイベントストリーミングと標準ライブストリーミング回線をサポートするには、Relayed Push機能を有効にする必要があります。
TUIPlayer/src/config/basic-info-config.js
設定ファイルで再生ドメイン名を設定します。上記設定が完了すると、TUIPusher & TUIPlayerがサポートする超低遅延ライブストリーミング、ライブイベントストリーミング、標準ライブストリーミングの全機能を体験できます。
TUIPusher & TUIPlayerを本番環境アプリケーションに使用する場合は、TUIPusher & TUIPlayerにアクセスすることに加え、次の手順を実行する必要があります。
注意:
- ここでの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 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までご連絡ください。
この記事はお役に立ちましたか?