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.

Did you check the Browser compatibility of cursor property? ... that is only compat with Opera ... if I needed something like that in the code that draws on the canvas also draw something to represent cursor — Helder Sepulveda, Jul 06 '21 at 20:24
Thanks, I didn't check compatbility and was using chrome. Yes, drawing a cursor is what I'm doing for now. — junvar, Jul 07 '21 at 01:13

score 2 · Accepted Answer · answered Jul 09 '21 at 03:55

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.

Capture canvas stream with cursor

1 Answers1