文档

进阶功能

更新时间:

本文为您介绍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);
 }
}

本地混流

  1. 获取视频效果管理器实例。

    const videoEffectManager = pushClient.getVideoEffectManager();

    详细信息,请参见APIgetVideoEffectManager

  2. 开启本地混流模式。

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

    请在采集音视频之前开启。

    videoEffectManager.enableMixing(true);

    详细信息,请参见APIenableMixing

  3. 设置混流输出参数。

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

    您可以在开启本地混流前,使用setVideoQuality设置输出参数。开启本地混流后,请不要再使用setVideoQuality设置输出参数。

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

    详细信息,请参见APIsetMixingConfig

  4. 采集多路流。

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

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

    详细信息,请参见APIstartCamerastartMicrophonestartScreenCapture

  5. 设置画面布局。

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

    此处示例有一路屏幕共享流和一路摄像头流,屏幕共享铺满整个画面,摄像头流在画面左上角。请注意 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

  6. 开始推流。

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

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

    详细信息,请参见APIstartPush

  • 本页导读 (1)