时间戳

首页 > 解决方案 > 使用光标捕获画布流

javascript - 使用光标捕获画布流

问题描述

我HTMLCanvasElement.captureStream()用来获取 aMediaStream并将其传递给 aMediaRecorder以将其写入 .webm 文件。

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

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

标签： javascripthtml5-canvasmediastreamweb-mediarecordermediastreamtrack

解决方案

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

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

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

推荐阅读