如何在 JavaScript 中使用 getDisplayMedia 在屏幕捕获中隐藏鼠标光标？

Question

我试图在通过 JavaScript 的

getDisplayMedia()

启动屏幕捕获会话期间隐藏鼠标光标。目标是录制屏幕而不在最终视频输出中显示鼠标光标。尽管在 getDisplayMedia 选项中将光标选项设置为“从不”，光标仍然出现在录制中。这是我尝试过的：

async function startScreenRecording() {
  try {
    const displayMediaOptions = {
      video: {
        cursor: "never"
      },
      audio: true
    };
console.log(navigator.mediaDevices.getSupportedConstraints());
  if (navigator.mediaDevices.getSupportedConstraints().cursor) {
    console.log("Cursor constraint is supported.");
} else {
    console.log("Cursor constraint is not supported.");
}
    console.log("Display media options:", displayMediaOptions);
    const displayStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    console.log("Display stream:", displayStream);

    handleMediaStream(displayStream);
  } catch ( error ) {
    console.error("Error capturing media.", error);
  }
}

function handleMediaStream(stream) {
  // Handling the media stream (omitted for brevity)
}

document.addEventListener("DOMContentLoaded", () => {
  startScreenRecording();
});

现在，当我记录

navigator.mediaDevices.getSupportedConstraints()

时，不再支持光标，即使 MDN 文档仍然有它这里。

我尝试使用以下代码来隐藏光标

document.addEventListener('DOMContentLoaded', () => {
    const bodyElement = document.querySelector('body');
    if (bodyElement) {
        bodyElement.style.cursor = 'none';
    }
});```
But this solution removes the cursor while my screen is being captured. 

Any alternative methods or workarounds to effectively hide the cursor during screen captures?

Answer 1

也许，这个文档会回答你的问题。