ApsaraVideo Live:変更方法

概要

サンプルコード

• createClient: Web RTS SDKを使用するインスタンスを作成します。

  var aliRts = AliRTS.createClient();

• isSupport: ストリームプル環境をチェックします。

  /**
   * isSupport Check whether the stream pulling environment is available.
   * @param {Object} supportInfo The check result.
   * @param {Boolean} supportInfo.isReceiveVideo Specify whether to pull the video stream.
   * @return {Promise}
   */
  aliRts.isSupport({isReceiveVideo: true}).then(re=> {
    // The stream pulling environment is available.
  }).catch(err=> {
    // The stream pulling environment is not available. console.log(`not support errorCode: ${err.errorCode}`);
    console.log(`not support message: ${err.message}`);
  })

• checkPublishSupport: ストリーム取り込み環境をチェックします。

  /**
    * checkPublishSupport Check whether the stream ingest environment is available.
    * @return {Promise}
    */
  aliRts.checkPublishSupport().then(re => {
    console.log('support info',re);
     // re.isAudioMixSupported: boolean; Indicates whether local audio stream mixing is supported.
     // re.isH264EncodeSupported: boolean; Indicates whether H.264 is supported.
     // re.isMediaDevicesSupported: boolean; Indicates whether cameras, microphones, and speakers can be queried.
     // re.isScreenCaptureSupported: boolean; Indicates whether screen sharing is supported.
     // re.isWebRTCSupported: boolean; Indicates whether WebRTC is supported.
     // re.cameraList: MediaDeviceInfo[]; The list of video input devices.
     // re.micList: MediaDeviceInfo[]; The list of audio input devices.
     // re.speakerList: MediaDeviceInfo[]; The list of audio output devices.
  }).catch(err=> {
    console.log(err);
  })

• subscribe: RTS経由でストリームをプルし始めます。

  /**
   * rts Start to pull the stream.
   * @param {string} pullStreamUrl The source URL. Add @subaudio=no or @subvideo=no after the URL to specify that the audio stream or video stream is not subscribed to.
   * @param {Object} [config] Perform custom configuration. This step is optional.
   * @param {string} [config.signalUrl] Specify the signaling URL. This step is optional.
   * @param {number} [config.retryTimes] Specify the maximum allowed number of reconnection attempts. Default value: 5.
   * @param {number} [config.retryInterval] Specify the interval between reconnection attempts. Unit: milliseconds. Default value: 2000.
   * @return {Promise}
   */
   aliRts.subscribe(pullStreamUrl).then((remoteStream) => {
    // mediaElement indicates whether the media type of the stream is audio or video.
    remoteStream.play(mediaElement);
    // Call remoteStream.play to bind a media tag to the media stream. The stream automatically plays. 
    // If you do not want the stream to automatically play, specify the second parameter {autoplay:false}. This parameter is supported beginning from Web RTS SDK V2.2.4.
    // remoteStream.play(mediaElement, {autoplay:false});
  }).catch((err) => {
    // The subscription failed.
  })

  重要

  • オーディオおよびビデオのデコード中、RTSはBフレームとAAC形式のオーディオを含むビデオをサポートしません。 ビデオがBフレームを含む場合、フレームスキップが発生し得る。 オーディオがAAC形式の場合、ノイズが発生する可能性があります。 ストリームをトランスコードしてビデオからBフレームを削除し、オーディオをAACから別の形式に変換できます。 詳細については、「RTSトランスコードの設定」をご参照ください。

  • uni-appプロジェクトを使用してWeb RTS SDKを導入する場合は、remoteStream.play() メソッドで実際のHTMLVideoElementを渡す必要があります。 ビデオはuni-appによってカプセル化されるため、メソッドを使用して実際のHTMLVideoElementを取得する方法については、デモを参照してください。 この場合、pages/index/index.vueでremoteStream.play(this.$refs.myVideo.$refs.video) を指定します。

• subscribe: RTSでストリームの再生を停止します。

  aliRts.unsubscribe();

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

  remoteStream.muted = true;

• createStream

  • ローカルカメラストリームを取得します。

    /**
     * Obtain a local stream.
     * @param {Object} config Perform configuration.
     * @param {boolean} config.audio Specify whether to use the audio device.
     * @param {boolean} config.video Specify whether to use the video device.
     * @param {boolean} config.skipProfile Specify whether to skip the profile. We recommend that you set the value to true if the camera shows a black screen.
     * @returns {Promise}
     */
    AliRTS.createStream({
      audio: true,
      video: true,
    }).then((localStream) => {
      // Preview the content of the ingested stream. The mediaElement parameter indicates whether the media type of the stream is audio or video.
      localStream.play(mediaElement);
    }).catch((err) => {
      // The local stream failed to be created.
    })

  • ローカルの画面共有ストリームを取得します。

    /**
     * Only share the collected video from the screen.
     */
    AliRTS.createStream({ screen: true });
    
    /**
     * Share the collected video from the screen and capture the audio from the screen at the same time. Google Chrome on macOS supports audio capture from tab pages, while Google Chrome on Windows supports audio capture from tab pages and the system.
     */
    AliRTS.createStream({ screen: { audio: true } });
    
    /**
     * Share the collected video from the screen, capture the audio from the screen, and capture the audio from the microphone at the same time.
     */
    AliRTS.createStream({ screen: { audio: true }, audio: true });
    
    /**
     * Configure custom collection parameters.
     * Disable echo cancellation for the audio.
     * Preferentially select the current tab page in Google Chrome.
     * The preceding code is for reference only. You can pass in any parameters that match with getDisplayMedia. The effect of these parameters is determined by the browser.
     */
    AliRTS.createStream({ screen: { audio: { echoCancellation: false }, preferCurrentTab: true } });

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

    /**
     * Obtain a local stream.
     * @param {Object} config Perform configuration.
     * @param {boolean} config.custom Specify whether to pass in a custom stream.
     * @param {boolean} config.mediaStream Specify a valid custom stream.
     * @returns {Promise}
     */
    AliRTS.createStream({
      // Create the custom stream.
      custom: true,
      mediaStream: myStream // Specify a valid MediaStream. For more information, visit https://developer.mozilla.org/en-US/docs/Web/API/MediaStream.
    }).then((localStream) => {
      // Preview the content of the ingested stream. The mediaElement parameter indicates whether the media type of the stream is audio or video.
      localStream.play(mediaElement);
    }).catch((err) => {
      // The local stream failed to be created.
    })

• publish: ストリームの取り込みを開始します。

  /**
   * Start to ingest the stream.
   * @param {string} pushUrl The ingest URL.
   * @param {Object} localStream The local stream that you create by calling createStream.
   * @param {Object} [config] Perform custom configuration. This step is optional.
   * @param {string} [config.signalUrl] Specify the signaling URL. This step is optional.
   * @param {number} [config.retryTimes] Specify the maximum allowed number of reconnection attempts. Default value: 5.
   * @param {number} [config.retryInterval] Specify the interval between reconnection attempts. Unit: milliseconds. Default value: 2000.
   * @return {Promise}
   */
  aliRts.publish(pushUrl, localStream).then(() => {
    // The stream is ingested.
  }).catch((err) => {
    // The stream failed to be ingested.
  })

• unpublish: ストリームの取り込みを停止します。

  aliRts.unpublish();

• on: コールバックを呼び出します。

  /*
   * If the error code 10201 is returned, the video is muted. 
   * You must manually trigger the event on the web page. You cannot use code to automatically trigger the event.
   * Call the remoteStream.muted = false method to unmute the stream.
   */
  aliRts.on("onError", (err)=> {
    console.log(`errorCode: ${err.errorCode}`);
    console.log(`message: ${err.message}`);
  })
  
  aliRts.on('reconnect', function(evt) {
    console.log('reconnect', evt); // Listen to the reconnection event. evt indicates the reason for reconnection.
  })
  
  const PLAY_EVENT = {
    CANPLAY: "canplay", // Ready for playback.
    WAITING: "waiting", // Stuttering occurs.
    PLAYING: "playing", // Stuttering is recovered.
    MEDIA: "media",     // Report the real-time status of the media every second.
  }
  aliRts.on('onPlayEvent', function(evt) {
    /* evt Data structure: {
          event: string, // PLAY_EVENT
          data: any, // The data. 
        } 
      */
    if (evt.event === PLAY_EVENT.CANPLAY) {
      console.log("Ready for playback.");
    } else if (evt.event === PLAY_EVENT.WAITING) {
      console.log("Stuttering occurs.");
    } else if (evt.event === PLAY_EVENT.PLAYING) {
      console.log("Stuttering is recovered, and the playback continues.");
    } else if (evt.event === PLAY_EVENT.MEDIA) {
      console.log("Real-time media data per second: ", evt.data);
      /* evt.data Data structure: {
            url: string, // The streaming URL.
            aMsid: stirng, // The ID of the audio. Default value: rts audio.
            audio: {                          // (Not supported by some browsers)
              bytesReceivedPerSecond: number, // The bitrate of the audio.
              lossRate: number, // The packet loss rate of the audio.
              rtt: number, // The round trip time (RTT) of the audio and video.
            },
            vMsid: string, // The ID of the video. Default value: rts video.
            video: {                          // (Not supported by some browsers)
              bytesReceivedPerSecond: number, // The bitrate of the video.
              framesDecodedPerSecond: number, // The decoded frame rate.
              fps: number, // The frame rate for rendering.
              height: number, // The height of the resolution.
              width: number, // The width of the resolution.
              lossRate: number, // The packet loss rate of the video.
              rtt: number, // The RTT of the audio and video.
            },
            networkQuality: number, // The score on the network quality.
          }
          // networkQuality Valid values: 
          // 0 (unknown), 1 (excellent), 2 (good), 3 (moderate), 4 (poor), 5 (very poor), and 6 (no network).
        */
    }
  });