请教前端大佬：我想对 html 页面上的某个区域/某个精确 document 录屏，应该怎么实现？

[ChatGPTPRO]

请教前端大佬

我想对 html 页面上的某个区域/某个精确 document 录屏，应该怎么实现？

我目前用的是以下这个 webTCR 的方式录屏。

但是他只能录制整个屏幕，网上找了一圈也发现他不支持录制屏幕的某个区域。

   // 初始化请求用户授权监控
    navigator.mediaDevices.getDisplayMedia(constraints).then((stream) => {
      // 对音视流进行操作
      start(stream)
    });

想做到精确的对某个标签，也就是 document ，或者说某个区域坐标，这样来录屏有实现方式吗？

我想用 js 来实现，而不是直接用外部的软件。

[iOCZ]

https://v2ex.com/t/979515#reply9

[ChatGPTPRO]

@iOCZ 这个帖子也是我发的，我试过了，不太行的，太卡了这种实现，页面直接内存溢出。因为我做的音乐可视化 canvas 。

[iOCZ]

@ChatGPTPRO 不应该啊，录个几百兆问题不大的

[codehz]

@ChatGPTPRO 你不会真按那个答案里的 html-to-canvas 去录制 canvas 了吧。。。这不是绕了一圈吗，肯定浪费了

[ChatGPTPRO]

@codehz 肯定不是啊，我本身就是 canvas 了，没必要再把 html 转 canvas 啊。

[ChatGPTPRO]

@iOCZ 是的 视频空间是不大，就是这个内存开销很大，基本上浏览器卡死。

[skcy]

能不能换个思路，采集足够的用户行为信息，点击的元素，位置，时间等，然后尝试重放.

[ChatGPTPRO]

@skcy rrweb ？

[weeshin]

https://github.com/w3c/mediacapture-region

[lisongeee]

可以录制整个屏幕，然后每一帧获取目标元素的位置大小，录制完毕后裁剪生成新的视频

[shadowyue]

说实话，在 web 端录屏的技术还没那么成熟。录屏你用应用程序来做都涉及录制压缩裁剪等各种技术，在浏览器就更麻烦了。当下能尽量去避免这个技术方案，使用外部软件实现你需求更容易。

[UmiKz]

看到这个需求，不得不感慨 SAP 系统的强大（内置录屏功能）

[mightybruce]

一个谷歌浏览器插件就可以搞定
Awesome ChatGPT 截图和屏幕录制

[ChatGPTPRO]

问题是 js 代码能调用吗

[LykorisR]

是为了实现什么功能呢？如果是为了检测用户行为的话，可以看下 Sentry 实现的 Replay

[4ark]

可以看看那种终端录屏在线重放是怎么实现的，可以肯定的是不是录屏

[weiwoxinyou]

有了解过 sfu 流媒体服务器吗？比如 licode, janus, medooze 之类的

[Chanran]

@ChatGPTPRO 可以了解下 rrweb 。https://github.com/rrweb-io/rrweb

[TiMaRaaa]

看了一下你大概想录制 canvas? https://jsfiddle.net/yjxs8n69/

[ChatGPTPRO]

@weeshin 用这位大佬的方法已经解决了。感谢各位大佬。哈哈哈

[Gaoti]

@ChatGPTPRO @weeshin
查了一下，这个不还是 proposal 吗？
op 实现了具体的代码吗？有的话想看一眼学习一下

[ChatGPTPRO]

@Gaoti proposal 是啥，我用的是录屏实现的，没用 canvas 转视频。

参考的是这个大佬发的链接 https://github.com/w3c/mediacapture-region 。

[ChatGPTPRO]

@Gaoti 感觉开源的挺叼的，前端也不太懂，照葫芦画瓢，cv 一下 api 还是能实现的

[Gaoti]

@ChatGPTPRO #22
> proposal 是啥
这是个草案来着，没仔细看 demo 里实现了对应的 API

[ChatGPTPRO]

@Gaoti 哦哦哦