tencent cloud

PrevNext

フィードバック

キーワードで検索してください

Recent Pages

ドキュメント
Cloud Streaming Services
    ドキュメント
    Download PDF

    Webストリーミング配信

    最終更新日:2023-11-10 17:05:19
    PDFファイルをダウンロード
      TXLivePusherプッシュSDKは、主にビデオクラウドのライブイベントブロードキャスト（超低遅延ライブブロードキャスト）のプッシュに使用され、ブラウザがキャプチャしたオーディオとビデオ画面を、WebRTCを介してライブブロードキャストサーバーにプッシュする役割を担います。現在、カメラプッシュ、スクリーンレコーディングプッシュおよびローカルメディアファイルプッシュをサポートしています。
      注意：
      WebRTCプロトコルプッシュを使用して、各プッシュドメイン名は、デフォルトで1000パス並列処理プッシュ数に制限されています。このプッシュ制限を超える必要がある場合は、チケットを提出してお申し出ください。
      

      基礎知識

      ドッキング前に次の基本的な知識を理解してください：
      

      プッシュアドレスの結合

      Tencent Cloud CSSを使用する場合、プッシュアドレスは、次に示すように4つの部分で構成されるTencent Cloud標準ライブブロードキャストプッシュURLの形式を満たす必要があります：
      
      
      
      
      
      ただし、認証Key部分は必ずしも必要ではなく、防犯リンクが必要な場合に、プッシュ認証を有効にしてください。具体的な使用説明については、ライブブロードキャストURLの自己結合をご参照ください。
      

      ブラウザサポート

      ライブイベントブロードキャストプッシュはWebRTCに基づき実装され、WebRTCに対するOSとブラウザのサポートに依存します。
      
      さらに、モバイル端末ではブラウザがオーディオとビデオ画像をキャプチャする機能が充分にサポートされていません。たとえば、モバイル端末ブラウザはスクリーンレコーディングをサポートしておらず、ユーザーカメラデバイスの取得をサポートしているのは、iOS 14.3以降のバージョンのみです。以上より、プッシュSDKは主にデスクトップブラウザに使用され、現在、chrome、FirefoxおよびSafariブラウザの最新バージョンはすべてライブイベントブロードキャストプッシュをサポートしています。
      
      モバイル端末では、MLVB SDKを使用してプッシュを実行することをお勧めします。
      

      ドッキングレイダース

      手順1：ページの準備作業

      ライブブロードキャストプッシュが必要なページ（デスクトップ）に初期化スクリプトを導入します。
      
      <script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>
      説明：
      スクリプトはHTMLのbodyセクションに導入する必要があり、headセクションに導入した場合はエラーになります。

      手順2：HTMLにコンテナを配置

      ローカルオーディオとビデオ画像を表示する必要があるページに、プレーヤーコンテナを追加します。たとえば、id_local_videoのように、divを設定し、命名することによって、ローカルビデオ画像がコンテナにレンダリングされます。コンテナのサイズ制御については、divのcssスタイルを使用して制御できます。サンプルコードは次のとおりです：
      
      <div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>
      

      手順3：ライブブロードキャストプッシュ

      1. プッシュSDKインスタンスの生成： グローバルオブジェクトTXLivePusherを介してSDKインスタンスを生成し、後続の操作はすべてインスタンスを介して完了します。
      var livePusher = new TXLivePusher();
      2. ローカルビデオプレーヤーコンテナの指定： ローカルビデオプレーヤーコンテナdivを指定し、ブラウザがキャプチャしたオーディオとビデオスクリーンはこのdivにレンダリングされます。
      livePusher.setRenderView('id_local_video');
      説明：
      setRenderView
      を呼び出して生成されたvideo要素はデフォルトで音声があります。ミュートにする場合は、video要素を直接取得し、操作を実行することができます。
      document.getElementById('id_local_video').getElementsByTagName('video')[0].muted = true;
      
      3. オーディオとビデオ品質の設定： オーディオとビデオストリーミングをキャプチャする前に、まずオーディオとビデオ品質を設定します。事前に設定された品質パラメータが要件を満たしていない場合は、設定を個別にカスタマイズすることができます。
      // ビデオ品質の設定
      livePusher.setVideoQuality('720p');
      // オーディオ品質の設定
      livePusher.setAudioQuality('standard');
      // フレームレートのカスタマイズ設定
      livePusher.setProperty('setVideoFPS', 25);
      4. ストリーミングキャプチャ開始： 現在、カメラデバイス、マイクデバイス、スクリーンレコーディング、ローカルメディアファイルストリーミングのキャプチャをサポートしています。オーディオとビデオストリーミングが正常にキャプチャされると、ローカルでキャプチャされたオーディオとビデオ画像の再生がプレーヤーコンテナで開始されます。
      // カメラを起動
      livePusher.startCamera();
      // マイクを起動
      livePusher.startMicrophone();
      5. プッシュ開始： Tencent Cloudライブイベントブロードキャストプッシュアドレスを渡し、プッシュを開始します。プッシュアドレスの形式については、Tencent Cloud標準ライブブロードキャストURLをご参照ください。RTMPプッシュアドレス冒頭のrtmp://をwebrtc://に変更するだけで完了です。
      livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
      説明：
      プッシュする前にオーディオとビデオストリーミングがキャプチャされていることを確認します。キャプチャされていない場合、プッシュインターフェースの呼び出しに失敗することがあります。オーディオとビデオストリーミングをキャプチャした後に自動的にプッシュを実現したい場合は、コールバックイベントを介して通知することができます。最初のフレームのキャプチャ成功通知を受信した後に、プッシュを実行します。オーディオストリーミングとビデオストリーミングを同時にキャプチャした場合、最初のビデオフレームとオーディオフレームのキャプチャ成功のコールバック通知の両方を受信した後に、もう一度プッシュを開始してください。
      var hasVideo = false;
      var hasAudio = false;
      var isPush = false;
      livePusher.setObserver({
       onCaptureFirstAudioFrame: function() {
         hasAudio = true;
         if (hasVideo && !isPush) {
           isPush = true;
           livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
         }
       },
       onCaptureFirstVideoFrame: function() {
         hasVideo = true;
         if (hasAudio && !isPush) {
           isPush = true;
           livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
         }
       }
      });
      
      6. ライブイベントブロードキャストプッシュの停止：
      livePusher.stopPush();
      7. オーディオとビデオストリーミングキャプチャの停止：
      // カメラを終了
      livePusher.stopCamera();
      // マイクを終了
      livePusher.stopMicrophone();
      

      アドバンスドレイダース

      互換性

      SDKは、WebRTCに対するブラウザの互換性をチェックするための静的メソッドを提供します。
      TXLivePusher.checkSupport().then(function(data) {    // WebRTCをサポートしているか    if (data.isWebRTCSupported) {        console.log('WebRTC Support');    }else{        console.log('WebRTC Not Support');    }    // H264コードをサポートしているか    if (data.isH264EncodeSupported) {        console.log('H264 Encode Support');    }else{        console.log('H264 Encode Not Support');    }});

      コールバックイベント通知

      livePusher.setObserver({  // プッシュ警告情報  onWarning: function(code, msg) {    console.log(code, msg);  },  // プッシュ接続状態  onPushStatusUpdate: function(status, msg) {    console.log(status, msg);  },  // プッシュ統計データ  onStatisticsUpdate: function(data) {    console.log('video fps is ' + data.video.framesPerSecond);  }});
      

      デバイス管理

      var deviceManager = livePusher.getDeviceManager();// デバイスリストの取得deviceManager.getDevicesList().then(function(data) {  data.forEach(function(device) {      console.log(device.deviceId, device.deviceName);    });});// カメラデバイスの切り替えdeviceManager.switchCamera('camera_device_id');
      
      お問い合わせ

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

      お問い合わせ
      テクニカルサポート

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

      チケットを送信
      電話サポート（24 時間365日対応）
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      個人情報保護方針利用規約クッキーポリシー