Is it possible to disable the cursor from being recorded with getDisplayMedia()

Question

I am recording my browser window using MediaStream and MediaRecorder.

But need to disable the mouse cursor from being recorded, so when I create my video track, i use the following code:

stream['input'] = await navigator.mediaDevices.getDisplayMedia({
    audio: true,
    video: {
    cursor: 'never',
    frameRate: 40,
}
});
console.log( stream['input'].getVideoTracks()[0].getSettings() );

However chrome, opera and edge console displays:

aspectRatio: 1.7777777777777777
cursor: "motion"
deviceId: "window:200730:1"
displaySurface: "window"
frameRate: 40
height: 1080
logicalSurface: true
resizeMode: "crop-and-scale"
width: 1920

But seem to ignore the setting, so the cursor is being recorded.

I can see the frameRate constraint is being set in my console, however I just cannot for the life of me seem to disable the cursor.

Yet, firefox doesn't record the cursor and shows this in the console

frameRate: 40
​height: 924
​width: 1263

Has anyone successfully managed to disable the cursor at all with Chrome, Edge and Opera?

i've even tried using

stream['input'].getVideoTracks()[0].applyConstraints( { 
video: { cursor: 'never', frameRate: 30 } 
} );

Which doesn't work :-(

Update: I can see from the chart here: https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

that the cursor constraint is only supposed to be supported on opera. However the output from getSupportedConstraints() shows cursor is not supported after all.

Thanks

Answer 1

At the bottom of this page you'll find a table showing browser support for various `MediaTrackConstraints' properties.

https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints

cursor isn't widely supported, sad to say.

You can use getSupportedConstraints() to find out what is supported in the browser where your code is running.

Try this in your devtools console to see what your browser can or more likely, can't, do.

console.log(navigator.mediaDevices.getSupportedConstraints())

Answer 2

It doesn't always work to hide the cursor using the getDisplayMedia() function options.

const captureOptions = {
video: {
      cursor: "hidden"
      }
};
navigator.mediaDevices.getDisplayMedia(captureOptions);

The 100% functional way is to hide the cursor before capturing. Then, after the capture, we return to the original or 'default' cursor

const bodyElement = document.querySelector('body');
bodyElement.style.cursor = 'none';