javascript - 用光标捕获 Canvas 流

Question

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

根据mdn ，从 navigator.mediaDevices.getDisplayMedia() 检索的 MediaStream 可以指定一个选项来捕获光标。这是通过将字典 {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 的位图缓冲区生成视频流。
操作系统光标永远不会在该位图缓冲区上呈现，它也不会出现在输出视频流中。 (顺便说一句，从 HTMLMediaElements 捕获的流也是如此)。

使用 getDisplayMedia() 时可以有一个光标，因为这里的视频流是由浏览器的渲染器或操作系统的渲染器生成的(并且光标通常绘制在那里)。

要从 HTMLCanvasElement 的流中绘制“a”光标，您需要自己绘制它，但它不会是您用户的操作系统之一。