本文介绍如何使用 Web 推流 SDK 进行本地合流，实现多路视频流（如摄像头、屏幕共享）和多路音频流（如麦克风、系统声音）的合并推流。通过本地合流，您可以：

• 降低带宽占用：在本地将多路流合并成一路推送，减少上行带宽消耗。
• 自定义画面布局：自由调整各路视频画面的大小、位置及层级关系。
• 灵活的音频控制：对不同音频流进行混音，调整音量大小。

工作原理

在 Web 推流 SDK 中，音视频的合流处理方式取决于合流模式的开启状态。SDK 提供默认模式和合流模式两种方式：

• 默认模式（关闭合流，自动合并）
  • 适用场景：简单推流，使用仅摄像头和麦克风进行推流。
  • 行为：
    • 采集的音视频流自动加入推流内容，无需手动操作。
    • SDK 会处理音视频的混合，并直接推送到服务器。
• 合流模式（手动管理流）
  • 适用场景：多路视频（如，同时开启摄像头和屏幕共享）、复杂音频混音（如，同时开启麦克风和系统声音）。
  • 行为：
    • 采集的音视频流不会自动加入推流内容，需要手动添加。
    • 需要调用：
      • addVideoStream() 将视频流添加到合流画布。
      • addAudioStream() 将音频流添加到混音器。

前提条件

• 已参考快速集成完成初始化，获取 livePusher 对象。
• 已登录视频直播控制台，通过地址生成器，获取 RTM 或 WebTransport 推流地址。

操作步骤

1. 在开始推流之前，调用以下方法开启本地合流模式，让 SDK 具备合并多路音视频流的能力。

livePusher.enableMixing(true)

2. 通过 setMixingConfig 方法设置合流参数，指定合流后的视频分辨率、帧率以及背景色等属性。

livePusher.setMixingConfig({
  width: 1080,         // 合流画布的宽度
  height: 720,         // 合流画布的高度
  frameRate: 30,       // 合成后的视频帧率
  backgroundColor: '#000000', // 画布背景色
});

3. 启用本地合流后，采集到的音视频源不会自动加入合流画布，需要通过流 ID 手动将其添加到合流画布或混音器中。以下是获取摄像头、屏幕共享和麦克风的代码示例。

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

4. 本地合流模式下，音视频流并不会自动添加到画布或混音器，需要手动添加。

   • 添加视频流到合流画布

   livePusher.addVideoStream([{
   	streamId: screenStreamId,
   	width: 1280,
   	height: 720,
   	x: 1280/2,
   	y: 720/2,
   	zOrder: 1,
   	keepRatio: true,
   }, {
   	streamId: cameraStreamId,
   	width: 320,
   	height 180,
   	x: 320/2,
   	y: 180/2,
   	zOrder: 2,
   	keepRatio: true,
   }]);
   

   说明

   • x、y 以画布左上角为原点，设定视频在画布中的位置。视频源的参照点则为其中心点。
   • zOrder 用于控制画面叠放的先后顺序，数值越大越靠前。
   • keepRatio 设置为 true 时，会根据原始视频的宽高比进行缩放。
   • 添加音频流到混音

   livePusher.addAudioStream({
   	streamId: micStreamId,
   	volume: 100,
   });
   

   说明

   • 若有多路音频源（比如外部音频文件或自定义的音频源），可分别调用 addAudioStream。
   • 可以使用 volume 调整每一路音频的初始音量大小。

5. 调用 startPush 方法并传入通过控制台生成的推流地址，启动推流。

livePusher.startPush('https://{{domain}}/{{appName}}/{{streamName}}.sdp')