RTC Engine
  • 产品概述
  • Web
    • 跑通 Demo
    • SDK 快速启动
    • 基础功能
      • 屏幕分享
      • 直播
      • 媒体设备
      • 音量
      • 设置编码配置文件
      • 检测网络质量
      • 检测能力
    • 高级功能
      • 启用 AI 降噪
      • 启用混音
      • 启用水印
      • Enable Virtual Background
      • 启用美颜和特效
      • 数据消息
      • 自定义采集和渲染
    • 接口列表
    • 发布说明
    • 支持平台
    • Web 常见问题
      • 优化多人视频通话
      • 处理自动播放受限
      • 应对防火墙限制
      • 其他
  • Android
    • Run Sample Code
    • Integration
    • 集成
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • Advanced Features
      • 测试网络质量
      • 自定义采集和渲染
      • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • 错误码
    • 解决方案
      • 实时合唱 (TUIKaraoke)
        • 快速集成
        • 实施步骤
        • 歌曲同步
        • 歌词同步
        • 语音同步
        • 混流解决方案
        • TRTCKaraoke 相关接口
        • 常见问题
    • 发布说明
  • iOS
    • Run Sample Code
    • Integration
    • 集成
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • Advanced Features
      • 测试网络质量
      • 自定义采集和渲染
      • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • ErrorCode
    • 解决方案
      • 快速集成
      • 实施步骤
      • 歌曲同步
      • 歌词同步
      • 语音同步
      • 混流解决方案
      • TRTCKaraoke 相关接口
      • 常见问题
    • 发布说明
  • macOS
    • Run Sample Code
    • Integration
    • 集成
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • Advanced Features
      • 测试硬件设备
      • 测试网络质量
      • 自定义采集和渲染
      • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • ErrorCode
      • 发布说明
    • 发布说明
  • Windows
    • Run Sample Code
    • Integration
    • 集成
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • Advanced Features
      • 测试硬件设备
      • 测试网络质量
      • 自定义采集和渲染
      • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • 类型定义
      • 废弃接口
      • 错误码
    • 发布说明
  • Electron
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • 客户端API
      • 产品概述
      • 错误码
  • Flutter
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • 客户端API
      • 产品概述
      • 错误码
  • Unity
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
    • 客户端API
      • 产品概述
      • 错误码
  • QT
    • 集成
      • 1. 导入 SDK
  • 产品概述
    • 产品概述
  • 概念
  • 产品特性
  • 性能统计
  • 价格中心
    • 免费时长
    • RTC-Engine 套餐
    • 订阅套餐时长计费说明
    • 现收现付
      • 音视频时长计费说明
      • 云端录制计费说明
      • 混流转码与旁路转推计费说明
  • 常见问题
    • 入门常见问题
    • 迁移指南
      • Twilio Video 到 TRTC 的迁移
      • 计费
      • 产品特性
      • UserSig
      • 防火墙限制
      • 如何缩减安装包
      • TRTCCalling Web 相关
      • 音视频质量
      • 其他
RTC Engine
当前内容仅提供英语版本,中文版我们将尽快补充,感谢您的理解。

优化多人视频通话

In the multi-person video call scenario, as the number of streaming users increases, both bandwidth consumption and device performance consumption will rise for users who are subscribing streams. If no optimization is done, the experience on low-end devices will be greatly compromised.

This tutorial mainly introduces the best practices for multi-person video call scenario. Through the following two solutions, you can reduce bandwidth consumption and ensure the best call experience.
Enable Small Stream
Enable "receiveWhenViewVisible"

Enable Small Stream

The small stream refers to encoding two video streams at the same time when the camera is turned on. One is a normal resolution video (referred to as the big stream), and the other is a low-resolution video (referred to as the small stream). At the receiving end, you can choose to receive the big stream or the small stream to save bandwidth.

Applicable scenarios: The small stream is suitable for multi-person video call scenario. Generally, in the page layout of multi-person video call scenario, there will be "a big view and a lot of small view". The video in the big view is the big stream, and the video in the small view is the small stream. This feature will increase the upstream bandwidth slightly, but it can greatly save the downstream bandwidth.







Publish Small Stream on the Publisher

When calling trtc.startLocalVideo, you can set the small parameter to enable small stream encoding.
await trtc.startLocalVideo({ option: { small: '120p' }});
Since version 5.3.0+, you can turn on/off dynamically the small stream.
await trtc.startLocalVideo();

// turn on small stream
await trtc.updateLocalVideo({ option: { small: '120p' }});

// turn off small stream
await trtc.updateLocalVideo({ option: { small: false }});
Note
In an environment that does not support enabling small streams, the small parameter will not take effect and will not report an error.

Subscribe Small Stream on the Subscriber

You can set the small parameter of trtc.startRemoteVideo to subscribe the small stream. Otherwise, the big stream is subscribed by default.
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
trtc.startRemoteVideo({
view: '', // Pass in the elementId or element instance object of the video container.
userId,
streamType,
option: { small: true }
});
})
Note
There is no need to check whether the remote user has published the small stream in advance when subscribing the small stream. If the remote end does not publish the small stream, the SDK will automatically subscribe the big stream.
You can also set the small parameter of trtc.updateRemoteVideo to chose subscribing big stream or small stream. It is commonly used to implement the following feature:
Playing remote video on "big view" when the user clicks the "small view"
Playing remote video on "small view" when the user clicks the "big view"
// Switch to "big view" playback when the user clicks the "small view".
await trtc.updateRemoteVideo({
view: '', // Pass in the elementId or element instance object of the "big view" video container.
userId: '', // Pass in the userId of the remote user.
streamType: TRTC.TYPE.STREAM_TYPE_MAIN,
option: { small: false }
})
// Switch to "small view" playback when the user clicks the "big view".
await trtc.updateRemoteVideo({
view: '', // Pass in the elementId or element instance object of the "small view" video container.
userId: '', // Pass in the userId of the remote user.
streamType: TRTC.TYPE.STREAM_TYPE_MAIN,
option: { small: true }})
Note:
TRTC's video stream has a main stream and a sub stream. The main stream includes the big stream and the small stream, and the sub stream is generally used for screen sharing.
When subscribing the video stream, the main stream defaults to subscribe the big stream, and the small parameter can be used to subscribe the small stream.
TRTC supports subscribe the big stream + sub stream, small stream + sub stream, and does not support subscribe the big stream + small stream at the same time. The big stream and the small stream are played in the same video view.
Only when the publisher enables the small stream, the remote main stream will be switched to the small stream when the small parameter is specified. If there is no small stream, the SDK will automatically subscribe the big stream.
There is currently no event notification for successful switching between big and small streams.

Enable "receiveWhenViewVisible"

In general, in a multi-person video scenario, due to the limitaion of web page size, the subscriber will not display all videos on the page. Therefore, for those remote videos that do not need to be displayed on the page, they do not need to be subscribed. Only when the view is visible should the video stream be subscribed. This is to save traffic and reduce performance overhead.

However, Implementing this feature is not easy for you. Starting with version 5.4.0, the SDK has built-in support for this feature. You only need to set the receiveWhenViewVisible and viewRoot parameters when calling trtc.startRemoteVideo to enable this feature, which is very convenient and fast.

The SDK will automatically check the visibility state of the view passed in trtc.startRemoteVideo. Video streaming will start when the view is visible and stop when view is not visible.

Sample code

Assuming your DOM structure for playing videos is as follows:
<div id='view-list'>
<div id='view1_main'></div>
<div id='view2_main'></div>
<div id='view3_main'></div>
</div>
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
trtc.startRemoteVideo({
view: 'view1_main',
userId,
streamType,
option: {
small: true,
// Enable "receiveWhenViewVisible"
receiveWhenViewVisible: true,
// Pass in the first-level parent element of all view list,
// which is used to calculate the reference relationship between view and viewRoot
// and check whether the view is visible. The default value is document.body.
viewRoot: document.getElementById('view-list')
}
});
})

Add loading effect for better user experience

After enabling this feature, when the user scrolls through the video list:
When the view changes from visible to invisible, the SDK will stop streaming.
When the view changes from invisible to visible, the SDK will resume streaming.

Since resuming streaming until the video playback is successful is an asynchronous process, a black screen may appear during this process. To provide a better user experience, we recommend adding a loading effect to the video area during this asynchronous process.

You can refer to the following code to check whether to display the loading effect.
let isLoading = true;

trtc.on(TRTC.EVENT.VIDEO_PLAY_STATE_CHANGED, ({ userId, streamType, state }) => {
// '' is local video
if (userId !== '') return;

// set isLoading to false when remote video is playing.
isLoading = state !== 'PLAYING';

// You can tell which remote user's main/sub stream playback state has changed
// by userId and streamType.
});

await trtc.stopRemoteVideo({ userId, streamType })
// set isLoading to false after stop remote video.
isLoading = false;

FAQ

How does the SDK detect whether a view is visible?

When any pixel point of the view appears in the viewRoot area, the view is considered visible. Conversely, when all pixel points of the view are not in the viewRoot area, the view is considered invisible.

Do I need to consider browser compatibility for big and small streams?

Although some browsers do not support enabling big and small streams (such as all browsers on iOS systems and Chrome versions below 63), enabling small stream has no side effects. If the environment does not support it, the SDK will only use the big stream, and the call can proceed normally. You do not need to write additional if-else statements.

You can call TRTC.isSupported to get checkResult.detail.isSmallStreamSupported to confirm whether the current environment supports enabling small stream.