在实时通信中，如果你希望用户可以分享本端设备的屏幕和设备播放的音频，可以使用 RTC 内建的屏幕采集功能，也可以自行实现屏幕采集逻辑（自定义采集），并通过屏幕共享功能，与远端用户共享。 > 仅可见的用户可以发布屏幕流。 ## 适用场景你可以在多种行业的多种场景下使用到屏幕共享功能： |行业 |场景 | |---|---| |在线教育 |老师共享屏幕给学生上课；美术老师共享屏幕给学生教画画。 | |游戏直播 |主播共享屏幕给观众，展现自己的游戏画面。 | |互动直播 |主播共享自己的屏幕和观众互动。 | |视频会议 |会议成员共享屏幕观看 PPT 或者文档。 | ## 前提条件操作系统版本要求如下： * Windows 7 及以上版本 * MacOS 10.8 及以上版本你已经集成了 Electron RTC SDK，实现了[基本的音视频通话](https://docs.volcengine.com/docs/6348/108795)。 ## 功能实现 ### 步骤一：申请麦克风和摄像头权限 Mac OS 10.14 以后版本，需要申请麦克风和摄像头权限。在主进程中，调用 Electron 的 [systemPreferences.askForMediaAccess()](https://www.electronjs.org/docs/latest/api/system-preferences) 接口，申请摄像头、麦克风权限。参考代码如下。 > 注意：即使你的业务不需要摄像头和麦克风只包含屏幕录制，也需要申请麦克风和摄像头权限才能获得屏幕录制权限。 ```javascript 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 房间，详见[构建基础应用](https://docs.volcengine.com/docs/6348/108795)。 #### 获取共享对象列表和信息调用以下接口，以便用户在发起共享前，看到可以共享的屏幕/窗口的缩略图等信息，并指定共享对象。 1. 调用 [getScreenCaptureSourceList](https://docs.volcengine.com/docs/6348/85532#rtcengine-getscreencapturesourcelist) 接口获取共享对象列表： * 应用窗体：`kScreenCaptureSourceTypeWindow` * 显示器屏幕：`kScreenCaptureSourceTypeScreen`。 Windows 端的虚拟桌面的 `source_id` 为 `-1`。 2. 调用 [getThumbnail](https://docs.volcengine.com/docs/6348/85532#rtcengine-getthumbnail) 接口获取共享对象缩略图，并支持设置宽、高。如果采集源为应用窗体，还可以通过 [getWindowAppIcon](https://docs.volcengine.com/docs/6348/85532#rtcengine-getwindowappicon) 获取应用图标。 * 缩略图尺寸：保持采集对象本身的宽高比不变，将缩略图缩放到指定范围内的最大宽高。 * 应用图标尺寸：将应用图标按照指定的边长进行缩放，始终为正方形。 ```javaScript 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. （可选）设置屏幕视频流的编码参数调用 [setVideoEncoderConfig](https://docs.volcengine.com/docs/6348/85532#rtcengine-setvideoencoderconfig) 设置屏幕视频流的编码分辨率、帧率和码率。Electron SDK 3.60.1 中，屏幕流和摄像头流共用该接口。 > * 当共享对象原始分辨率超过目标宽、高时，将保持视频帧宽高比，缩小到目标宽、高。 > * 当共享对象分辨率小于目标宽高时，将保持原始宽高，不进行“放大”。 2. 调用 [startScreenVideoCapture](https://docs.volcengine.com/docs/6348/85532#rtcengine-startscreenvideocapture) 开启屏幕采集 > [ScreenCaptureParameters](https://docs.volcengine.com/docs/6348/85535#screencaptureparameters) 对象中的 [HighlightConfig](https://docs.volcengine.com/docs/6348/85535#highlightconfig) 参数为共享的屏幕/窗口添加边框标志，用来向用户提示此窗口正在被共享。RTC 建议在屏幕共享时排除应用程序自身窗口。你可以通过设置 `filter_config` 参数排除指定窗口。 #### 开启设备音频采集 > 屏幕音频与麦克风音频共用音频发布接口。你可以调用 [setScreenCaptureVolume](https://docs.volcengine.com/docs/6348/85532#rtcengine-setscreencapturevolume) 调节屏幕音频采集音量，或调用 [muteScreenAudioCapture](https://docs.volcengine.com/docs/6348/85532#rtcengine-mutescreenaudiocapture) 暂停、恢复屏幕音频采集。 * Windows：调用 [startScreenAudioCapture](https://docs.volcengine.com/docs/6348/85532#rtcengine-startscreenaudiocapture) 开启屏幕音频采集，无需传入参数。 * Mac： 1. 安装虚拟声卡。推荐安装由 RTC 提供的 [VeRTCVirtualSoundCard](https://docs.volcengine.com/docs/6348/125703)。 2. 使用音频播放设备枚举接口获取虚拟声卡设备 ID。 3. 调用 [startScreenAudioCapture](https://docs.volcengine.com/docs/6348/85532#rtcengine-startscreenaudiocapture) 传入虚拟声卡设备 ID，开启设备音频采集。 #### 更新屏幕共享配置开始发布屏幕流后，可以通过以下接口更新屏幕采集设置。 * 调用 [updateScreenCaptureRegion](https://docs.volcengine.com/docs/6348/85532#rtcengine-updatescreencaptureregion) 更新采集区域。如果要更新共享的屏幕或窗口，需要重新发起共享。 * 调用 [updateScreenCaptureHighlightConfig](https://docs.volcengine.com/docs/6348/85532#rtcengine-updatescreencapturehighlightconfig) 更新边框高亮设置。 * 调用 [updateScreenCaptureFilterConfig](https://docs.volcengine.com/docs/6348/85532#rtcengine-updatescreencapturefilterconfig) 更新需要过滤的窗口。 * 调用 [updateScreenCaptureMouseCursor](https://docs.volcengine.com/docs/6348/85532#rtcengine-updatescreencapturemousecursor) 更新对鼠标的处理设置。 ### 步骤三：发布/停止发布屏幕共享流开始屏幕音视频采集后，屏幕流与摄像头、麦克风流共用发布接口： * 调用 [publishStreamVideo](https://docs.volcengine.com/docs/6348/85532#rtcroom-publishstreamvideo)，将 `publish` 设为 `true`，发布屏幕视频流；设为 `false` 时停止发布。 * 调用 [publishStreamAudio](https://docs.volcengine.com/docs/6348/85532#rtcroom-publishstreamaudio)，将 `publish` 设为 `true`，发布屏幕音频流；设为 `false` 时停止发布。 ### 步骤四：设置屏幕共享视图 1. 在页面中添加渲染窗口 ```html

``` 2. 推荐进房时开启自动订阅。远端用户发布屏幕流后，本地会收到 [onUserPublishStreamVideo](https://docs.volcengine.com/docs/6348/85533#rtcroomcallback-onuserpublishstreamvideo) 或 [onUserPublishStreamAudio](https://docs.volcengine.com/docs/6348/85533#rtcroomcallback-onuserpublishstreamaudio) 回调。通过回调参数中的 `StreamInfo.is_screen` 判断是否为屏幕流，并保存 `stream_id`。如果使用手动订阅，请分别调用 [subscribeStreamVideo](https://docs.volcengine.com/docs/6348/85532#rtcroom-subscribestreamvideo) 或 [subscribeStreamAudio](https://docs.volcengine.com/docs/6348/85532#rtcroom-subscribestreamaudio)，传入屏幕流的 `stream_id` 和 `true`。屏幕视频流首帧解码后，调用 [setupRemoteVideo](https://docs.volcengine.com/docs/6348/85532#rtcengine-setupremotevideo) 将该流绑定到视图。 ```javaScript rtcEngine.on('onFirstRemoteVideoFrameDecoded', (streamId, streamInfo) => { if (streamInfo.is_screen) { rtcEngine.setupRemoteVideo(streamId, idRemoteScreenContainer); } }); ``` 在主进程脚本中添加如下代码： ```javaScript const idRemoteScreenContainer = document.getElementById('idRemoteScreenContainer'); ``` 至此，你完成了屏幕共享。

实时音视频