文档

本地混流

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

操作步骤

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

    const videoEffectManager = pushClient.getVideoEffectManager();

    详细信息,请参见API getVideoEffectManager

  2. 开启本地混流模式。

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

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

    videoEffectManager.enableMixing(true);

    详细信息,请参见API enableMixing

  3. 设置混流输出参数。

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

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

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

    详细信息,请参见API setMixingConfig

  4. 采集多路流。

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

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

    详细信息,请参见API startCamerastartMicrophonestartScreenCapture

  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 },
    ]);

    详细信息,请参见API setLayout

  6. 开始推流。

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

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

    详细信息,请参见API startPush

  7. 音频混流。

    混流模式下,您可以将麦克风和屏幕共享采集的声音混流为一路音频,并分别设置音量。以下示例采集了麦克风和屏幕共享声音,并将麦克风音量降低一半。详细信息,请参见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
    });