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

2023-10-08 09:40:18 +08:00
 ChatGPTPRO

请教前端大佬

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

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

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

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

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

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

2530 次点击
所在节点    前端开发
25 条回复
iOCZ
2023-10-08 09:43:15 +08:00
ChatGPTPRO
2023-10-08 09:59:08 +08:00
@iOCZ 这个帖子也是我发的,我试过了,不太行的,太卡了这种实现,页面直接内存溢出。因为我做的音乐可视化 canvas 。
iOCZ
2023-10-08 10:04:21 +08:00
@ChatGPTPRO 不应该啊,录个几百兆问题不大的
codehz
2023-10-08 10:07:51 +08:00
@ChatGPTPRO 你不会真按那个答案里的 html-to-canvas 去录制 canvas 了吧。。。这不是绕了一圈吗,肯定浪费了
ChatGPTPRO
2023-10-08 10:12:11 +08:00
@codehz 肯定不是啊,我本身就是 canvas 了,没必要再把 html 转 canvas 啊。
ChatGPTPRO
2023-10-08 10:12:33 +08:00
@iOCZ 是的 视频空间是不大,就是这个内存开销很大,基本上浏览器卡死。
skcy
2023-10-08 10:14:02 +08:00
能不能换个思路,采集足够的用户行为信息,点击的元素,位置,时间等,然后尝试重放.
ChatGPTPRO
2023-10-08 10:19:53 +08:00
@skcy rrweb ?
weeshin
2023-10-08 10:31:38 +08:00
lisongeee
2023-10-08 10:37:12 +08:00
可以录制整个屏幕,然后每一帧获取目标元素的位置大小,录制完毕后裁剪生成新的视频
shadowyue
2023-10-08 10:39:12 +08:00
说实话,在 web 端录屏的技术还没那么成熟。录屏你用应用程序来做都涉及录制压缩裁剪等各种技术,在浏览器就更麻烦了。当下能尽量去避免这个技术方案,使用外部软件实现你需求更容易。
UmiKz
2023-10-08 10:45:21 +08:00
看到这个需求,不得不感慨 SAP 系统的强大(内置录屏功能)
mightybruce
2023-10-08 10:54:57 +08:00
一个谷歌浏览器插件就可以搞定
Awesome ChatGPT 截图和屏幕录制
ChatGPTPRO
2023-10-08 11:05:42 +08:00
问题是 js 代码能调用吗
LykorisR
2023-10-08 11:36:35 +08:00
是为了实现什么功能呢?如果是为了检测用户行为的话,可以看下 Sentry 实现的 Replay
4ark
2023-10-08 12:30:58 +08:00
可以看看那种终端录屏在线重放是怎么实现的,可以肯定的是不是录屏
weiwoxinyou
2023-10-08 15:06:38 +08:00
有了解过 sfu 流媒体服务器吗?比如 licode, janus, medooze 之类的
Chanran
2023-10-08 15:18:37 +08:00
TiMaRaaa
2023-10-08 15:28:18 +08:00
看了一下你大概想录制 canvas? https://jsfiddle.net/yjxs8n69/
ChatGPTPRO
2023-10-08 16:04:32 +08:00
@weeshin 用这位大佬的方法已经解决了。感谢各位大佬。哈哈哈

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/979715

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX