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
このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

画面共有

This tutorial mainly introduces how to implement screen sharing in TRTC Web SDK.

Demo



Usage

Start Screen Sharing

Call trtc.startScreenShare() to start screen sharing.
const trtcA = TRTC.create();
await trtcA.enterRoom({
scene: 'rtc',
sdkAppId: 140000000, // Fill in your sdkAppId
userId: 'userA', // Fill in your userId
userSig: 'userA_sig', // Fill in userSig corresponding to userId
roomId: 6969
})
await trtcA.startScreenShare();

// Setting a view if you need to preview local screen sharing.
await trtcA.startScreenShare({ view: 'local-screen-sharing-element-id' });
The SDK uses the 1080p parameter configuration by default to capture screen sharing, you can customize this parameter by referring to trtc.startScreenShare({ option: { profile: '720p' }})

Play Remote Screen Sharing

const trtcB = TRTC.create();
trtcB.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
// Main video stream
if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) {
trtcB.startRemoteVideo({ userId, streamType, view: `${userId}_main` });
} else {
// Sub video stream, it's remote screen sharing.
// 'view' is the element id of a div for video playback.
trtcB.startRemoteVideo({ userId, streamType, view: `${userId}_screen` });
}
});

await trtcB.enterRoom({
scene: 'rtc',
sdkAppId: 140000000, // Fill in your sdkAppId
userId: 'userB', // Fill in your userId
userSig: 'userB_sig', // Fill in userSig corresponding to userId
roomId: 6969
})
What is the main/sub video stream?
1. TRTC has a main video stream (main stream) and an sub video stream (sub stream).
2. The camera is published through the main stream, and the screen sharing is published through the sub stream.
3. The main video stream includes: big stream and small stream. By default, TRTC.startRemoteVideo plays the big stream, and the small stream can be played through the small parameter. Refer to: Optimize Multi-Person Video Calls.




Screen Sharing + System Audio

await trtcA.startScreenShare({ option: { systemAudio: true }});
Capturing system audio is only supported by Chromium based browser M74+, such as Chrome, Edge, Opera.
OS
System Audio
Tab Audio
Windows
Yes
Yes
MacOS
No
Yes
Linux
No
Yes
Non-Chromium based browser, such as Safari, Firefox
No
No
Check Share audio in the pop-up dialog box, and the system audio will be mixed with the local microphone and published. Other users in the room will receive the TRTC.EVENT.REMOTE_AUDIO_AVALIABLE event.




Stop Screen Sharing

1. Call trtc.stopScreenShare() to stop screen sharing.
2. Other users in the room will receive the TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE event, and streamType is TRTC.TYPE.STREAM_TYPE_SUB.
// Stop screen sharing
await trtcA.stopScreenShare();

trtcB.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, ({ userId, streamType }) => {
// Remote user stopped the screen sharing.
if (streamType === TRTC.TYPE.STREAM_TYPE_SUB) {}
})
In addition, users may also stop screen sharing through the browser's own button, SDK will stop screen sharing when user click the Stop Button. You can listen for the TRTC.EVENT.SCREEN_SHARE_STOPPED event.



// Listen for local screen sharing stop event
trtcA.on(TRTC.EVENT.SCREEN_SHARE_STOPPED, () => {
console.log('screen sharing was stopped');
});

FAQ

1. Safari screen sharing error getDisplayMedia must be called from a user gesture handler
This is because Safari restricts the getDisplayMedia screen capture interface, which must be called within 1 second of the callback function of the user click event.
Refer to: webkit issue.
// good
async function onClick() {
// It is recommended to execute the collection logic first when onClick is executed
await trtcA.startScreenShare();
await trtcA.enterRoom({
roomId: 123123,
sdkAppId: 140000000, // Fill in your sdkAppId
userId: 'userA', // Fill in your userId
userSig: 'userA_sig', // Fill in userSig corresponding to userId
});
}

// bad
async function onClick() {
await trtcA.enterRoom({
roomId: 123123,
sdkAppId: 140000000, // Fill in your sdkAppId
userId: 'userA', // Fill in your userId
userSig: 'userA_sig', // Fill in userSig corresponding to userId
});
// Entering the room may take more than 1s, and the collection may fail
await trtcA.startScreenShare();
}
2. Mac Chrome screen sharing fails with the error message "NotAllowedError: Permission denied by system" or "NotReadableError: Could not start video source" when screen recording is already authorized.
It's a Chrome bug. Solution:
2.1 Open Mac System Settings
2.2 Click Security & Privacy
2.3 Click Privacy
2.4 Click Screen Recording
2.5 Turn off Chrome screen recording authorization
2.6 Reopen Chrome screen recording authorization
2.7 Close Chrome browser
2.8 Reopen Chrome browser