实时音视频
实时音视频
文档指南
请输入
- 文档首页
实时音视频实时音视频开发指南屏幕共享Electron 架构下通过 Web SDK 实现屏幕共享
复制全文
下载 pdfElectron 架构下通过 Web SDK 实现屏幕共享
文档反馈
问问助手用户共享屏幕或窗口时，可以将屏幕内容以视频方式发送给其他用户，提高沟通效率。本文介绍在 Electron 框架下，使用 Web SDK 实现屏幕共享功能。
适用场景
- 会议主持人共享 ppt、文档或网页。
- 老师给学生共享课件、笔记或演示操作步骤。
前提条件
- 你已经集成 Web SDK V4.63，实现了基本的音视频通话。
- 操作系统版本要求如下：
- Windows 7 及以上版本
- macOS 10.8 及以上版本
#{style="margin: auto"}#
配置 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));
【可选】设置屏幕流参数
若设置的参数浏览器不支持，RTC SDK 按照浏览器支持的参数范围进行采集和编码，并通过回调 onLocalVideoSizeChanged 通知实际参数。
setScreenEncoderConfig(config:{
width: number,
height: number,
frameRate: number,
maxKbps:number,
}
)
不同场景下建议的参数设置如下：
场景 | 分辨率（宽 x 高） | 帧率(fps) | 码率(kbps) |
共享 PPT、Word 等静态文本。 | 1920 x 1080 | 5 | 2000 |
共享动态内容，如视频、动画、游戏。 | 1920 x 1080 | 30 | 4000 |
在开启屏幕采集之后，参数只能下调，不能动态调整至更高参数。若要上调，则需重新采集。
开始采集和分享屏幕流
说明：仅支持在 Windows 上共享音频，且音频为设备音频，不支持共享指定应用的音频。
自定义弹窗
你可以自行绘制选择共享屏幕源的弹窗，参考以下步骤。
- 调用 getElectronScreenSources 获取共享屏幕源信息列表 ElectronDesktopCapturerSource[]。
- 根据共享源列表信息，包括共享源名称和缩略图，用 HTML 和 CSS 绘制选择弹窗。
- 记录用户在弹窗中选择的 sourceId，并在调用 startScreenCapture 开始屏幕采集时传入。
- 调用 publishScreen 开始发布屏幕流。
默认弹窗
你可以使用 SDK 提供的共享屏幕源的默认选择弹窗，参考以下步骤。
- 调用 startScreenCapture开始屏幕采集但不指定 sourceId，用户可以通过默认弹窗选择共享屏幕源。
- 调用 publishScreen 发布屏幕流。
await IRTCEngine.startScreenCapture({
systemAudio: "include", // 共享屏幕时共享音频，只支持在 Windows 上共享音频。
sourceId: "", // 不填写 sourceId 时，默认弹窗将提示用户选择共享屏幕源。
});
await IRTCEngine.publishScreen(MediaType.AUDIO_AND_VIDEO);
- 停止发布屏幕流
await IRTCEngine.unpublishScreen(MediaType.AUDIO_AND_VIDEO);
订阅和播放屏幕流
- 监听到 onUserPublishScreen 事件后，调用 subscribeScreen 订阅屏幕流。在收到远端音视频流对象信息后，将传入 handleUserPublishScreen。
- 监听到 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,
})
})；
最近更新时间：2026.08.04 14:52:23
这个页面对您有帮助吗？
有用
有用
无用
无用