@tencentcloud/sdk-mcp 1.3.3 → 1.3.5

package/resource/doc/rtcengine/web/plugin/26-advanced-publish-cdn-stream.md

@@ -0,0 +1,453 @@
+## 功能描述
+
+本文主要描述如何使用 CDNStreaming 插件，实现云端混流、转推 CDN、回推混流到 TRTC 房间的功能。
+
+## 前提条件
+
+1. [TRTC SDK](https://www.npmjs.com/package/trtc-sdk-v5) 版本需要 >= 5.1。
+
+2. 开通腾讯 [云直播](https://console.cloud.tencent.com/live) 服务。应国家相关部门的要求，直播播放必须配置播放域名，具体操作请参考 [域名管理](https://console.cloud.tencent.com/live/livestat)。
+
+3. 在 [实时音视频控制台](https://console.cloud.tencent.com/trtc) 左侧导航栏选择【应用管理】，单击目标应用所在行的【配置】，打开【启用旁路推流】的开关。
+
+    - "全局自动旁路"模式下，TRTC 所有上行音视频流都会被自动转推到腾讯云 CDN。
+    - "指定流旁路"模式下，您可以通过该插件或者 [服务端 REST API](https://cloud.tencent.com/document/product/647/84721) 将指定音视频流推送到 CDN 且指定播放地址。
+
+    <div align="center">
+    <img src="assets/relayed-push.png" />
+    </div>
+
+## 快速开始
+
+### 安装与注册
+
+```js
+import TRTC from 'trtc-sdk-v5';
+import { CDNStreaming, PublishMode } from 'trtc-sdk-v5/plugins/cdn-streaming';
+
+const trtc = TRTC.create({ plugins: [CDNStreaming] });
+```
+
+### 插件模式概览
+
+本插件提供四种推流转码模式：
+
+| 模式 | PublishMode | 说明 |
+|------|-------------|------|
+| A | `PublishMainStreamToCDN` | 转推摄像头麦克风流到 CDN |
+| B | `PublishSubStreamToCDN` | 转推屏幕分享流到 CDN |
+| C | `PublishMixStreamToCDN` | 混合多路流并转推到 CDN |
+| D | `PublishMixStreamToRoom` | 混合多路流并回推到 TRTC 房间 |
+
+对于每一种模式，均满足以下生命周期：
+
+- `trtc.startPlugin('CDNStreaming', options)` - 启动插件
+- `trtc.updatePlugin('CDNStreaming', options)` - 更新参数（0 或 N 次）
+- `trtc.stopPlugin('CDNStreaming', options)` - 停止插件
+
+详细的 `options` 参数可见 [CDNStreamingOptions](./global.html#CDNStreamingOptions)。
+
+## 转推单流到 CDN
+
+将摄像头流（模式 A）或屏幕分享流（模式 B）转推到腾讯云 CDN。
+
+### 步骤 1：选择旁路推流方式
+
+在 [实时音视频控制台](https://console.cloud.tencent.com/trtc) 选择旁路推流方式：
+
+**全局自动旁路模式：**
+
+TRTC 房间里的摄像头流、屏幕分享流将**自动**被推流到腾讯云 CDN，播放地址格式如下：
+
+`http://[播放域名]/live/[streamId].flv`
+
+- `[播放域名]`：云直播中配置的播放域名，查看已有的域名请参考 [域名管理](https://console.cloud.tencent.com/live/livestat)
+- 摄像头流的 `[streamId]` 默认值为 `${sdkAppId}_${roomId}_${userId}_main`
+- 屏幕分享流的 `[streamId]` 默认值为 `${sdkAppId}_${roomId}_${userId}_aux`
+- 当 roomId 或 userId 包含特殊字符时，streamId 使用 MD5：`${sdkAppId}_${md5(${roomId}_${userId}_main)}`
+
+**手动旁路模式：**
+
+房间里的流**不会**被自动推流到腾讯云 CDN，请继续步骤 2 手动开启推流。
+
+### 步骤 2：开启转推
+
+```javascript
+// 开启摄像头流转推
+const options = {
+  target: {
+    publishMode: PublishMode.PublishMainStreamToCDN
+  }
+}
+try {
+  await trtc.startPlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming start failed', error);
+}
+```
+
+播放地址：`http://[播放域名]/live/${sdkAppId}_${roomId}_${userId}_main.flv`
+
+### 步骤 3：修改 StreamId（可选）
+
+```javascript
+// 自定义播放地址
+const options = {
+  target: {
+    publishMode: PublishMode.PublishMainStreamToCDN,
+    streamId: 'stream001'
+  }
+}
+try {
+  await trtc.updatePlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming update failed', error);
+}
+```
+
+新播放地址：`http://[播放域名]/live/stream001.flv`
+
+### 步骤 4：停止转推
+
+```javascript
+const options = {
+  target: {
+    publishMode: PublishMode.PublishMainStreamToCDN,
+  }
+}
+try {
+  await trtc.stopPlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming stop failed', error);
+}
+```
+
+可通过 [流管理界面](https://console.cloud.tencent.com/live/streammanage) 查看目前的流状态。
+
+## 转推混流到 CDN
+
+将房间内多路音视频流混合为一路并转推到 CDN。
+
+其他端实现方式可参考 [云端混流转码](https://cloud.tencent.com/document/product/647/16827)。
+
+### 工作原理
+
+本插件会向腾讯云的转码服务器发送一条指令，将房间里的多路音视频流混合为一路。您可以通过以下参数自定义：
+- `encoding`：输出流质量（分辨率、码率、帧率）
+- `mix`：混流布局配置
+
+<img src="https://qcloudimg.tencent-cloud.cn/raw/780b843f7f5f4a06dcd9ff0dc13b2621.png" style="width: 1000px">
+
+### 使用流程示例
+
+1. 调用 `startPlugin`，混流布局如图 A 所示
+2. 调用 `updatePlugin` 新增屏幕分享，混流布局如图 B 所示
+3. 不需要混流时调用 `stopPlugin`
+
+<img src="https://qcloudimg.tencent-cloud.cn/raw/3069d75fab45d643ec940f8705d65b7b.png" style="width: 600px">
+
+### 配置说明
+
+1. 将 `target.publishMode` 设置为 `PublishMode.PublishMixStreamToCDN`
+
+2. 配置 `encoding` 参数设置输出质量：videoWidth、videoHeight、videoBitrate、videoFramerate、videoGOP、audioSampleRate、audioBitrate、audioChannels
+
+3. 配置 `mix.backgroundColor` 和 `mix.backgroundImage` 设置背景
+   > 背景图需要在 "[实时音视频控制台](https://console.cloud.tencent.com/trtc) > 应用管理 > 功能配置 > 素材管理" 中上传。上传成功后获取"图片ID"，将其转换为字符串设置到 backgroundImage（如 "63"）。
+
+4. 配置 `mix.audioMixUserList` 设置音频混流（为空时默认混流全部用户音频）
+
+5. 配置 `mix.videoLayoutList` 设置视频布局
+
+> 坐标系说明：原点 (0, 0) 位于输出画布的**左上角**，单位为像素。locationX/locationY 是每路流的左上角位置；width/height 是布局区域大小。坐标和尺寸与 encoding.videoWidth/videoHeight 相关联——如果更改分辨率，需要相应地缩放布局参数以避免错位。
+>
+> 完整参数详情请参考 [CDNStreamingOptions](./global.html#CDNStreamingOptions)。
+
+### 开启混流
+
+```javascript
+let options = {
+  target: {
+    publishMode: PublishMode.PublishMixStreamToCDN,
+    streamId: 'mix-stream',
+  },
+  encoding: {
+    videoWidth: 1280,
+    videoHeight: 720,
+    videoBitrate: 1500,
+    videoFramerate: 15,
+  },
+  mix: {
+    audioMixUserList: [
+      { userId: 'current_user_id' }
+    ],
+    videoLayoutList: [
+      {
+        fixedVideoUser: { userId: 'current_user_id' },
+        width: 640,
+        height: 480,
+        locationX: 0,
+        locationY: 0,
+        fixedVideoStreamType: TRTC.TYPE.STREAM_TYPE_MAIN,
+        zOrder: 1
+      },
+    ]
+  }
+};
+try {
+  await trtc.startPlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming start failed', error);
+}
+```
+
+播放地址：`http://[播放域名]/live/mix-stream.flv`
+
+### 更新布局
+
+```javascript
+// 添加屏幕分享到混流
+let options = {
+  target: {
+    publishMode: PublishMode.PublishMixStreamToCDN,
+    streamId: 'mix-stream',
+  },
+  encoding: {
+    videoWidth: 1280,
+    videoHeight: 720,
+    videoBitrate: 1500,
+    videoFramerate: 15,
+  },
+  mix: {
+    audioMixUserList: [
+      { userId: 'current_user_id' }
+    ],
+    videoLayoutList: [
+      {
+        fixedVideoUser: { userId: 'current_user_id' },
+        width: 640,
+        height: 480,
+        locationX: 0,
+        locationY: 0,
+        fixedVideoStreamType: TRTC.TYPE.STREAM_TYPE_MAIN,
+        zOrder: 1
+      },
+      {
+        fixedVideoUser: { userId: 'current_user_id' },
+        width: 640,
+        height: 480,
+        locationX: 640,
+        locationY: 0,
+        fixedVideoStreamType: TRTC.TYPE.STREAM_TYPE_SUB,
+        zOrder: 1
+      },
+    ]
+  }
+}
+try {
+  await trtc.updatePlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming update failed', error);
+}
+```
+
+### 停止混流
+
+```javascript
+let options = {
+  target: {
+    publishMode: PublishMode.PublishMixStreamToCDN,
+  }
+}
+try {
+  await trtc.stopPlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming stop failed', error);
+}
+```
+
+## 推流到指定 CDN
+
+将流推送到任意云服务商的 CDN。
+
+### 步骤 1：获取 CDN 推流地址
+
+在任意云服务商获取 CDN 推流地址 url。
+
+### 步骤 2：获取 bizId 和 appId
+
+在 [实时音视频控制台](https://console.cloud.tencent.com/trtc)【应用管理-配置-旁路转推配置】查看：
+- 默认推流域名的前 6 个数字是 `bizId`
+- 应用的 SDKAppId 是 `appId`
+
+<div align="center">
+  <img src="assets/stream-manager.png" style="width: 600px">
+</div>
+
+### 步骤 3：开始推流
+
+```javascript
+let options = {
+  target: {
+    publishMode: PublishMode.PublishMainStreamToCDN,
+    appId: 0,    // 你的 appId
+    bizId: 0,    // 你的 bizId
+    url: ''      // 你的 CDN 推流地址
+  }
+};
+try {
+  await trtc.startPlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming start customCDN failed', error);
+}
+```
+
+### 停止推流
+
+```javascript
+let options = {
+  target: {
+    publishMode: PublishMode.PublishMainStreamToCDN,
+  }
+}
+try {
+  await trtc.stopPlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming stop customCDN failed ', error);
+}
+```
+
+## 回推混流到 TRTC 房间
+
+将混流以机器人身份推送到指定 TRTC 房间。
+
+> **注意：**
+> - 此功能会自动在当前房间进入一个 userId 为 `mcu_robot_${roomId}_${userId}` 的拉流机器人，房间内其他 userId 要避免相同导致互踢
+> - 此功能混流会有转码费用
+> - audioMixUserList 为空时默认混所有人，若不需要混流可传入不存在的 userId
+> - 完整参数详情请参考 [CDNStreamingOptions](./global.html#CDNStreamingOptions)
+
+### 开启回推
+
+```javascript
+// 3333 房间的用户 user_123 发起该任务
+// 混流将以 push_back_user_321 机器人身份发布到 4444 房间
+let options = {
+  target: {
+    publishMode: PublishMode.PublishMixStreamToRoom,
+    robotUser: {
+      userId: 'push_back_user_321', // 建议动态生成
+      roomId: 4444,
+    }
+  },
+  encoding: {
+    videoWidth: 1280,
+    videoHeight: 720,
+    videoBitrate: 1500,
+    videoFramerate: 15,
+  },
+  mix: {
+    audioMixUserList: [
+      { userId: 'user_123', roomId: 3333 }
+    ],
+    videoLayoutList: [
+      {
+        fixedVideoUser: { userId: 'user_123', roomId: 3333 },
+        width: 640,
+        height: 480,
+        locationX: 0,
+        locationY: 0,
+        fixedVideoStreamType: TRTC.TYPE.STREAM_TYPE_MAIN,
+        zOrder: 1
+      },
+      {
+        fixedVideoUser: { userId: 'user_123', roomId: 3333 },
+        width: 640,
+        height: 480,
+        locationX: 640,
+        locationY: 0,
+        fixedVideoStreamType: TRTC.TYPE.STREAM_TYPE_SUB,
+        zOrder: 1
+      },
+    ]
+  }
+};
+try {
+  await trtc.startPlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming start push stream to room failed', error);
+}
+```
+
+### 更新布局
+
+```javascript
+let options = {
+  target: {
+    publishMode: PublishMode.PublishMixStreamToRoom
+  },
+  mix: {
+    videoLayoutList: [
+      {
+        fixedVideoUser: { userId: 'user_123', roomId: 3333 },
+        width: 640,
+        height: 480,
+        locationX: 640,
+        locationY: 0,
+        fixedVideoStreamType: TRTC.TYPE.STREAM_TYPE_MAIN,
+        zOrder: 1
+      }
+    ]
+  }
+};
+try {
+  await trtc.updatePlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming update push stream to room failed', error);
+}
+```
+
+### 停止回推
+
+```javascript
+let options = {
+  target: {
+    publishMode: PublishMode.PublishMixStreamToRoom,
+  }
+}
+try {
+  await trtc.stopPlugin('CDNStreaming', options);
+} catch (error) {
+  console.error('CDNStreaming stop push stream to room failed ', error);
+}
+```
+
+## API 说明
+
+对于 `startPlugin('CDNStreaming', options)` 与 `updatePlugin('CDNStreaming', options)`，参数类型可见 [CDNStreamingOptions](./global.html#CDNStreamingOptions)。
+
+对于 `stopPlugin('CDNStreaming', options)`，参数只需要填入 `options.target.publishMode` 字段即可。
+
+## 注意事项
+
+1. 录制混合后的音频流，请参考 [云端录制](https://cloud.tencent.com/document/product/647/50768#3158718a-df0d-4590-b3d4-a4796d4c6561)。
+
+2. 云端混流转码需要对输入 MCU 集群的音视频流进行解码后重新编码输出，将产生额外的服务成本，因此 TRTC 将向使用 MCU 集群进行云端混流转码的用户收取额外的增值费用。云端混流转码费用根据**转码输出的分辨率大小**和**转码时长**进行计费，转码输出的分辨率越高、转码输出的时间越长，费用越高。详情请参见 [云端混流转码计费说明](https://cloud.tencent.com/document/product/647/49446)。
+
+3. 音视频时长计费说明，参考 [计费说明](https://cloud.tencent.com/document/product/647/44248)。
+
+4. 退出房间后不会继续计费，但在重新进房时会自动继续开启，若想直接终止转推 CDN 和混流，请执行 stopPlugin 对应的 publishMode。
+
+## 常见问题
+
+Q. 无法停止推流？
+
+请检查是否在控制台开启了"全局自动旁路"，该模式下无法通过接口停止。
+
+Q. 如何查看目前所有的流？
+
+可通过 [流管理界面](https://console.cloud.tencent.com/live/streammanage) 查看目前的流状态。
+
+Q. 屏幕分享模糊？
+
+SDK 默认使用 `1080p` 参数配置来采集屏幕分享，具体参考接口：{@link TRTC#startScreenShare startScreenShare}

package/resource/doc/rtcengine/web/plugin/27-advanced-small-stream.md

@@ -0,0 +1,180 @@
+## 功能描述
+
+在多人视频通话场景中，随着推流用户的增加，对于拉流的用户来说，带宽流量消耗及设备性能消耗都会随之上升，如果不做优化，在中低端机型的体验会大打折扣。
+
+本文主要介绍多人视频场景的最佳实践，通过使用 大小流 + 只拉可视区域的视频流 功能，以降低带宽消耗及保障最佳的通话体验。
+
+## 开启大小流
+
+大小流是指在开启摄像头时，同时编码两路视频流，一路是正常分辨率的视频（称为大流），另一路是低分辨率的视频（称为小流）。在拉流端可以选择拉大流或者拉小流，以达到节省流量的目的。
+
+适用场景：大小流适用于多人视频通话场景，一般在多人通话场景的页面中，页面布局会有一个大画面 + n个小画面，位于大画面的视频拉大流，位于小画面内的视频拉小流。该功能会少量增加上行带宽，但可以大大节省下行带宽。
+
+### 实现步骤
+
+#### 1. 推流端开启大小流
+
+在 [startLocalVideo](./TRTC.html#startLocalVideo) 时，填写 small 参数，可以开启小流编码。
+
+```js
+await trtc.startLocalVideo({ option: { small: '120p' }});
+```
+
+自 v5.3.0+ 支持动态开关小流
+
+```js
+await trtc.startLocalVideo();
+
+// 动态开启小流
+await trtc.updateLocalVideo({ option: { small: '120p' }});
+
+// 动态关闭小流
+await trtc.updateLocalVideo({ option: { small: false }});
+```
+
+#### 2. 拉流端选择拉大流或小流
+
+在 [startRemoteVideo](./TRTC.html#startRemoteVideo) 时，填写 small 参数，可以拉小流，否则默认订阅大流。
+
+拉小流时，不需要提前判断远端用户是否有推小流，若远端没有推小流，则 SDK 会自动拉大流。后续若该远端用户推小流了，SDK 会自动切换到拉小流。
+
+```js
+trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
+  trtc.startRemoteVideo({ 
+    view: '', // 传入视频容器的 elementId 或者 element 实例对象。
+    userId, 
+    streamType, 
+    option: { small: true }
+  });
+})
+```
+
+在 [updateRemoteVideo](./TRTC.html#updateRemoteVideo) 时，填写 small 参数，可以切换指定 userId 的大小流。常用于实现这样的功能：用户点击“小画面”时，切换到“大画面”播放；用户点击“大画面”时，切换到“小画面”播放。
+
+```js
+// 用户点击“小画面”时，切换到“大画面”播放
+await trtc.updateRemoteVideo({ 
+  view: '', // 传入“大画面”视频容器的 elementId 或者 element 实例对象。
+  userId: '', // 传入远端用户的 userId 
+  streamType: TRTC.TYPE.STREAM_TYPE_MAIN, 
+  option: { small: false }
+})
+// 用户点击“大画面”时，切换到“小画面”播放。
+await trtc.updateRemoteVideo({ 
+  view: '', // 传入“小画面”视频容器的 elementId 或者 element 实例对象。
+  userId: '', // 传入远端用户的 userId 
+  streamType: TRTC.TYPE.STREAM_TYPE_MAIN, 
+  option: { small: true }})
+```
+
+#### 3. 开启【自动切换小流】插件（可选）
+
+使用该插件 SDK 版本需 >= 5.11.0。
+
+该插件通常用在带宽受限的场景，如带宽不足，导致大流卡顿，则自动切换到小流，会降低分辨率但保证流畅度。
+
+默认的切换策略为：
+- 当网络持续 10s 内延迟大于 200ms 或 丢包率大于 20%，并且帧率波动较大时，则切换到小流
+- 当网络持续 20s 内延迟小于 100ms 且 丢包率小于 10% 时，并且帧率恢复正常时，则切回到大流
+- 只允许自动切换到小流 2 次，超过 2 次后，则不再自动切换到小流
+
+引入并注册插件：
+
+```js
+import SmallStreamAutoSwitcher from 'trtc-sdk-v5/plugins/small-stream-auto-switcher';
+const trtc = TRTC.create({ plugins: [SmallStreamAutoSwitcher] });
+```
+
+插件使用：
+
+```js
+// 启动插件
+await trtc.startPlugin('SmallStreamAutoSwitcher');
+
+// 关闭插件
+await trtc.stopPlugin('SmallStreamAutoSwitcher');
+```
+
+#### 注意事项
+
+1. TRTC 的视频流有主流（主路视频流）和辅流（辅路视频流）之分。主流包括了大流和小流，辅流一般用于屏幕分享。
+2. 拉流时，主流默认拉大流，通过 small 参数可以指定拉小流。支持同时拉大流 + 辅流，小流 + 辅流，不支持同时拉大流 + 小流。大流和小流在同一个视频容器内播放。
+3. 只有推流端开启了小流，拉流端将远端流切换成小流才会生效。若没有小流，则 SDK 会自动拉大流。
+4. 切换大小流成功目前没有事件通知。
+5. 设置的小流分辨率不可以比大流的分辨率还要大，否则设置无效，保持原来的小流分辨率（默认 120p）。
+6. 设置小流分辨率后，实际编码的分辨率会按照大流的长宽比例进行修改，保持和大流的长宽比例一致。
+
+## 开启【只拉可视区域的视频流】功能
+
+通常来说，多人视频场景下，由于页面空间有限，拉流端不会将所有的视频都展示在页面上。因此，对于那些不需要在页面上展示的远端视频，就可以不用拉流。只有 view 可视时，才拉视频流。以达到节省流量和降低性能开销的目的。
+
+而实现这个功能，并不是一件容易的事情。在 v5.4.0 版本开始，SDK 内置了该功能，您只需要在 [startRemoteVideo](./TRTC.html#startRemoteVideo) 时，设置 `receiveWhenViewVisible` 及 `viewRoot` 参数，即可开启该功能，非常方便快捷。SDK 会自动判断您在 startRemoteVideo 时传入的 view 的可视状态，当 view 可视时拉流，当 view 不视时，停止拉流。
+
+### 代码示例
+
+假设您用于播放视频的 DOM 结构如下
+
+```html
+<div id='view-list'>
+  <div id='view1_main'></div>
+  <div id='view2_main'></div>
+  <div id='view3_main'></div>
+</div>
+```
+
+```js
+trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
+  trtc.startRemoteVideo({ 
+    view: 'view1_main',
+    userId, 
+    streamType, 
+    option: { 
+      small: true,
+      receiveWhenViewVisible: true, // 开启【只订阅可视区域的视频流】功能
+      viewRoot:  document.getElementById('view-list') // 传入所有 view list 的第一级父级元素，用于计算 view 和 viewRoot 的参考关系，判断 view 是否处于可视状态。默认值是 document.body
+    }
+  });
+})
+```
+
+### 增加 Loading 效果
+
+开启该功能后，在用户滚动视频列表时：
+
+- view 从可视变为不可视时，SDK 会停止拉流。
+- view 从不可视变为可视时，SDK 会恢复拉流。
+
+由于恢复拉流到视频播放成功，是异步的过程，在这个过程中会出现黑屏，一般为了更好的交互体验，建议您在这个异步过程中，给视频区域增加 Loading 的效果。您可以参考如下代码判断是否要展示 Loading。
+
+```js
+let isLoading = true;
+
+// 监听视频播放状态，根据视频播放状态来判断是否显示 Loading 效果。
+trtc.on(TRTC.EVENT.VIDEO_PLAY_STATE_CHANGED, ({ userId, streamType, state }) => {
+  // '' 代表本地的视频播放状态，此处需要非本地视频流（远端）的播放状态。
+  if (userId === '') return;
+
+  // 远端视频播放成功，则停止 Loading 效果
+  isLoading = state !== 'PLAYING';
+
+  // 通过 userId 和 streamType 判断是哪个远端用户的主流/辅流 播放状态变更。
+});
+await trtc.startRemoteVideo({ ... });
+
+
+// 停止远端视频后，停止远端 Loading 效果。
+trtc.stopRemoteVideo()
+isLoading = false;
+```
+
+## 常见问题
+
+1. SDK 如何判断 view 是否处于可视状态。
+
+    当 view 有任意像素点出现在 viewRoot 区域时，即认为 view 是可视的；同时当 view 所有像素点都不在 viewRoot 区域时，则认为 view 是不可视的。
+
+2. 大小流需要考虑浏览器兼容性吗？
+
+    虽然在部分浏览器下不支持开启大小流（例如 iOS 系统的所有浏览器、Chrome 63 以下版本），但是开启大小流是没有副作用的，如果环境不支持，SDK 只会使用大流，通话可以正常进行。您无需写额外的 if else 判断。
+
+    您可以调用 {@link TRTC.isSupported TRTC.isSupported} 获取 checkResult.detail.isSmallStreamSupported 来判断当前环境是否支持开启大小流。