Capture canvas stream with cursor

Question

I use HTMLCanvasElement.captureStream() to get a MediaStream and pass it to a MediaRecorder to write it to a .webm file.

According to mdn, MediaStreams retrieved from navigator.mediaDevices.getDisplayMedia() can have an option specified to also capture the cursor. This is done by passing in a dictionary {cursor: 'always'} to either the .getDisplayMedia() method, or MediaStreamTrack.applyConstraints() methods.

Is there a way to capture the cursor for MediaStreams from a HTMLCanvasElement? Here's a simplified reproduction example on JSFiddle; make sure to allow the popup. The relevant lines are duplicated below:

    let canvas = document.querySelector('canvas');
    let stream = canvas.captureStream(20);
    let recorder = new MediaRecorder(stream, {mimeType: 'video/webm'});

I've also tried stream.getTracks()[0].applyConstraints({cursor: 'always'}) to no avail.

Answer 1

No, there is no way.
The HTMLCanvasElement's captureStream() method generate a video stream from the canvas's bitmap buffer.
The OS cursor never gets rendered on that bitmap buffer, it won't be in the output video stream either. (The same is true for streams captured from HTMLMediaElements by the way).

You can have a cursor when using getDisplayMedia() because here the video stream is made from the browser's renderer, or the OS one (and the cursor normally gets painted there).

To get "a" cursor painted in the stream from the HTMLCanvasElement, you will need to draw it yourself, but it won't be the one of your user's OS.