进阶用法

浏览器兼容性检查

可以检测当前浏览器环境是否支持相应的推流及采集能力。

const checkResult = await AliRTSPusher.checkSupport();
console.log('checkResult: ', checkResult);

检查结果，请参见 ISupportResult。

设备管理

可以获取当前浏览器可以获取到的麦克风列表和摄像头列表。

const deviceManager = await pushClient.getDeviceManager();
// 获取摄像头列表
const cameraList = await deviceManager.getCameraList();
// 获取麦克风列表
const micList = await deviceManager.getMicList();

详细信息，请参见API DeviceManager。

关注推流状态

通过监听connectStatusChange事件，请随时关注推流网络状态，给出相应提示，必要时做重试处理。

pushClient.on('connectStatusChange', (event) => {
  switch (event.status) {
    case 1:
      // 连接中
      break;
    case 2:
      // 已连接
      break;
    case 3:
      // 自动重连中，注意此时推流已暂时中断，应及时提示用户
      break;
    case 0:
      // 连接中断，推流结束，应提示用户，必要时重新调用 startPush 进行推流
      break;
  }
})

详细信息，请参见状态枚举 EConnectStatus。

混流模式下设置推流码率

目前混流模式下setMixingConfig尚不支持设置最大码率，可以通过以下方式设置：

/**
 * 设置码率、发送帧率（请在推流成功后再调用）
 * @param pushClient 当前推流sdk实例
 * @param config 码率、帧率设置
 * @param config.maxBitrate 最大码率（kbps）
 * @param config.maxFramerate 最大帧率
 *
 *
 * @example
 * ```ts
 * setSenderParams(aliPusher, { maxBitrate: 3000, maxFramerate: 20 })
 * ```
 */

function setSenderParams(pushClient, config) {
  const pcm = pushClient.publisher?.peerconnection;
  if (pcm) {
    pcm.setVideoSenderParams(config);
  }
}

在Vue3中使用

Vue3的响应式状态ref()会对对象进行深层次解包，将每一个子对象嵌套ref，这会导致推流实例对象的内部结构异常。请不要使用ref()来保存推流SDK的实例对象，可以改为使用一个普通的变量，或者shallowRef()。示例如下：

使用变量

<script setup lang="ts">
  import { onMounted } from 'vue';
  import { AliRTSPusher } from 'aliyun-rts-pusher';
  import type { RtsClient } from 'aliyun-rts-pusher';

  let pushClient: RtsClient;
  onMounted(() => {
    pushClient = AliRTSPusher.createClient();
  })
</script>

使用shallowRef

<script setup lang="ts">
  import { onMounted, shallowRef } from 'vue';
  import { AliRTSPusher } from 'aliyun-rts-pusher';
  import type { RtsClient } from 'aliyun-rts-pusher';

  const pushClient = shallowRef<RtsClient>();
  onMounted(() => {
    pushClient.value = AliRTSPusher.createClient();
  })
</script>