WebRTSSDK的介面詳情 - ApsaraVideo Live

通過閱讀本文，您可以瞭解Web RTS SDK的介面詳情。

API	描述
createClient	執行個體化對象。
isSupport	檢查拉流環境。
checkPublishSupport	檢查推流環境。
subscribe	開始拉RTS流。
unsubscribe	停止RTS播放。
muted	靜音。
createStream	擷取本地網路攝影機流、擷取本地螢幕畫面分享流、擷取自訂流。
publish	開始推流。
unpublish	停止推流。
on	回調監聽。

詳情

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; 是否支援 H264 編碼
   // 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開始拉流介面
 * @param {string} pullStreamUrl 拉流地址,在地址後添加@subaudio=no或者@subvideo=no來表示不訂閱音頻流或視頻流
 * @param {Object} [config] （可選）自訂配置
 * @param {string} [config.signalUrl] （可選）信令地址
 * @param {number} [config.retryTimes] （可選）最大重連次數（預設5）
 * @param {number} [config.retryInterval] （可選）重連間隔（單位ms，預設2000）
 * @return {Promise}
 */
 aliRts.subscribe(pullStreamUrl).then((remoteStream) => {
  // mediaElement是媒體標籤audio或video
  remoteStream.play(mediaElement);
  // 調用 remoteStream.play 會將媒體流綁定到媒體標籤並嘗試自動播放，
  // 如不希望自動播放，可以傳入第二個參數 {autoplay:false}，從2.2.4版本開始支援
  // remoteStream.play(mediaElement, {autoplay:false});
}).catch((err) => {
  // 訂閱失敗
})

重要

超低延時直播（RTS）對音視頻解碼時視頻不支援B幀（會出現畫面跳躍），音頻不支援AAC編碼（會出現噪音）。如有需求可進行RTS轉碼釋放保留，具體操作請參見RTS轉碼。
如果您通過uni-app專案引入Web RTS SDK，則remoteStream.play() 方法需要傳入一個真實的HTMLVideoElement，由於uni-app對<video>進行了封裝，您可以參考Demo中的方法擷取真實的HTMLVideoElement，即pages/index/index.vue中的 remoteStream.play(this.$refs.myVideo.$refs.video)。

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 是否跳過Profile(建議網路攝影機黑屏時傳true)
 * @returns {Promise}
 */
AliRTS.createStream({
  audio: true,
  video: true,
}).then((localStream) => {
  // 預覽推流內容，mediaElement是媒體標籤audio或video
  localStream.play(mediaElement);
}).catch((err) => {
  // 建立本地流失敗
})

擷取本地螢幕畫面分享流

/**
 * 僅共用螢幕畫面
 */
AliRTS.createStream({ screen: true });

/**
 * 共用畫面，同時採集螢幕聲音（Mac 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是媒體標籤audio或video
  localStream.play(mediaElement);
}).catch((err) => {
  // 建立本地流失敗
})

publish：開始推流。

/**
 * 開始推流
 * @param {string} pushUrl 推流地址
 * @param {Object} localStream 由 createStream 建立的本地流
 * @param {Object} [config] （可選）自訂配置
 * @param {string} [config.signalUrl] （可選）信令地址
 * @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時，此時網頁的音頻是靜音的，
 * 需要使用者在網頁上手動觸發事件（必須有使用者互動，不能直接通過代碼控制）
 * 調用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("每秒即時媒體資料: ", evt.data);
    /* evt.data 資料結構: {
          url: string, // 播放地址
          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: 無網路
      */
  }
});

ApsaraVideo Live：介面說明

目錄

詳情