tencent cloud

フィードバック

TUIPusher&TUIPlayer (Web)の統合

最終更新日:2022-06-27 15:59:29

    コンポーネントの説明

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

    説明:

    TUIKitシリーズコンポーネントはTencent CloudのTRTCIMという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アプリケーションの作成

    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コンソールでこのアプリケーションのパッケージ情報を設定することができます。
  • ステップ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.jsTUIPlayer/src/config/basic-info-config.js設定ファイルに入力します。

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

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

    6. TUIPusher/src/config/basic-info-config.jsTUIPlayer/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://intl.cloud.tencent.com/document/product/267)に依存しているため、ライブイベントストリーミングと標準ライブストリーミング回線をサポートするには、Relayed Push機能を有効にする必要があります。

    1. TRTCコンソール で現在使用中のアプリケーションのRelayed Push設定を有効にします。必要に応じてRelayed Push用指定ストリームまたはGlobal Auto-relayを起動することができます。
      img
    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.vueTUIPlayer/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は次のポートに依存してデータ送信を実行しています。これらのポートをファイアウォールのホワイトリストに追加してください。

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

    結び

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

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

    お問い合わせ

    カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

    テクニカルサポート

    さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

    電話サポート(24 時間365日対応)