实时音视频
实时音视频
文档指南
请输入
- 文档首页
实时音视频实时音视频开发指南屏幕共享通过 Electron SDK 实现 PC 端屏幕共享
复制全文
下载 pdf通过 Electron SDK 实现 PC 端屏幕共享
文档反馈
问问助手在实时通信中，如果你希望用户可以分享本端设备的屏幕和设备播放的音频，可以使用 RTC 内建的屏幕采集功能，也可以自行实现屏幕采集逻辑（自定义采集），并通过屏幕共享功能，与远端用户共享。
仅可见的用户可以发布屏幕流。
适用场景
你可以在多种行业的多种场景下使用到屏幕共享功能：
行业 | 场景 |
在线教育 | 老师共享屏幕给学生上课；美术老师共享屏幕给学生教画画。 |
游戏直播 | 主播共享屏幕给观众，展现自己的游戏画面。 |
互动直播 | 主播共享自己的屏幕和观众互动。 |
视频会议 | 会议成员共享屏幕观看 PPT 或者文档。 |
前提条件
操作系统版本要求如下：
- Windows 7 及以上版本
- MacOS 10.8 及以上版本
功能实现
步骤一：申请麦克风和摄像头权限
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');
}
步骤二：采集屏幕音视频流
获取共享对象列表和信息
调用以下接口，以便用户在发起共享前，看到可以共享的屏幕/窗口的缩略图等信息，并指定共享对象。
- 调用 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;
}
}
开启设备屏幕采集
- （可选）设置屏幕视频流的编码参数
- 调用 setVideoEncoderConfig 设置屏幕视频流的编码分辨率、帧率和码率。Electron SDK 3.60.1 中，屏幕流和摄像头流共用该接口。
- 当共享对象原始分辨率超过目标宽、高时，将保持视频帧宽高比，缩小到目标宽、高。
- 当共享对象分辨率小于目标宽高时，将保持原始宽高，不进行“放大”。
- 调用 startScreenVideoCapture 开启屏幕采集
ScreenCaptureParameters 对象中的 HighlightConfig 参数为共享的屏幕/窗口添加边框标志，用来向用户提示此窗口正在被共享。RTC 建议在屏幕共享时排除应用程序自身窗口。你可以通过设置 filter_config 参数排除指定窗口。
开启设备音频采集
- Windows：调用 startScreenAudioCapture 开启屏幕音频采集，无需传入参数。
- Mac：
- 安装虚拟声卡。推荐安装由 RTC 提供的 VeRTCVirtualSoundCard。
- 使用音频播放设备枚举接口获取虚拟声卡设备 ID。
- 调用 startScreenAudioCapture 传入虚拟声卡设备 ID，开启设备音频采集。
更新屏幕共享配置
开始发布屏幕流后，可以通过以下接口更新屏幕采集设置。
- 调用 updateScreenCaptureRegion 更新采集区域。如果要更新共享的屏幕或窗口，需要重新发起共享。
- 调用 updateScreenCaptureHighlightConfig 更新边框高亮设置。
- 调用 updateScreenCaptureFilterConfig 更新需要过滤的窗口。
- 调用 updateScreenCaptureMouseCursor 更新对鼠标的处理设置。
步骤三：发布/停止发布屏幕共享流
开始屏幕音视频采集后，屏幕流与摄像头、麦克风流共用发布接口：
- 调用 publishStreamVideo，将 publish 设为 true，发布屏幕视频流；设为 false 时停止发布。
- 调用 publishStreamAudio，将 publish 设为 true，发布屏幕音频流；设为 false 时停止发布。
步骤四：设置屏幕共享视图
- 在页面中添加渲染窗口
<div style="width: 12px;"></div>
<div id="idRemoteScreenContainer" style="width: 240px; height: 180px; background-color: lightblue;">
</div>
- 推荐进房时开启自动订阅。远端用户发布屏幕流后，本地会收到 onUserPublishStreamVideo 或 onUserPublishStreamAudio 回调。通过回调参数中的 StreamInfo.is_screen 判断是否为屏幕流，并保存 stream_id。
- 如果使用手动订阅，请分别调用 subscribeStreamVideo 或 subscribeStreamAudio，传入屏幕流的 stream_id 和 true。屏幕视频流首帧解码后，调用 setupRemoteVideo 将该流绑定到视图。
rtcEngine.on('onFirstRemoteVideoFrameDecoded', (streamId, streamInfo) => {
if (streamInfo.is_screen) {
rtcEngine.setupRemoteVideo(streamId, idRemoteScreenContainer);
}
});
在主进程脚本中添加如下代码：
const idRemoteScreenContainer = document.getElementById('idRemoteScreenContainer');
至此，你完成了屏幕共享。
最近更新时间：2026.10.10 20:08:48
这个页面对您有帮助吗？
有用
有用
无用
无用