Monday, 25 April 2022

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

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



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

No comments:

Post a Comment