使用光标捕获画布流

问题描述

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

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

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

解决方法

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

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

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