本地混流

操作步骤

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 startCamera、startMicrophone和startScreenCapture。

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