Web RTS推流SDK的其他使用方法_音视频终端 SDK(Apsara Video SDK)-阿里云帮助中心

本文为您介绍Web RTS推流SDK的其他使用方法。

浏览器兼容性检查

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

说明

这是一个静态方法，可以在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();

详细信息，请参见APIDeviceManager。

关注推流状态

通过监听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);
 }
}

本地混流

获取视频效果管理器实例。
```
const videoEffectManager = pushClient.getVideoEffectManager();
```
详细信息，请参见APIgetVideoEffectManager。
开启本地混流模式。
推流SDK默认只支持一路视频流，开启本地混流后可以采集多路视频流和一路音频流，并按照需要调整这些视频流的位置和大小。
请在采集音视频之前开启。
```
videoEffectManager.enableMixing(true);
```
详细信息，请参见APIenableMixing。
设置混流输出参数。
设置混流生成画面的分辨率和帧率等。
您可以在开启本地混流前，使用setVideoQuality设置输出参数。开启本地混流后，请不要再使用setVideoQuality设置输出参数。
```
videoEffectManager.setMixingConfig({
 videoWidth: 1280,
 videoHeight: 720,
 videoFramerate: 30
})
```
详细信息，请参见APIsetMixingConfig。
采集多路流。
支持采集多路摄像头、屏幕共享流，和一路音频流。采集后返回的streamId将会在之后的画面布局设置用使用到。
```
const cameraStreamId = await pushClient.startCamera();
const screenStreamId = await pushClient.startScreenCapture();
const micStreamId = await pushClient.startMicrophone();
```
详细信息，请参见APIstartCamera、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 },
]);
```
详细信息，请参见APIsetLayout。
开始推流。
将本地混流后的视频推流到远端。
```
pushClient.startPush('artc://domain/appName/streamName');
```
详细信息，请参见APIstartPush。
音频混流。
混流模式下，您可以将麦克风和屏幕共享采集的声音混流为一路音频，并分别设置音量。以下示例采集了麦克风和屏幕共享声音，并将麦克风音量降低一半。详细信息，请参见setVolume。
```
// 开启麦克风
const micStreamId = await pushClient.startMicrophone();
// 开启屏幕共享并采集音频
const screenStreamId = await pushClient.startScreenCapture(true);
// 获取音频效果管理器
const audioEffectManager = pushClient.getAudioEffectManager();
// 设置麦克风音量
audioEffectManager.setVolume(50, micStreamId);
```
在某些设备上，混流的效果可能较差，比如有杂音或者断断续续，这是由于麦克风的噪声抑制或音量增益引起的，可以通过以下方式关闭音频3A算法以获得更好的混流效果。详细信息，请参见startMicrophone。
```
const micStreamId = await pushClient.startMicrophone({
  echoCancellation: false, autoGainControl: false, noiseSuppression: false
});
```