ApsaraVideo Live:メソッド

概要

詳細

• createClient: クライアントオブジェクトを作成します。

  var aliRts = AliRTS.createClient();

• isSupport: 現在の環境がストリームフェッチングをサポートしているかどうかをチェックします。

  /**
   * isSupport は環境が利用可能かどうかをチェックします。
   * @param {Object} supportInfo チェック情報。
   * @param {boolean} supportInfo.isReceiveVideo ビデオストリームをプルするかどうかを指定します。
   * @return {Promise}
   */
  aliRts.isSupport({isReceiveVideo: true}).then(re=> {
    // 利用可能
  }).catch(err=> {
    // 利用不可.console.log(`not support errorCode: ${err.errorCode}`);
    console.log(`not support message: ${err.message}`);
  })

• checkPublishSupport: 現在の環境がアップストリーミングをサポートしているかどうかをチェックします。

  /**
    * checkPublishSupport はアップストリーミング環境が利用可能かどうかをチェックします。
    * @return {Promise}
    */
  aliRts.checkPublishSupport().then(re => {
    console.log('support info',re);
     // re.isAudioMixSupported: boolean; ローカルオーディオの混合ストリームがサポートされているかどうかを指定します。
     // re.isH264EncodeSupported: boolean; H.264 エンコーディングがサポートされているかどうかを指定します。
     // re.isMediaDevicesSupported: boolean; カメラ、マイク、スピーカーをクエリできるかどうかを指定します。
     // re.isScreenCaptureSupported: boolean; 画面共有がサポートされているかどうかを指定します。
     // re.isWebRTCSupported: boolean; Web Real-Time Communication (WebRTC) がサポートされているかどうかを指定します。
     // re.cameraList: MediaDeviceInfo[]; ビデオ入力デバイスのリスト。
     // re.micList: MediaDeviceInfo[]; オーディオ入力デバイスのリスト。
     // re.speakerList: MediaDeviceInfo[]; オーディオ出力デバイスのリスト。
  }).catch(err=> {
    console.log(err);
  })

• subscribe: RTS ストリームをサブスクライブします。

  /**
   * RTS ストリームのプルを開始します。
   * @param {string} pullStreamUrl ストリームフェッチング URL。URL の末尾に @subaudio=no または @subvideo=no を追加して、オーディオまたはビデオストリームをサブスクライブしないようにします。
   * @param {Object} [config] (オプション) カスタム構成。
   * @param {string} [config.signalUrl] (オプション) シグナリング URL。
   * @param {number} [config.retryTimes] (オプション) 再接続試行の最大回数。デフォルト値: 5。
   * @param {number} [config.retryInterval] (オプション) 再接続間隔 (ミリ秒)。デフォルト値: 2000。
   * @return {Promise}
   */
   aliRts.subscribe(pullStreamUrl).then((remoteStream) => {
    // mediaElement はオーディオまたはビデオのメディアタグです。
    remoteStream.play(mediaElement);
    // remoteStream.play を呼び出すと、メディアストリームがメディアタグにバインドされ、自動再生が試行されます。
    // 自動再生したくない場合は、2 番目のパラメーターとして {autoplay:false} を渡します。これはバージョン 2.2.4 からサポートされています。
    // remoteStream.play(mediaElement, {autoplay:false});
  }).catch((err) => {
    // サブスクライブに失敗しました。
  })

  重要

  • オーディオとビデオのデコード中、RTS (RTS) は B フレームを含むビデオや AAC フォーマットのオーディオをサポートしていません。ビデオに B フレームが含まれている場合、フレームスキップが発生することがあります。オーディオが AAC フォーマットの場合、ノイズが発生することがあります。ストリームをトランスコードしてビデオから B フレームを削除し、オーディオを AAC から別のフォーマットに変換できます。詳細については、「RTS トランスコーディング」をご参照ください。

  • Web RTS SDK を uni-app プロジェクトにインポートする場合、実際の HTMLVideoElement を remoteStream.play() メソッドに渡します。uni-app は <video> タグをカプセル化します。実際の HTMLVideoElement を取得するには、デモのメソッドを参照してください。たとえば、pages/index/index.vue では、remoteStream.play(this.$refs.myVideo.$refs.video) を使用します。

  • subscribe メソッドを使用してストリームをプルする場合、返される remoteStream オブジェクトには元のオーディオおよびビデオデータが含まれています。WebRTC MediaStream API を使用してこのデータを取得できます。

• unsubscribe: RTS の再生を停止します。

  aliRts.unsubscribe();

• muted: ストリームをミュートします。

  remoteStream.muted = true;

• createStream

  • ローカルカメラからストリームを作成します。

    /**
     * ローカルストリーム localStream を取得します。
     * @param {Object} config 構成。
     * @param {boolean} config.audio オーディオデバイスを使用するかどうかを指定します。
     * @param {boolean} config.video ビデオデバイスを使用するかどうかを指定します。
     * @param {boolean} config.skipProfile プロファイルをスキップするかどうかを指定します。カメラが黒い画面を表示する場合は、これを true に設定します。
     * @returns {Promise}
     */
    AliRTS.createStream({
      audio: true,
      video: true,
    }).then((localStream) => {
      // アップストリーミングコンテンツをプレビューします。mediaElement はオーディオまたはビデオのメディアタグです。
      localStream.play(mediaElement);
    }).catch((err) => {
      // ローカルストリームの作成に失敗しました。
    })

  • ローカル画面共有からストリームを作成します。

    /**
     * 画面ビデオのみを共有します。
     */
    AliRTS.createStream({ screen: true });
    
    /**
     * 画面ビデオを共有し、画面のオーディオをキャプチャします。macOS の Chrome はタブのオーディオのキャプチャをサポートしています。Windows の Chrome はタブとシステムのオーディオのキャチャをサポートしています。
     */
    AliRTS.createStream({ screen: { audio: true } });
    
    /**
     * 画面ビデオを共有し、画面のオーディオをキャプチャし、マイクのオーディオをキャプチャします。
     */
    AliRTS.createStream({ screen: { audio: true }, audio: true });
    
    /**
     * カスタムキャプチャパラメーター。
     * - オーディオのエコーキャンセルを無効にします。
     * - Chrome で現在のタブを優先します。
     * 上記のコードは一例です。getDisplayMedia に準拠する任意のパラメーターを渡すことができます。実際の効果はブラウザのサポートに依存します。
     */
    AliRTS.createStream({ screen: { audio: { echoCancellation: false }, preferCurrentTab: true } });

  • カスタムストリームを取得します

    /**
     * ローカルストリーム localStream を取得します。
     * @param {Object} config 構成。
     * @param {boolean} config.custom カスタムストリームを渡すかどうかを指定します。
     * @param {boolean} config.mediaStream 有効なカスタムストリーム。
     * @returns {Promise}
     */
    AliRTS.createStream({
      // カスタムストリーム
      custom: true,
      mediaStream: myStream //有効な MediaStream (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) を渡します。
    }).then((localStream) => {
      // アップストリーミングコンテンツをプレビューします。mediaElement はオーディオまたはビデオのメディアタグです。
      localStream.play(mediaElement);
    }).catch((err) => {
      // ローカルストリームの作成に失敗しました。
    })

• publish: アップストリーミングを開始します。

  /**
   * アップストリーミングを開始します。
   * @param {string} pushUrl アップストリーミング URL。
   * @param {Object} localStream createStream によって作成されたローカルストリーム。
   * @param {Object} [config] (オプション) カスタム構成。
   * @param {string} [config.signalUrl] (オプション) シグナリング URL。
   * @param {number} [config.retryTimes] (オプション) 再接続試行の最大回数。デフォルト値: 5。
   * @param {number} [config.retryInterval] (オプション) 再接続間隔 (ミリ秒)。デフォルト値: 2000。
   * @return {Promise}
   */
  aliRts.publish(pushUrl, localStream).then(() => {
    // アップストリーミングに成功しました。
  }).catch((err) => {
    // アップストリーミングに失敗しました。
  })

• unpublish: アップストリーミングを停止します。

  aliRts.unpublish();

• on: イベントのコールバックリスナーを登録します。

  /*
   * onError でエラーコード 10201 が返された場合、Web ページのオーディオはミュートされます。
   * ユーザーは Web ページで手動でイベントをトリガーする必要があります。これはコードでは制御できません。
   * remoteStream.muted = false を呼び出してミュートを解除します。
   */
  aliRts.on("onError", (err)=> {
    console.log(`errorCode: ${err.errorCode}`);
    console.log(`message: ${err.message}`);
  })
  
  aliRts.on('reconnect', function(evt) {
    console.log('reconnect', evt); // reconnect イベントをリッスンします。evt は再接続の理由です。
  })
  
  const PLAY_EVENT = {
    CANPLAY: "canplay", // 再生準備完了。
    WAITING: "waiting", // カクつき。
    PLAYING: "playing", // カクつきから回復。
    MEDIA: "media",     // リアルタイムのメディアステータスを毎秒報告します。
  }
  aliRts.on('onPlayEvent', function(evt) {
    /* evt データ構造: {
          event: string, // PLAY_EVENT
          data: any, // データ 
        } 
      */
    if (evt.event === PLAY_EVENT.CANPLAY) {
      console.log("再生の準備ができました。");
    } else if (evt.event === PLAY_EVENT.WAITING) {
      console.log("カクつきが発生しました。");
    } else if (evt.event === PLAY_EVENT.PLAYING) {
      console.log("カクつきの後、再生が再開されます。");
    } else if (evt.event === PLAY_EVENT.MEDIA) {
      console.log("毎秒のリアルタイムメディアデータ: ", evt.data);
      /* evt.data データ構造: {
            url: string, // 再生 URL。
            aMsid: stirng, // オーディオ ID (デフォルト: 'rts audio')。
            audio: {                          // (一部のブラウザではサポートされていません)
              bytesReceivedPerSecond: number, // オーディオビットレート。
              lossRate: number, // オーディオパケット損失率。
              rtt: number, // RTT (オーディオとビデオで共有)。
            },
            vMsid: string, // ビデオ ID (デフォルト: 'rts video')。
            video: {                          // (一部のブラウザではサポートされていません)
              bytesReceivedPerSecond: number, // ビデオビットレート。
              framesDecodedPerSecond: number, // デコードされたフレームレート。
              fps: number, // レンダリングフレームレート。
              height: number, // 解像度の高さ。
              width: number, // 解像度の幅。
              lossRate: number, // ビデオパケット損失率。
              rtt: number, // RTT (オーディオとビデオで共有)。
            },
            networkQuality: number, // ネットワーク品質スコア。
          }
          // networkQuality スコア値: 
          // 0: 不明, 1: 非常に良い, 2: 良い, 3: 普通, 4: 悪い, 5: 非常に悪い, 6: ネットワークなし
        */
    }
  });

• off: コールバックリスナーを削除します。

  function handle() {};
  aliRts.on('onPlayEvent', handle);
  // リスナーをキャンセルします。
  aliRts.off('onPlayEvent', handle);

• once: イベントのワンタイムリスナーを登録します。

  aliRts.once('onPlayEvent', handle);