阿里云RTS推流SDK - v1.1.1



快速接入

一、页面引入 SDK

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

<script src="https://g.alicdn.com/AliyunVideoClient/H5RTSPusher/1.0.0/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 createClient，事件监听 IEventListener


三、设置本地预览容器

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

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

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

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

详见API setRenderView


四、设置视频质量

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

pushClient.setVideoQuality('720p_1');

详见API setVideoQuality


五、开始采集音视频

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

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

详见API startCamera startMicrophone startScreenCapture


六、开始推流

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

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

详见API startPush


七、停止推流

 
pushClient.stopPush();

详见API stopPush


八、停止采集音视频

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

详见API stopCamera stopMicrophone stopScreenCapture



本地混流

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


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

 
const videoEffectManager = pushClient.getVideoEffectManager();

详见API getVideoEffectManager


二、开启本地混流模式

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

请在采集音视频之前开启

videoEffectManager.enableMixing(true);

详见API enableMixing


三、设置混流输出参数

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

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

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

详见API setMixingConfig


四、采集多路流

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

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

详见API startCamera startMicrophone 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 setLayout


六、开始推流

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

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

详见API startPush



进阶用法

浏览器兼容性检查

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

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

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

Settings

Theme