使用光标捕获 canvas 流

Question

我使用 HTMLCanvasElement.captureStream() 获取 MediaStream 并将其传递给 MediaRecorder 以将其写入 .webm 文件。

根据 mdn，从 navigator.mediaDevices.getDisplayMedia() 检索到的 MediaStreams 可以指定一个选项来捕获光标。这是通过将字典 {cursor: 'always'} 传递给 .getDisplayMedia() 方法或 MediaStreamTrack.applyConstraints() 方法来完成的。

有没有办法从 HTMLCanvasElement 中捕获 MediaStream 的光标？ Here 是 JSFiddle 上的简化复制示例；确保允许弹出窗口。相关行复制如下：

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

我也试过stream.getTracks()[0].applyConstraints({cursor: 'always'})没用。

Answer 1

不行，没办法。
HTMLCanvasElement 的 captureStream() 方法从 canvas 的位图缓冲区生成视频流。
OS 光标永远不会在该位图缓冲区上呈现，它也不会出现在输出视频流中。（顺便说一句，从 HTMLMediaElements 捕获的流也是如此）。

使用 getDisplayMedia() 时可以有一个光标，因为这里的视频流是从浏览器的渲染器或 OS 渲染器生成的（光标通常绘制在那里）。

要从 HTMLCanvasElement 在流中绘制“a”光标，您需要自己绘制它，但它不会是您用户的 OS。

使用光标捕获 canvas 流

Capture canvas stream with cursor

javascript

html5-canvas

web-mediarecorder

mediastream

mediastreamtrack