Web RTS SDK の API リファレンス - ApsaraVideo Live - Alibaba Cloud ドキュメントセンター

Web RTS SDK は、リアルタイムストリームプル、ストリームインジェスト、イベント処理のための API を提供します。

API	説明
createClient	RTS クライアントインスタンスを作成します。
isSupport	ストリームプル環境がサポートされているかを確認します。
checkPublishSupport	ストリームインジェスト環境がサポートされているかを確認します。
subscribe	RTS ストリームのプルを開始します。
unsubscribe	RTS 再生を停止します。
muted	音声をミュートします。
createStream	ローカルカメラストリーム、ローカルの画面共有ストリーム、またはカスタムストリームを取得します。
publish	ストリームインジェストを開始します。
unpublish	ストリームインジェストを停止します。
on	イベントリスナーを登録します。
off	イベントリスナーを削除します。
once	ワンタイムイベントリスナーを登録します。

詳細

createClient：RTS クライアントインスタンスを作成します。
```
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; WebRTC がサポートされているかを示します。
   // re.cameraList: MediaDeviceInfo[]; ビデオ入力デバイスのリスト。
   // re.micList: MediaDeviceInfo[]; オーディオ入力デバイスのリスト。
   // re.speakerList: MediaDeviceInfo[]; オーディオ出力デバイスのリスト。
}).catch(err => {
  console.log(err);
})

subscribe：RTS ストリームをプルします。

/**
 * RTS ストリームのプルを開始する API。
 * @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] (オプション) 再接続間隔。単位：ms。デフォルト値：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 エンコーディングをサポートしていないためノイズが発生することがあります。必要に応じて、RTS トランスコーディングを実行してこれらの制限を取り除くことができます。詳細については、「RTS トランスコーディング」をご参照ください。
Web RTS SDK を uni-app プロジェクトにインポートする場合、remoteStream.play() メソッドには実際の HTMLVideoElement が必要です。uni-app は <video> タグをカプセル化するため、「デモ」のメソッドを参照して実際の HTMLVideoElement を取得できます。たとえば、pages/index/index.vue では、remoteStream.play(this.$refs.myVideo.$refs.video) を使用します。
subscribe メソッドから返される remoteStream には、生のオーディオデータとビデオデータが含まれており、WebRTC MediaStream を介してアクセスできます。

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 {MediaStream} 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] (オプション) 再接続間隔。単位：ms。デフォルト値：2000。
 * @return {Promise}
 */
aliRts.publish(pushUrl, localStream).then(() => {
  // ストリームインジェストに成功しました。
}).catch((err) => {
  // ストリームインジェストに失敗しました。
})

unpublish：ストリームインジェストを停止します。
```
aliRts.unpublish();
```

on：イベントリスナーを登録します。

/*
 * onError でエラーコード 10201 が返された場合、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); // 再接続イベントをリッスンします。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("1 秒あたりのリアルタイムメディアデータ: ", evt.data);
    /* evt.data のデータ構造：{
          url: string, // 再生 URL
          aMsid: string, // オーディオ 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);
```

ApsaraVideo Live:API リファレンス

目次

詳細