WebRTCオンラインライブストリーミング

最終更新日:2021-10-12 12:56:52

    TWebLiveの概要

    TWebLiveはTencent CloudのWebライブストリーミングインタラクションコンポーネントです。Tencent Cloud端末R&Dチームによって開発された新しいSDKで、Tencent CloudのTRTC、IM、およびSuper Player TCPlayerを統合し、Webライブストリーミングにおけるインタラクティブなシナリオでよく見られる機能(プッシュ、マイクのオン/オフ、カメラのオン/オフ、WeChatの共有視聴、チャットの「いいね!」など)をカバーすると同時に、簡単で使いやすいAPIがパッケージされ、アクセスすると素早くWeb端末でプッシュ、プル、およびリアルタイムチャットなどのインタラクティブな機能を実現することができます。Demoに参加して体験できます。

    TWebLiveの特徴

    次の例示説明のとおり、開発者はこのTWebLive SDKを使用して、Flashプッシュソリューションと完全に置き換えることができ、Webプッシュ、低遅延Web視聴、CDN視聴、リアルタイムチャットインタラクション(または弾幕)を実現するための複雑さと時間コストを最大限に削減できます。

    プッシュする必要がある場合は、Pusher(プッシュ)オブジェクトを作成します。最も簡単なプッシュ操作は3ステップのみです。

    <div id="pusherView" style="width:100%; height:auto;"></div>
    <script>
    // 1、Pusher(プッシュ)オブジェクトを作成します
    let pusher = TWebLive.createPusher({ userID: 'your userID' });

    // 2、レンダリングインターフェースを設定し、マイクで音声を収集し、カメラで映像を収集します(デフォルト720p)
    pusher.setRenderView({
    elementID: 'pusherView',
    audio: true,
    video: true
    }).then(() => {
    // 3、sdkappid roomidなどの情報を入力し、プッシュします
    // urlは room:// から始まる必要があります
    let url = room://sdkappid=<span class="hljs-subst">${SDKAppID}</span>&amp;roomid=<span class="hljs-subst">${roomID}</span>&amp;userid=<span class="hljs-subst">${userID}</span>&amp;usersig=<span class="hljs-subst">${userSig}</span>&amp;livedomainname=<span class="hljs-subst">${liveDomainName}</span>&amp;streamid=<span class="hljs-subst">${streamID}</span>;
    pusher.startPush(url).then(() => {
    console.log('pusher | startPush | ok');
    });
    }).catch(error => {
    console.error('pusher | setRenderView | failed', error);
    });
    </script>

    開発者の開発コストと人件費を削減するため、TWebLive SDKをベースに、PCとモバイルブラウザの両方に適合するオープンソースのDemoをGithubで提供しています。開発者はプロジェクトをfork&cloneしてローカルデバイスに複製し、若干の変更を加えてDemoを実行できます。また、Demoを自身のプロジェクトに統合してデプロイや起動することができます。

    TWebLiveの使用

    注意事項

    • アカウントと認証を再利用するためには、TRTCアプリケーションとIMアプリケーションのSDKAppIDが一致している必要があります。
    • UserSigをローカルで計算する方法は、ローカルの開発とデバッグにのみ使用されます。SECRETKEYが漏えいすると、攻撃者がTencent Cloudトラフィックを盗用する可能性があるので、ネット上にそのまま公開しないでください。UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し、動的にUserSigを取得します。詳細については、サーバーでのUserSig新規作成をご参照ください。

    操作手順

    手順1:TRTCアプリケーションの作成

    TRTCコンソールの、左側ナビゲーションバーで【アプリケーション管理】>【アプリケーションの作成】をクリックしてアプリケーション名を入力し、【OK】をクリックするとTRTCアプリケーションが作成されます。作成が完了してから、SDKAPPIDを保存してください。

    説明

    同時に、同じSDKAppIDを持つIMアプリケーションが自動的に作成されます。

    手順2:Auto-Relayed Push機能をオンにする

    1. TRTCコンソールの、左側ナビゲーションバーで【アプリケーション管理】をクリックします。作成したTRTCアプリケーション上で、【機能設定】をクリックしてアプリケーション詳細に入ります。
    2. 【Relayed Pushの有効化】をクリックして、Relayed Push方式でGlobal Auto-relayを選択します。Relayed Pushの起動後、TRTCルーム内の各チャネル画面に対し対応する再生アドレスが割り当てられます。
      説明

      CDNライブストリーミングの視聴が必要ない場合、Relayed Pushを起動する手順を省略することができます。

    3. 【クイックマスター】をクリックすると、キー情報を確認することができます。キーは保存してください。
    4. Tencent Cloud CSSコンソールで再生ドメイン名を設定し、CNAME設定を完了します。詳細な操作手順については、CDN relayed live streamingの実装ドキュメントをご参照ください。

    説明

    CDNライブストリーミングの視聴が必要ない場合、再生ドメイン名を設定する手順を省略することができます。

    手順3:Demoのダウンロードおよび設定

    1. Tencent Cloud TWebLiveライブストリーミングインタラクションコンポーネントのDemoプロジェクトをダウンロードします。
    2. TWebLive/dist/debug/GenerateTestUserSig.jsファイルを開き、関連パラメータを設定します。
      • SDKAPPID:手順1で取得した実際のアプリケーションSDKAppIDを設定してください。
      • SECRETKEY:手順2で取得した実際のキー情報に設定してください。
      • PUSHDOMAIN:CDN視聴の場合、再生プッシュドメイン名を設定します。(CDNライブストリーミングの視聴が必要ない場合は、この設定を無視してかまいません。)
    3. プロジェクトでnpmを介して最新版のtim-js-sdk、trtc-js-sdk、twebliveをインストールします。プロジェクトにtim-js-sdkまたはtrtc-js-sdkが統合済みの場合は、直接最新版にアップグレードしてください。
      npm install tim-js-sdk --save
      npm install trtc-js-sdk --save
      npm install tweblive --save
      
    4. プロジェクトにTWebLiveをインポートします。
      import TWebLive from 'tweblive'
      Vue.prototype.TWebLive = TWebLive
      
    5. scriptタグの外部リンクを介してインポートする必要がある場合は、tim-js.js、trtc.js、tweblive.jsをプロジェクトにコピーし、それらを順番にインポートする必要があります。
      <script src="./trtc.js"></script>
      <script src="./tim-js.js"></script>
      <script src="./tweblive.js"></script>
      

      注意
      • UserSigをローカルで計算する方法は、ローカルの開発とデバッグにのみ使用されます。SECRETKEYが漏えいすると、攻撃者がTencent Cloudのトラフィックを盗用する可能性があるので、ネット上にそのまま公開しないでください。
      • UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。 UserSigが必要なときは、Appから業務サーバーにリクエストを発出し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。

    手順4:Demoの実行

    Chromeブラウザを使用して distディレクトリのindex.htmlファイルを開くと、Demoが実行されます。

    注意
    • 通常の場合は、体験Demoは、サーバーにデプロイし、https://ドメイン名/xxx経由でアクセスするか、または直接ローカルにサーバーを構築して、localhost:ポート経由でアクセスする必要があります。
    • 現在デスクトップ版Chromeブラウザは、TRTC Web SDK関連機能のサポート状況がかなり整っていますので、Chromeブラウザを使用して体験することをお勧めします。
    • TWebLiveは、カメラとマイクを使用して、オーディオとビデオをキャプチャする必要があります。体験中、Chromeブラウザから関連プロンプトが表示されることがありますが、その場合は【許可】をクリックします。

    アーキテクチャとプラットフォームのサポート

    TWebLiveアーキテクチャ

    TWebLiveアーキテクチャの設計は下図に示すとおりです。

    Webプッシュおよび低遅延Web視聴はWebRTC技術を用います。

    • お客様のユースケースが主に教育シーンである場合、教師用端末はより安定性の高いElectronソリューションを使用することをお勧めします。このソリューションは、大小のデュアルチャネル画面、より柔軟性の高い画面共有ソリューションおよび脆弱なネットワークに対する高い回復力をサポートしています。
    説明:

    WebRTCのテクノロジーはGoogleが初めて提唱し、現在、デスクトップ版Chromeブラウザ、デスクトップ版Edgeブラウザ、デスクトップ版Firefoxブラウザ、デスクトップ版Safariブラウザおよびモバイル版Safariブラウザでは比較的万全なサポートが提供されています。その他のプラットフォーム(Androidプラットフォームブラウザなど)のサポート状況は未だ不十分です。

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

    OS ブラウザタイプ ブラウザの最小バージョン要件 受信(再生) 送信(マイク・オン)
    Mac OS デスクトップ版Safariブラウザ 11+ サポート サポート
    Mac OS デスクトップ版Chromeブラウザ 56+ サポート サポート
    Mac OS デスクトップ版Firefoxブラウザ 56+ サポート サポート
    Mac OS デスクトップ版Edgeブラウザ 80+ サポート サポート
    Windows デスクトップ版Chromeブラウザ 56+ サポート サポート
    Windows デスクトップ版QQブラウザ(クイックコア) 10.4+ サポート サポート
    Windows デスクトップ版Firefoxブラウザ 56+ サポート サポート
    Windows デスクトップ版Edgeブラウザ 80+ サポート サポート
    iOS 11.1.2+ モバイル版Safariブラウザ 11+ サポート サポート
    iOS 12.1.4+ WeChat Embedded Webページ - サポート サポートなし
    iOS 14.3+ WeChat Embedded Webページ 6.5+(WeChatバージョン) サポート サポート
    Android モバイル版QQブラウザ - サポートなし サポートなし
    Android モバイル版UCブラウザ - サポートなし サポートなし
    Android WeChat Embedded Webページ(TBSコア) - サポート サポート
    Android WeChat Embedded Webページ(XWEBコア) - サポート サポートなし
    注意:

    H.264の版権の制限により、HuaweiシステムのChromeブラウザおよびChrome WebViewをコアとするブラウザではTRTC Web SDKの正常な動作をサポートしていません。

    よくあるご質問

    キーをクエリーするとき、公開鍵および秘密鍵の情報しか取得できませんが、キーはどうしたら取得できますか。

    展开&收起

    2019年8月より前に作成したTRTCおよびIMアプリケーション(SDKAppID)では、デフォルトで公開鍵と秘密鍵を区別するECDSA-SHA256署名アルゴリズムを使用しています。HMAC-SHA256署名アルゴリズムにアップグレードしてキーを使用することを強くお勧めします。

    クライアントエラーの発生:「RtcError: no valid ice candidate found」にはどう対処すればよいでしょうか。

    展开&收起

    このエラーが発生したときは、TRTC Web SDKがSTUNトンネリングに失敗したことを意味しますので、環境要件にしたがってファイアウォール設定をチェックしてください。設定が完了した後、公式サイトのDemoにアクセスして体験し、設定が有効かどうかを検査することができます。

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

    クライアントエラーの発生:「RtcError:ICE/DTLS Transport connection failed」または「RtcError:DTLS Transport connection timeout」にはどう対処すればよいでしょうか。

    展开&收起

    このエラーが発生したときは、TRTC Web SDKがSTUNトンネリングに失敗したことを意味しますので、環境要件にしたがってファイアウォール設定をチェックしてください。設定が完了した後、公式サイトのDemoにアクセスして体験し、設定が有効かどうかを検査することができます。

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

    10006 error が発生したときはどう対処すればよいでしょうか。

    展开&收起

    "Join room failed result: 10006 error: service is suspended,if charge is overdue,renew it"というエラーが出現した場合は、TRTCコンソールにログインし、作成したアプリケーションをクリックして、【アカウント情報】をクリックし、アカウント情報パネルでお客様のTRTCアプリケーションのサービスが使用可能な状態かを確認してください。

    WebRTC 低遅延再生で、iOS はプル再生できませんか。

    展开&收起
    1. TWebLive SDKを1.2.0にアップグレードします。
    2. player.startPlay()メソッドを呼び出した後、ブラウザが自動再生を許可しないPLAYER_AUTOPLAY_NOT_ALLOWEDを監視します。
    3. 自動再生できないことを確認すると、再生ボタンが表示されます。再生ボタンを再びクリックするとresumePlay()メソッドが呼び出され、再生が再開します。
      iOSは自動再生が制限されます。制限された自動再生の処理に関するアドバイスをご参照ください。

    結び

    ここでは、Tencent Cloudの新しいWebライブストリーミングインタラクションコンポーネントであるTWebLiveを紹介しました。このSDKによって、開発者は迅速かつ簡単にWebプッシュ、低遅延Web視聴、CDN視聴およびリアルタイムチャットインタラクション(または弾幕)などの機能を実装でき、従来のFlashプッシュソリューションとの置き換えが充分に可能です。

    また、詳細なアクセス方法とオンラインDemo体験も提供しています。現在、TWebLiveは主流のWeb上でのサポートもかなり良好です。

    将来的には、プッシュ側での画面共有、画像メッセージのインタラクション、視聴者の複数のラインによる視聴(WebRTC低遅延回線とCDN回線)、キャスターと視聴者のマイク接続によるインタラクションといった機能のサポートなど、よりオールラウンドなライブストリーミング機能サービスを提供する予定です。

    参考資料: