使用光标捕获画布流答案

【问题标题】：Capture canvas stream with cursor使用光标捕获画布流
【发布时间】：2021-09-14 17:24:24
【问题描述】：

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

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

有没有办法从HTMLCanvasElement 捕获MediaStreams 的光标？ 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'})，但无济于事。

【问题讨论】：

您是否检查过光标属性的浏览器兼容性？ ...这仅与 Opera 兼容 ...如果我在画布上绘制的代码中需要类似的东西，也可以绘制一些东西来表示光标
谢谢，我没有检查兼容性并且正在使用 chrome。是的，我现在正在做的就是画一个光标。

标签： javascript html5-canvas mediastream web-mediarecorder mediastreamtrack

【解决方案1】：

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

您可以在使用getDisplayMedia() 时使用光标，因为这里的视频流是由浏览器的渲染器或操作系统渲染器生成的（光标通常会在此处绘制）。

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

【讨论】：