爱意满满的作品展示区。
oct16

一个 HTML5 录屏器 🖥

  •  
  •   oct16 · Mar 16, 2020 · 7506 views
    This topic created in 2424 days ago, the information mentioned may be changed or developed.

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

    demo 地址 要用电脑打开哦

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

    同时开源了 rrweb 的团队也在招聘中,在日常工作中也都是同样有挑战性和创造性的内容,有兴趣的同学欢迎发简历 eWFuemhlbkBzbWFydHguY29t
    Exia
    Exia
    Mar 19, 2020
    28
    这个很赞,多谢楼主的分享,受益匪浅。
    patz
    patz
    Dec 14, 2020
    29
    不错不错, 另外推荐一款 mac 的录屏神器, 白菜录屏了解一下 https://www.bakchoi.com
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1321 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 62ms · UTC 22:25 · PVG 06:25 · LAX 14:25 · JFK 17:25
    ♥ Do have faith in what you're doing.