通过 Electron SDK 实现 PC 端屏幕共享--实时音视频-火山引擎

文档中心

立即注册

实时音视频

请输入

屏幕共享

通过 Electron SDK 实现 PC 端屏幕共享

在实时通信中，如果你希望用户可以分享本端设备的屏幕和设备播放的音频，可以使用 RTC 内建的屏幕采集功能，也可以自行实现屏幕采集逻辑（自定义采集），并通过屏幕共享功能，与远端用户共享。

仅可见的用户可以发布屏幕流。

适用场景

你可以在多种行业的多种场景下使用到屏幕共享功能：

行业	场景
在线教育	老师共享屏幕给学生上课；美术老师共享屏幕给学生教画画。
游戏直播	主播共享屏幕给观众，展现自己的游戏画面。
互动直播	主播共享自己的屏幕和观众互动。
视频会议	会议成员共享屏幕观看 PPT 或者文档。

前提条件

操作系统版本要求如下：

Windows 7 及以上版本
MacOS 10.8 及以上版本

你已经集成了 Electron RTC SDK，实现了基本的音视频通话。

功能实现

步骤一：申请麦克风和摄像头权限

Mac OS 10.14 以后版本，需要申请麦克风和摄像头权限。在主进程中，调用 Electron 的 systemPreferences.askForMediaAccess() 接口，申请摄像头、麦克风权限。参考代码如下。

注意：即使你的业务不需要摄像头和麦克风只包含屏幕录制，也需要申请麦克风和摄像头权限才能获得屏幕录制权限。

async function checkAndApplyDeviceAccessPrivilege() {
  // 检查并申请摄像头权限
  const cameraPrivilege = systemPreferences.getMediaAccessStatus('camera');
  console.log(`checkAndApplyDeviceAccessPrivilege before apply cameraPrivilege: ${cameraPrivilege}`);
  if (cameraPrivilege !== 'granted') {
    await systemPreferences.askForMediaAccess('camera');
  }
  // 检查并申请麦克风权限
  const micPrivilege = systemPreferences.getMediaAccessStatus('microphone');
  console.log(`checkAndApplyDeviceAccessPrivilege before apply micPrivilege: ${micPrivilege}`);
  if (micPrivilege !== 'granted') {
    await systemPreferences.askForMediaAccess('microphone');
  }

步骤二：采集屏幕音视频流

集成 Electron 端 RTC SDK，创建引擎并加入 RTC 房间，详见构建基础应用。

获取共享对象列表和信息

调用以下接口，以便用户在发起共享前，看到可以共享的屏幕/窗口的缩略图等信息，并指定共享对象。

调用 getScreenCaptureSourceList 接口获取共享对象列表：
- 应用窗体：kScreenCaptureSourceTypeWindow
- 显示器屏幕：kScreenCaptureSourceTypeScreen。 Windows 端的虚拟桌面的 source_id 为 -1。
调用 getThumbnail 接口获取共享对象缩略图，并支持设置宽、高。
如果采集源为应用窗体，还可以通过 getWindowAppIcon 获取应用图标。
- 缩略图尺寸：保持采集对象本身的宽高比不变，将缩略图缩放到指定范围内的最大宽高。
- 应用图标尺寸：将应用图标按照指定的边长进行缩放，始终为正方形。

let list = vEngine.getScreenCaptureSourceList();
	// 获取第一个屏幕
	for (let i = 0; i < list.length; i++) {
  	let item = list[i];
    console.log('getScreenCaptureSourceList item: ' + item)
    if (item.type === 2) {
    	let ret = vEngine.getThumbnail(item.type, item.source_id, 1920, 1080);
      break;
    }
  }

开启设备屏幕采集

（可选）设置屏幕视频流的采集参数
调用 setScreenVideoEncoderConfig 设置屏幕视频流的采集帧率和编码分辨率。
- 当共享对象原始分辨率超过目标宽、高时，将保持视频帧宽高比，缩小到目标宽、高。
- 当共享对象分辨率小于目标宽高时，将保持原始宽高，不进行“放大”。
调用 startScreenVideoCapture 开启屏幕采集
ScreenCaptureParameters 对象中的 HighlightConfig 参数为共享的屏幕/窗口添加边框标志，用来向用户提示此窗口正在被共享。RTC 建议在屏幕共享时排除应用程序自身窗口。你可以通过设置 filter_config 参数排除指定窗口。

开启设备音频采集

设备音频默认为一路单独的音频流完成处理和发布。调用 setScreenAudioStreamIndex 可以将设备音频混入到主流的音频中。

Windows：调用 startScreenAudioCapture 开启屏幕音频采集，无需传入参数。
Mac：
1. 安装虚拟声卡。推荐安装由 RTC 提供的 VeRTCVirtualSoundCard。
2. 使用音频播放设备枚举接口获取虚拟声卡设备 ID。
3. 调用 startScreenAudioCapture 传入虚拟声卡设备 id，开启设备音频采集。

更新屏幕共享配置

开始发布屏幕流后，可以通过以下接口更新屏幕采集设置。

调用 updateScreenCaptureRegion 更新采集区域。如果要更新共享的屏幕/窗口，你需要重新发起共享。
调用 updateScreenCaptureHighlightConfig 更新边框高亮设置。
调用 updateScreenCaptureFilterConfig 更新需要过滤的窗口。
调用 updateScreenCaptureMouseCursor 更新对鼠标的处理设置。

步骤三：发布/停止发布屏幕共享流

开始屏幕音视频采集后，调用 publishScreen 发布屏幕共享流。
发布方式有三种：只发布音频、只发布视频、同时发布音视频。

调用一次 publishScreen 同时发布音视频与多次调用该接口，分别只发布音频、只发布视频结果是相同的。

调用 unpublishScreen 关闭屏幕共享。

步骤四：设置屏幕共享视图

在页面中添加渲染窗口

<div style="width: 12px;"></div>
      <div id="idRemoteScreenContainer" style="width: 240px; height: 180px; background-color: lightblue;">
      </div>

推荐进房时开启自动订阅，无需进行手动订阅。屏幕视频流正常解码后收到 onFirstRemoteVideoFrameRendered 首帧解码回调，通过 setupRemoteScreen 将屏幕视频渲染出来。

手动订阅：远端用户发布屏幕音视频流后，RTC 通过 onUserPublishScreen 通知本地用户。通过 subscribeScreen 手动订阅屏幕音视频流。

if (stream_index == 1) {
        rtcVideo.removeRemoteScreen(userId: string)
        rtcVideo.setupRemoteScreen(userId: string, view: HTMLDivElement, renderOptions?: RenderOptions)
    }

在主进程脚本中添加如下代码：

idRemoteScreenContainer = document.getElementById('idRemoteScreenContainer');
// 设置远端屏幕视频设置渲染视图
rtcVideo.setupRemoteScreen(idRemoteScreenContainer);

至此，你完成了屏幕共享。

最近更新时间：2025.10.20 14:23:30

这个页面对您有帮助吗？

有用

无用