V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Albacore
V2EX  ›  程序员

使用 Pug 来制作令人惊叹的 WebRTC 录制 CSS3 动画

  •  
  •   Albacore · 2023-03-24 13:16:22 +08:00 · 1447 次点击
    这是一个创建于 392 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这个项目的名字叫做 Pug Recorder ,它是一个 WebRTC 录制 CSS3 动画的实现。它可以您轻松地录制一个具有多个元素的动画,这个动画可以在网页上播放,还可以将录制的动画保存为视频格式。

    在这个项目中,使用 WebRTC 和 Canvas 来捕获用户的屏幕,使用 CSS3 动画来实现录制的效果。

    https://icepepsicola.github.io/pug

    9 条回复    2023-03-25 09:49:21 +08:00
    werifu
        1
    werifu  
       2023-03-24 15:27:47 +08:00
    感觉挺好玩的
    变形的动效也好酷炫,喜欢
    Albacore
        2
    Albacore  
    OP
       2023-03-24 16:44:01 +08:00
    @werifu 感谢支持
    yukinotech
        3
    yukinotech  
       2023-03-24 17:58:59 +08:00
    有点意思
    mclxly
        4
    mclxly  
       2023-03-24 20:50:00 +08:00
    我以前也做过类似的,但是分辨率不够好、文字有锯齿。你这个看起来不错,有时间试试~
    retrocode
        5
    retrocode  
       2023-03-24 20:58:52 +08:00
    不是用的 pug 吗 我看源码没有用到呀
    Albacore
        6
    Albacore  
    OP
       2023-03-24 21:21:14 +08:00
    @yukinotech 感谢支持
    Albacore
        7
    Albacore  
    OP
       2023-03-24 21:21:30 +08:00
    @mclxly 感谢支持
    Albacore
        8
    Albacore  
    OP
       2023-03-24 21:21:59 +08:00
    @retrocode 没有哦,项目名是 Pug Recorder
    suke119
        9
    suke119  
       2023-03-25 09:49:21 +08:00
    准确的来说你只是用到了 Web API 去实现录制功能,WebRTC 是一个综合技术,基本前提是满足双方的实时通信;然后就是浏览器的 Web API 实现的录制功能对于视频时没得元数据的,这也就是录制完成后没得总的时间,要等加载一会才会出现;所以你需要手动去控制这个 metadata 或者利用第三方的组件配合加上元数据得到的录制视频才是完整的视频。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5302 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 07:53 · PVG 15:53 · LAX 00:53 · JFK 03:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.