Web RTS SDK的接口详情_视频直播(LIVE)-阿里云帮助中心

通过阅读本文，您可以了解Web RTS SDK的接口详情。

API	描述
createClient	实例化对象。
isSupport	检查拉流环境。
checkPublishSupport	检查推流环境。
subscribe	开始拉RTS流。
unsubscribe	停止RTS播放。
muted	静音。
createStream	获取本地摄像头流、获取本地屏幕共享流、获取自定义流。
publish	开始推流。说明阿里云现已推出Web RTS推流SDK，具备更完善的推流能力，并支持本地混流，推荐您使用Web RTS推流SDK进行推流。使用方法，请参见Web RTS推流SDK快速接入。
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：开始推流。

说明

阿里云现已推出Web RTS推流SDK，具备更完善的推流能力，并支持本地混流，推荐您使用Web RTS推流SDK进行推流。使用方法，请参见Web RTS推流SDK快速接入。

/**
 * 开始推流
 * @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: 无网络
      */
  }
});

接口说明

目录

详情