V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
oct16
V2EX  ›  分享创造

一个 HTML5 录屏器 🖥

  •  
  •   oct16 · 2020-03-16 18:05:53 +08:00 · 5887 次点击
    这是一个创建于 1711 天前的主题,其中的信息可能已经有所发展或是发生改变。

    花了两个周末写的小玩具,感觉挺有意思的,大家来试玩一下吧

    demo 地址 要用电脑打开哦

    29 条回复    2020-12-14 19:52:57 +08:00
    cydian
        1
    cydian  
       2020-03-16 18:52:19 +08:00
    非常厉害。后期会用到。
    希望支持更多快捷的 Api 调用
    以及更好的浏览器支持。
    cydian
        2
    cydian  
       2020-03-16 18:52:31 +08:00
    持续关注。
    Gladoos
        3
    Gladoos  
       2020-03-16 19:35:27 +08:00
    哈哈哈 很好玩
    somethin
        4
    somethin  
       2020-03-16 22:56:26 +08:00
    firefox 68.6.0esr,replay 显示不了
    cleveryun
        5
    cleveryun  
       2020-03-16 23:36:54 +08:00
    第一反应是刷新了我的认知。。
    oct16
        6
    oct16  
    OP
       2020-03-17 00:54:07 +08:00
    @somethin 感谢你的提醒,问题已经修复了
    miniliuke
        7
    miniliuke  
       2020-03-17 00:59:29 +08:00
    牛 B 了,打开了一扇窗,奇怪的用法又增加了
    iMusic
        8
    iMusic  
       2020-03-17 01:33:25 +08:00
    牛逼,我刚开始以为是用`getDisplayMedia`
    qq316107934
        9
    qq316107934  
       2020-03-17 02:31:13 +08:00 via Android
    这东西用来复现 bug 蛮不错的
    K1W1
        10
    K1W1  
       2020-03-17 07:30:56 +08:00 via Android
    666,网页版按键精灵
    allen9527
        11
    allen9527  
       2020-03-17 09:37:13 +08:00
    这是个好玩意哦,持续关注。
    chuxiaonan
        12
    chuxiaonan  
       2020-03-17 10:05:31 +08:00
    不错哈哈 跟我们当时小组内探讨录屏方案的时候用到的比较接近
    不过提几个点 当时我们遇到的几个比较棘手的问题
    1 是对 canvas 的支持不是特别好 尤其是多层级 canvas 互相之间还有压盖的(我们的 case 就是几个全屏 canvas)
    2 是对动画的支持也不是特别理想 css 动画 requestAnimationFrame 动画等等 此外 raf 动画时会有时序错乱的问题(不过这个比较诡异 一直不太清楚具体的原因)
    component
        13
    component  
       2020-03-17 10:53:47 +08:00
    非常赞!可以用在异常监控录屏上传。
    Dillion
        14
    Dillion  
       2020-03-17 10:57:04 +08:00 via Android
    移动终端的渲染方式是类似的么?这种功能能在手机上实现么
    chengkai
        15
    chengkai  
       2020-03-17 12:18:46 +08:00
    嗯,不错。这和矢量图的原理异曲同工。
    codehz
        16
    codehz  
       2020-03-17 14:36:11 +08:00
    渲染的时候通过 CSS 打上马赛克或模糊处理即可: ??????意思是数据还是记录下来了?
    yutou527
        17
    yutou527  
       2020-03-17 16:24:16 +08:00
    不错!
    oct16
        18
    oct16  
    OP
       2020-03-17 16:24:22 +08:00
    @chuxiaonan 谢谢分享!
    oct16
        19
    oct16  
    OP
       2020-03-17 16:25:17 +08:00
    @codehz 这里只提供一个思路,具体怎么做就看业务需求了
    oct16
        20
    oct16  
    OP
       2020-03-17 16:25:36 +08:00
    @Dillion 当然
    Tink
        21
    Tink  
       2020-03-17 16:33:47 +08:00
    这个很像阿里的那个 XReplay
    fancy111
        22
    fancy111  
       2020-03-17 16:35:04 +08:00
    实际上用处不太大。H5 本身是有录屏功能的。
    另外你这个无法录到鼠标点击,双击,选取文字等,漏掉不少信息。鼠标速度快的时候会掉帧。
    oct16
        23
    oct16  
    OP
       2020-03-17 20:56:23 +08:00
    @Tink 是的,借鉴了他们的一些思路
    ITJoker
        24
    ITJoker  
       2020-03-17 23:12:47 +08:00
    奇怪的用法,学习了学习了
    polarbearn
        25
    polarbearn  
       2020-03-18 15:34:35 +08:00
    这个可以录像回放,还有声音 scrimba.com/p/pXKqta/cQ3QVcr
    github.com/rrweb-io/rrweb
    aryu
        26
    aryu  
       2020-03-19 14:38:15 +08:00   ❤️ 1
    @rolitter scrimba 是一个 ad-hoc 的实现,如果录制的目标是编辑器这样的场景的话,就可以设计出更高效的快照和 op-log 数据结构。
    aryu
        27
    aryu  
       2020-03-19 14:45:54 +08:00
    楼主如果有兴趣把玩具做成生产可用的话,rrweb 非常欢迎贡献者的加入,我们也有计划在 4 月份迭代出一个包含了很多新功能的版本~

    同时开源了 rrweb 的团队也在招聘中,在日常工作中也都是同样有挑战性和创造性的内容,有兴趣的同学欢迎发简历 eWFuemhlbkBzbWFydHguY29t
    Exia
        28
    Exia  
       2020-03-19 21:10:21 +08:00
    这个很赞,多谢楼主的分享,受益匪浅。
    patz
        29
    patz  
       2020-12-14 19:52:57 +08:00
    不错不错, 另外推荐一款 mac 的录屏神器, 白菜录屏了解一下 https://www.bakchoi.com
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   994 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 19:53 · PVG 03:53 · LAX 11:53 · JFK 14:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.