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

8. 开启屏幕共享

说明:本文档主要介绍如何使用屏幕分享,目前一个 TRTC 音视频房间只能有一路屏幕分享。
Electron 平台下的屏幕分享支持主路分享和辅路分享两种方案:
辅路分享 在 TRTC 中,我们可以单独为屏幕分享开启一路上行的视频流,并称之为“辅路(substream)”。辅路分享即主播同时上行摄像头画面和屏幕画面两路画面。这是腾讯会议的使用方案,您可以在调用 startScreenCapture 接口时,通过将 TRTCVideoStreamType 参数指定为 TRTCVideoStreamTypeSub 来启用该模式。
主路分享 在 TRTC 中,我们一般把摄像头走的通道叫做“主路(bigstream)”,主路分享即用摄像头通道分享屏幕。该模式下,主播只有一路上行视频流,要么上行摄像头画面,要么上行屏幕画面,两者是互斥的。您可以在调用 startScreenCapture 接口时,通过将 TRTCVideoStreamType 参数指定为 TRTCVideoStreamTypeBig 来启用该模式。


步骤1:获取分享目标

通过 getScreenCaptureSources 可以枚举可共享的窗口列表,列表通过出参 sourceInfoList 返回。
说明:
Electron 里的桌面屏幕也是一个窗口,叫桌面窗口(Desktop),有两台显示器时,每一台显示器都有一个对应的桌面窗口。所以,getScreenCaptureSources 返回的窗口列表里也会有 Desktop 窗口。
根据获取到的窗口信息,您可以实现一个简单的列表页面,将可以分享的目标罗列出来供用户选择。
import TRTCCloud from 'trtc-electron-sdk';
const rtcCloud = new TRTCCloud();
// https://web.sdk.qcloud.com/trtc/electron/doc/en-us/trtc_electron_sdk/TRTCCloud.html#getScreenCaptureSources
const screenList = rtcCloud.getScreenCaptureSources();


步骤2:开始屏幕分享

可以通过调用 selectScreenCaptureTarget 选取分享目标。
选取分享目标后,使用 startScreenCapture 接口可以启动屏幕分享。
分享过程中,您依然可以通过调用 selectScreenCaptureTarget 更换分享目标。
pauseScreenCapturestopScreenCapture 的区别在于 pause 会停止屏幕内容的采集,并以暂停那一刻的画面垫片,所以在远端看到一直都是最后一帧画面,直到 resume。
import TRTCCloud, {
Rect, TRTCScreenCaptureProperty, TRTCVideoStreamType, TRTCVideoEncParam,
TRTCVideoResolution, TRTCVideoResolutionMode
} from 'trtc-electron-sdk';
const rtcCloud = new TRTCCloud();
// https://web.sdk.qcloud.com/trtc/electron/doc/zh-cn/trtc_electron_sdk/TRTCCloud.html#getScreenCaptureSources
const screenList = rtcCloud.getScreenCaptureSources();
// https://web.sdk.qcloud.com/trtc/electron/doc/zh-cn/trtc_electron_sdk/Rect.html
const captureRect = new Rect(0, 0, 0, 0);
// https://web.sdk.qcloud.com/trtc/electron/doc/zh-cn/trtc_electron_sdk/TRTCScreenCaptureProperty.html
const property = new TRTCScreenCaptureProperty(
true, true, true, 0, 0, false
);
if (screenList.length > 0) {
rtcCloud.selectScreenCaptureTarget(screenList[0], captureRect, property)
}

const screenshareDom = document.querySelector('screen-dom');
// https://web.sdk.qcloud.com/trtc/electron/doc/zh-cn/trtc_electron_sdk/TRTCVideoEncParam.html
const encParam = new TRTCVideoEncParam(
TRTCVideoResolution.TRTCVideoResolution_1920_1080,
TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape,
15,
2000,
0,
false
);
rtcCloud.startScreenCapture(screenshareDom, TRTCVideoStreamType.TRTCVideoStreamTypeSub, encParam);


步骤3:设定画面质量

您可以通过 startScreenCapture 接口的第三个参数 encParam 设定屏幕分享的画面质量(参见 步骤2),包括分辨率、码率和帧率,我们提供如下建议参考值:
清晰度级别
分辨率
帧率
码率
超高清(HD+)
1920 × 1080
10
2000kbps
高清(HD)
1280 × 720
10
600kbps
标清(SD)
960 × 720
10
400kbps


步骤4:观看屏幕分享

当房间里有一个用户启动了屏幕分享,会通过辅流进行分享。房间里的其他用户会通过 onUserSubStreamAvailable 事件获得这个通知。 希望观看屏幕分享的用户可以通过 startRemoteView 接口来启动渲染远端用户辅流画面。
import TRTCCloud, {
TRTCVideoStreamType
} from 'trtc-electron-sdk';
const rtcCloud = new TRTCCloud();

const remoteDom = document.querySelector('.remote-user');
function onUserSubStreamAvailable(userId, available) {
if (available === 1) {
rtcCloud.startRemoteView(userId, remoteDom, TRTCVideoStreamType.TRTCVideoStreamTypeSub);
} else {
rtcCloud.stopRemoteView(userId, TRTCVideoStreamType.TRTCVideoStreamTypeSub);
}
}

rtcCloud.on('onUserSubStreamAvailable', onUserSubStreamAvailable);

常见问题

1. 一个房间里可以同时有多路屏幕分享吗?

目前一个 TRTC 音视频房间只能有一路屏幕分享。

2. 指定窗口分享(SourceTypeWindow),当窗口大小变化时,视频流的分辨率会不会也跟着变化?

默认情况下,SDK 内部会自动根据分享的窗口大小进行编码参数的调整。 如需固定分辨率,需调用 setSubStreamEncoderParam 接口设置屏幕分享的编码参数,或在调用 startScreenCapture 时指定对应的编码参数。