视频直播：接口说明

目录

详情

• 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: 无网络
        */
    }
  });