How to hide the mouse cursor in screen capture using getDisplayMedia in JavaScript?

I’m trying to hide the mouse cursor during a screen capture session initiated via JavaScript’s getDisplayMedia(). The goal is to record the screen without showing the mouse cursor in the final video output. Despite setting the cursor option to “never” in the getDisplayMedia options, the cursor still appears in the recording. Here’s what I’ve tried:

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();
});

Now cursor is no longer supported when I log the navigator.mediaDevices.getSupportedConstraints() even though the MDN docs still have it here.

I tried using the following code to hide the cursor

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?