electron中getDisplayMedia和webrtc，获取桌面数据流如何不显示鼠标指针

在Electron中，`getDisplayMedia` 和 WebRTC (Web实时通讯) 结合使用可以让你获取用户的桌面屏幕共享作为视频流。要实现获取桌面数据流而不显示鼠标指针，你需要在创建WebRTC `getUserMedia`请求时指定一些特定选项。以下是一个简化的步骤：

1. **导入所需模块**：

   const {.desktopCapturer, BrowserWindow} = require('electron');
   const mediaStreamConstraints = {
     video: {
       mandatory: {
         chromeMediaSource: 'desktop',
         chromeMediaSourceId: '',
       },
       optional: [
         {googDesiredFrameRate: 5},
         {googLeakyBucket: true}, // 控制缓冲区溢出
       ],
     },
   };

2. **处理桌面媒体请求**：

   async function getDesktopMedia() {
     try {
       const devices = await desktopCapturer.getDevices();
       if (!devices.length) {
         throw new Error('No desktop capture device found.');
       }

       // 使用第一个设备
       const videoDevice = devices[0];

       const stream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
       stream.getTracks().forEach((track) => track.applyConstraints({audio: false, screen: true}));

       return stream;
     } catch (error) {
       console.error('Error getting desktop media:', error);
     }
   }

注意这里将音频设为了false，并添加了`screen: true`约束以获取屏幕共享。同时，通过`applyConstraints`函数隐藏了鼠标指针。

3. **应用到实际场景**：
将这个`getDesktopMedia`函数用于 Electron 的 `BrowserWindow` 或者其他需要展示视频的地方。

const win = new BrowserWindow();
win.webContents.session.on('certificate-error', (event, webContents, url, certificate, errorCode, callback) => {
  callback(true); // 确定忽略证书错误
});

// 获取并显示桌面数据流
getDesktopMedia().then((stream) => {
  const videoElement = document.createElement('video');
  videoElement.srcObject = stream;
  win.webContents.insertCSS(`
    video::-webkit-media-controls-mouse-cursor {
      display: none !important;
    }
  `);
  win.setIgnoreMouseEvents(true); // 隐藏整个窗口的鼠标事件
  win.webContents.append(videoElement);
});