用户共享屏幕或窗口时，可以将屏幕内容以视频方式发送给其他用户，提高沟通效率。本文介绍在 Electron 框架下，使用 Web SDK 实现屏幕共享功能。

适用场景

• 会议主持人共享 ppt、文档或网页。
• 老师给学生共享课件、笔记或演示操作步骤。

前提条件

• 你已经集成 Web SDK V4.63，实现了基本的音视频通话。
• 操作系统版本要求如下：
  • Windows 7 及以上版本
  • macOS 10.8 及以上版本

配置 ELectron 环境选项

• 关闭 contextIsolation 选项。

  new BrowserWindow({
      webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      },
  });
  

• 如果你使用的 Electron 版本高于 17，为了确保能获取到屏幕共享源，必须在主进程文件中增加以下代码：

  const {  ipcMain, desktopCapturer } = require("electron");
  
  ipcMain.handle("DESKTOP_CAPTURER_GET_SOURCES", (event, opts) => desktopCapturer.getSources(opts));
  

【可选】设置屏幕流参数

创建引擎后，调用 setScreenEncoderConfig 设置屏幕流参数。若采集前未设置参数，将使用默认参数：分辨率 1080P；帧率 15fps；码率 3000kbps。
若设置的参数浏览器不支持，RTC SDK 按照浏览器支持的参数范围进行采集和编码，并通过回调 onLocalVideoSizeChanged 通知实际参数。

setScreenEncoderConfig(config:{ 
   width: number,
   height: number,
   frameRate: number,
   maxKbps:number,
   }
)

不同场景下建议的参数设置如下：

在开启屏幕采集之后，参数只能下调，不能动态调整至更高参数。若要上调，则需重新采集。

开始采集和分享屏幕流

说明：仅支持在 Windows 上共享音频，且音频为设备音频，不支持共享指定应用的音频。

自定义弹窗

你可以自行绘制选择共享屏幕源的弹窗，参考以下步骤。

1. 调用 getElectronScreenSources 获取共享屏幕源信息列表 ElectronDesktopCapturerSource[]。
2. 根据共享源列表信息，包括共享源名称和缩略图，用 HTML 和 CSS 绘制选择弹窗。
3. 记录用户在弹窗中选择的 sourceId，并在调用 startScreenCapture 开始屏幕采集时传入。
4. 调用 publishScreen 开始发布屏幕流。

默认弹窗

你可以使用 SDK 提供的共享屏幕源的默认选择弹窗，参考以下步骤。

1. 调用 startScreenCapture开始屏幕采集但不指定 sourceId，用户可以通过默认弹窗选择共享屏幕源。
2. 调用 publishScreen 发布屏幕流。

await IRTCEngine.startScreenCapture({
        systemAudio: "include", // 共享屏幕时共享音频，只支持在 Windows 上共享音频。
        sourceId: "", // 不填写 sourceId 时，默认弹窗将提示用户选择共享屏幕源。
});

await IRTCEngine.publishScreen(MediaType.AUDIO_AND_VIDEO);

3. 停止发布屏幕流

await IRTCEngine.unpublishScreen(MediaType.AUDIO_AND_VIDEO);

订阅和播放屏幕流

1. 监听到 onUserPublishScreen 事件后，调用 subscribeScreen 订阅屏幕流。在收到远端音视频流对象信息后，将传入 handleUserPublishScreen。

2. 监听到 onUserPublishScreen 后，调用 setRemoteVideoPlayer 设置远端音视频流播放器。

当主持人共享屏幕时，摄像头流将切换为小窗展示，因此，建议订阅端将主持人的摄像头流设置为较小分辨率的视频流。具体参看推送多路流。

IRTCEngine.on(IRTCEngine.events.onUserPublishScreen, async ({ userId, mediaType }) =>{
// 收到 `VERTC.events.onUserPublishScreen` 事件后订阅远端屏幕流
  await IRTCEngine.subscribeScreen(userId, mediaType)
  
  
  const player = $(`
    <div id="player-wrapper-${userId}" class="player-wrapper re-player">
      <p class="player-name">${userId}</p>
    </div>
  `);
  
  $('#player-list').append(player);
  
  IRTCEngine.setRemoteVideoPlayer(VERTC.StreamIndex.STREAM_INDEX_SCREEN,{
        renderDom: `player-wrapper-${userId}`,
        userId,
        renderMode: VERTC.VideoRenderMode.RENDER_MODE_HIDDEN,
  })  
})；