• 快速接入

• 进阶用法

• 本地混流

• API详情

快速接入

一、页面引入 SDK

在 HTML head 中引入推流 SDK 脚本。

<script src="https://g.alicdn.com/apsara-media-box/imp-web-rts-pusher/{{SDK_VERSION}}/aliyun-rts-pusher.js"></script>

或者以 npm 包的方式引入。

npm install aliyun-rts-pusher --save

import { AliRTSPusher } from 'aliyun-rts-pusher';

二、初始化 SDK

创建一个推流 client 实例，并监听事件。

// 创建推流实例
const pushClient = AliRTSPusher.createClient();
// 监听错误事件
pushClient.on('error', (err) => { console.log(err.errorCode) });

详见API {@link AliRTSPusher.createClient}，事件监听 {@link IEventListener}

三、设置本地预览容器

在 HTML 中插入一个 div 元素作为推流画面的本地预览容器。

<div id="videoContainer"></div>

将容器 id 传给 SDK，SDK 会在其中创建一个 video 标签并播放预览画面。

const videoEl = pushClient.setRenderView('videoContainer');

详见API {@link RtsClient.setRenderView}

四、设置视频质量

采集之前先设置好视频质量，可选的预设参数请参考 {@link AliRTSPusher.VideoProfileMap}（您可以遍历查看出键值对的内容，key 就是 setVideoQuality 需要的参数，value 就是对应的详细配置）。如果不设置，默认值是 720p_2

pushClient.setVideoQuality('720p_1');

详见API {@link RtsClient.setVideoQuality}

五、开始采集音视频

可以开启摄像头、麦克风或屏幕共享。采集成功后页面会出现本地预览画面。

// 打开摄像头
await pushClient.startCamera();
// 打开麦克风
await pushClient.startMicrophone();

详见API {@link RtsClient.startCamera} {@link RtsClient.startMicrophone} {@link RtsClient.startScreenCapture}

六、开始推流

传入 RTS 推流地址并开始推流

pushClient.startPush('artc://domain/appName/streamName');

详见API {@link RtsClient.startPush}

七、停止推流

pushClient.stopPush();

详见API {@link RtsClient.stopPush}

八、停止采集音视频

// 关闭摄像头
pushClient.stopCamera();
// 关闭麦克风
pushClient.stopMicrophone();

详见API {@link RtsClient.stopCamera} {@link RtsClient.stopMicrophone} {@link RtsClient.stopScreenCapture}

本地混流

阿里云 RTS 推流 SDK 支持利用浏览器进行本地混流，将多个视频源合并为一路。

一、获取视频效果管理器实例

const videoEffectManager = pushClient.getVideoEffectManager();

详见API {@link RtsClient.getVideoEffectManager}

二、开启本地混流模式

推流 SDK 默认只支持一路视频流，开启本地混流后可以采集多路视频流和一路音频流，并按照需要调整这些视频流的位置和大小。

请在采集音视频之前开启

videoEffectManager.enableMixing(true);

详见API {@link VideoEffectManager.enableMixing}

三、设置混流输出参数

设置混流生成画面的分辨率和帧率等。

开启本地混流后，请不要再使用 setVideoQuality 设置输出参数

videoEffectManager.setMixingConfig({
  videoWidth: 1280,
  videoHeight: 720,
  videoFramerate: 30
})

详见API {@link VideoEffectManager.setMixingConfig}

四、采集多路流

支持采集多路摄像头、屏幕共享流，和一路音频流。采集后返回的 streamId 将会在之后的画面布局设置用使用到。

const cameraStreamId = await pushClient.startCamera();
const screenStreamId = await pushClient.startScreenCapture();
const micStreamId = await pushClient.startMicrophone();

详见API {@link RtsClient.startCamera} {@link RtsClient.startMicrophone} {@link RtsClient.startScreenCapture}

五、设置画面布局

调整不同视频流的大小、位置、层级。

这里示例有一路屏幕共享流和一路摄像头流，屏幕共享铺满整个画面，摄像头流在画面左上角。请注意 x、y 的值，采用的是视频源宽高的一半，因为视频源的定位原点在视频源的中心而不在左上角

videoEffectManager.setLayout([
  { streamId: 'screenStreamId', x: 1280/2, y: 720/2, width: 1280, height: 720, zOrder: 1 },
  { streamId: 'cameraStreamId', x: 320/2, y: 180/2, width: 320, height: 180, zOrder: 2 },
]);

详见API {@link VideoEffectManager.setLayout}

六、开始推流

将本地混流后的视频推流到远端。

pushClient.startPush('artc://domain/appName/streamName');

详见API {@link RtsClient.startPush}

七、音频混流

混流模式下，您可以将麦克风和屏幕共享采集的声音混流为一路音频，并分别设置音量。

以下示例采集了麦克风和屏幕共享声音，并将麦克风音量降低一半：

// 开启麦克风
const micStreamId = await pushClient.startMicrophone();
// 开启屏幕共享并采集音频
const screenStreamId = await pushClient.startScreenCapture(true);
// 获取音频效果管理器
const audioEffectManager = rtsClient.getAudioEffectManager();
// 设置麦克风音量
audioEffectManager.setVolume(50, micStreamId);

详见API {@link AudioEffectManager.setVolume}

在某些设备上，混流的效果可能较差，比如杂音、或者断断续续，这是由于麦克风的噪声抑制或音量增益引起的，可以通过以下方式关闭音频 3A 算法以获得更好的混流效果：

const micStreamId = await pushClient.startMicrophone({
  echoCancellation: false, autoGainControl: false, noiseSuppression: false
});

详见API {@link RtsClient.startMicrophone}

进阶用法

浏览器兼容性检查

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

注意：这是一个静态方法，可以在 AliRTSPusher 上直接调用，无需实例化

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

检查结果详见 {@link ISupportResult}

设备管理

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

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

详见API {@link DeviceManager}

关注推流状态

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

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

详见状态枚举 {@link EConnectStatus}

在 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>