V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ChatGPTPRO
V2EX  ›  前端开发

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

  •  
  •   ChatGPTPRO · 2023-10-08 09:40:18 +08:00 · 2481 次点击
    这是一个创建于 412 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请教前端大佬

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

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

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

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

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

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

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

    参考的是这个大佬发的链接 https://github.com/w3c/mediacapture-region
    ChatGPTPRO
        23
    ChatGPTPRO  
    OP
       2023-10-09 08:22:28 +08:00
    @Gaoti 感觉开源的挺叼的,前端也不太懂,照葫芦画瓢,cv 一下 api 还是能实现的
    Gaoti
        24
    Gaoti  
       2023-10-09 14:12:23 +08:00
    @ChatGPTPRO #22
    > proposal 是啥
    这是个草案来着,没仔细看 demo 里实现了对应的 API
    ChatGPTPRO
        25
    ChatGPTPRO  
    OP
       2023-10-09 14:17:00 +08:00
    @Gaoti 哦哦哦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   934 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:33 · PVG 06:33 · LAX 14:33 · JFK 17:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.