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; 是否支援 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)。

  • 若您通過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 是否跳過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: 無網路
        */
    }
  });

• off：取消回調監聽。

  function handle() {};
  aliRts.on('onPlayEvent', handle);
  // 取消監聽
  aliRts.off('onPlayEvent', handle);

• once：監聽一次。

  aliRts.once('onPlayEvent', handle);