RTC Engine
  • Overview
  • Web
    • Demo のクイックスタート
    • SDK クイックスタート
    • 基本機能
      • 画面共有
      • ライブブロードキャスト
      • メディアデバイス
      • 音量
      • エンコーディング構成ファイルの設定
      • ネットワーク品質の検出
      • 検出能力
    • 高度な機能
      • AI ノイズ低減の有効化
      • ミキシングを有効にします
      • ウォーターマークを有効にします
      • Enable Virtual Background
      • 美顔とエフェクトの有効化
      • データメッセージ
      • キャプチャーとレンタリングのカスタマイズ
    • インターフェースリスト
    • リリース説明
    • 対応するプラットホーム
    • Web に関するよくあるご質問
      • 複数人でのビデオ通話を最適化
      • 制限付き自動再生の処理
      • ファイアウォール制限への対応
      • その他
  • Android
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • エラーコード
    • ソリューション
      • リアルタイムコーラス (TUIKaraoke)
        • クイックインテグレーション
        • 実施ステップ
        • 曲の同期
        • 歌詞の同期
        • 音声同期
        • ミクスストリーミングソリューション
        • TRTCKaraoke 関連インターフェース
        • よくあるご質問
    • リリース説明
  • iOS
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • ErrorCode
    • ソリューション
      • クイックインテグレーション
      • 実施ステップ
      • 曲の同期
      • 歌詞の同期
      • 音声同期
      • ミクスストリーミングソリューション
      • TRTCKaraoke 関連インターフェース
      • よくあるご質問
    • リリース説明
  • macOS
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • Advanced Features
      • ハードウェアデバイスのテスト
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • ErrorCode
      • リリース説明
    • リリース説明
  • Windows
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ハードウェアデバイスのテスト
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • エラーコード
    • リリース説明
  • Electron
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • 顧客インターフェース
      • Overview
      • エラーコード
  • Flutter
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • 顧客インターフェース
      • Overview
      • エラーコード
  • Unity
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
    • 顧客インターフェース
      • Overview
      • エラーコード
  • QT
    • インテグレーション
      • 1. SDK のインポート
  • Overview
    • Overview
  • 概念
  • Features
  • 性能統計
  • 価格
    • 無料時間
    • RTC-Engine パッケージ
    • サブスクリプションパッケージ期間の課金説明
    • 従量課金
      • 音声・ビデオ時間の課金説明
      • クラウド録画の課金説明
      • ミックストランスコーディングとCDNへのリレーの課金説明
  • よくあるご質問
    • 初心者のよくあるご質問
    • マイグレーションガイド
      • Twilio Video から TRTC への移行
      • 課金
      • Features
      • 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.