多人视频场景

在视频通话或直播场景中，如果多个用户同时发流，由于设备性能消耗和网络流量的上升，可能带来比较大的体验下降。

本文介绍如何使用声网 Web SDK 实现多人视频通话或直播以及相关的集成注意事项。通过合理的集成方式，声网可以支持多达 17 人同时发流。

点击在线链接体验多人视频场景。

前提条件

开始前，请确保你已参考快速开始文档在你的项目中实现基本的实时音视频互动功能。

实现步骤

参考以下步骤，在你的项目中实现多人视频场景。

1. 发流端开启双流模式

发流端在发布本地音视频轨道之前，调用 enableDualStream 开启。开启双流模式后，SDK 会在发送视频流的同时，额外发送一路分辨率低、码率低的视频流。其中，原视频流称为大流，分辨率和码率更低的那路流则称为小流。

大流的视频属性（Video Profile）理论上可以设置为所有 SDK 支持的视频属性，但声网建议使用不超过分辨率 640 x 480，帧率 15 fps 的视频属性。

小流的视频属性默认固定为分辨率 160 × 120，帧率 15 fps，码率 50 Kbps。如果你不想要使用默认的小流视频属性，可以调 setLowStreamParameter 自定义小流的视频参数，防止因小流码率过高而造成带宽压力。

注意

• 小流的分辨率（宽 x 高）比例需要和大流的分辨率（宽 x 高）比例相同。
• 由于不同的浏览器对于视频参数设置有不同的限制，setLowStreamParameter 设置的视频参数不一定都会生效。目前发现的未能充分适配的浏览器有 Firefox 浏览器，对其设置帧率不生效，浏览器本身会把帧率固定在 30 fps。

2. 接收端设置订阅流类型

接收端调用 setRemoteVideoStreamType 订阅某一用户的视频大流，订阅其它用户的视频小流。声网建议你在界面布局里采用一大多小的窗口布局：大窗口显示大流的画面，小窗口显示小流的画面。

注意

• 桌面端最多订阅 4 路大流和 13 路小流。
• 移动端最多订阅 1 路大流和 4 路小流。

3. 发布和订阅流

完成上述设置后，调用 publish 方法发布本地流，调用 subscribe 方法订阅远端流。

示例代码

TypeScript

// 自定义设置小流视频参数。设置 Video Profile 为 160 × 120, 15 fps, 120 Kbps
client.setLowStreamParameter({
  width: 160,
  height: 120,
  framerate: 15,
  bitrate: 120,
});

// 开启双流模式
client.enableDualStream().then(() => {
  console.log("enable dual stream success");
}).catch(err => {
  console.log(err);
});

// 选择订阅某个用户的大流或小流
client.setRemoteVideoStreamType(user, streamType)

声网提供了多人视频场景的开源示例项目供你参考，你可以前往下载或查看其中的源代码。

dualStream

dualStream