Electron 端屏幕共享

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

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

适用场景

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

前提条件

操作系统版本要求如下：

• 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 房间，详见构建基础应用。

获取共享对象列表和信息

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

1. 调用 getScreenCaptureSourceList 接口获取共享对象列表：

   • 应用窗体：kScreenCaptureSourceTypeWindow

   • 显示器屏幕：kScreenCaptureSourceTypeScreen。 Windows 端的虚拟桌面的 source_id 为 -1。

2. 调用 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;
    }
  }

开启设备屏幕采集

1. （可选）设置屏幕视频流的采集参数
   调用 setScreenVideoEncoderConfig 设置屏幕视频流的采集帧率和编码分辨率。

   • 当共享对象原始分辨率超过目标宽、高时，将保持视频帧宽高比，缩小到目标宽、高。
   • 当共享对象分辨率小于目标宽高时，将保持原始宽高，不进行“放大”。

2. 调用 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 关闭屏幕共享。

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

1. 在页面中添加渲染窗口

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

2. 推荐进房时开启自动订阅，无需进行手动订阅。屏幕视频流正常解码后收到 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);

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