在 Electron 中使用 LiveKit 实现屏幕共享

我们在 Electron 开发的应用中，使用 LiveKit 实现的音视频通话，这里面涉及到了屏幕共享的功能。

1. 判断是否有屏幕贡献的权限 #

我们已经在 在 Electron 应用中，如何获取 Mac 的摄像头和麦克风权限 的文章中，了解了如何配置和获取摄像头和麦克风的权限。共享屏幕的权限，也大差不差。

const handleCheckScreenShare = async () => {
  const access = await window.electronAPI?.ipcInvoke("getMediaAccess", "screen");

  if (!access) {
    message.warning("暂无共享屏幕的权限，请前往设置中打开");
    window.electronAPI?.ipcInvoke("openSystemPreferences", "Privacy_ScreenCapture");
    return;
  }
};

2. 获取所有的屏幕和应用列表 #

在共享屏幕时，需要获取到当前所有的屏幕和打开的应用的列表，让用户选择他想要共享哪个。

ipcMain.handle("getScreenSource", async () => {
  const sources = await desktopCapturer.getSources({ types: ["screen", "window"], fetchWindowIcons: true });

  // 格式化返回结果
  return sources.map((source) => ({
    id: source.id, // 源唯一标识（用于后续共享）
    name: source.name, // 窗口/屏幕名称（如"Chrome"、"桌面 1"）
    thumbnail: source.thumbnail.toDataURL(), // 缩略图（base64格式）
    displayId: source.display_id, // 屏幕ID（仅屏幕源有）
    icon: source.appIcon?.toDataURL(), // 应用图标（base64格式）
  }));
});

然后在前端页面中展示这些源，并让用户可以选择一个源进行共享。

3. 启用屏幕共享 #

用户在第 2 步中选择了一个源后，就可以开始屏幕共享了。

const handleScreenShare = async (data: { id: string }) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: data.id, // 屏幕共享的 id
      },
    },
  });
  const track = stream.getVideoTracks()[0];
  const resp = await room.localParticipant.publishTrack(track, {
    source: Track.Source.ScreenShare,
  });
  console.log(resp);
};

这样就可以实现屏幕共享拉。

4. 总结 #

在实现的过程中，有一个比较大的误区，让我走了点弯路。我通过询问 AI 得到如何实现屏幕共享的代码（navigator.mediaDevices.getUserMedia）。但在 typescript 中，却提示没有 mandatory 这个属性。导致我以为上面的代码是错的，但实际上这段代码是可以正常使用的。目前还不知道为什么 typescript 会提示没有 mandatory 这个属性。