# 多人视频场景 (/zh-CN/realtime-media/rtc/build/video/multi-user-video)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

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

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

点击[在线链接](https://webdemo.agora.io/example/others/dualStream/index.html)体验多人视频场景。

## 前提条件 [#前提条件]

开始前，请确保你已参考[快速开始](/zh-CN/realtime-media/rtc/get-started/quick-start)文档在你的项目中实现基本的实时音视频互动功能。

## 实现步骤 [#实现步骤]

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

### 1. 发流端开启双流模式 [#1-发流端开启双流模式]

发流端在发布本地音视频轨道之前，调用 [`enableDualStream`](/zh-CN/api-reference/rtc/web/interfaces/iagorartcclient#enabledualstream) 开启双流模式。开启双流模式后，SDK 会在发送视频流的同时，额外发送一路分辨率低、码率低的视频流。其中，原视频流称为大流，分辨率和码率更低的那路流则称为小流。

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

小流的视频属性默认固定为分辨率 160 × 120，帧率 15 fps，码率 50 Kbps。如果你不想要使用默认的小流视频属性，可以调 [`setLowStreamParameter`](/zh-CN/api-reference/rtc/web/interfaces/iagorartcclient#setlowstreamparameter) 自定义小流的视频参数，防止因小流码率过高而造成带宽压力。

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

### 2. 接收端设置订阅流类型 [#2-接收端设置订阅流类型]

接收端调用 [`setRemoteVideoStreamType`](/zh-CN/api-reference/rtc/web/interfaces/iagorartcclient#setremotevideostreamtype) 订阅某一用户的视频大流，订阅其它用户的视频小流。声网建议你在界面布局里采用一大多小的窗口布局：大窗口显示大流的画面，小窗口显示小流的画面。

:::warning[注意]
- 桌面端最多订阅 4 路大流和 13 路小流。
- 移动端最多订阅 1 路大流和 4 路小流。
:::

### 3. 发布和订阅流 [#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)
```

声网提供了多人视频场景的开源示例项目供你参考，你可以前往下载或查看其中的源代码。
<Cards>
  <Card title={<RepositoryCardTitle provider="gitee">dualStream</RepositoryCardTitle>} href="https://gitee.com/agoraio-community/API-Examples-Web/blob/main/src/example/others/dualStream/index.js" />
  <Card title={<RepositoryCardTitle provider="github">dualStream</RepositoryCardTitle>} href="https://github.com/Shengwang-Lab/API-Examples-Web/blob/main/src/example/others/dualStream/index.js" />
</Cards>