• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Albacore
V2EX  ›  程序员

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

  •  
  •   Albacore · Mar 24, 2023 · 3100 views
    This topic created in 1320 days ago, the information mentioned may be changed or developed.

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

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

    https://icepepsicola.github.io/pug

    9 replies  •  2023-03-25 09:49:21 +08:00
    werifu
    werifu
    Mar 24, 2023
    1
    感觉挺好玩的
    变形的动效也好酷炫,喜欢
    Albacore
    Albacore
    OP
    Mar 24, 2023
    2
    @werifu 感谢支持
    yukinotech
    yukinotech
    Mar 24, 2023
    3
    有点意思
    mclxly
    mclxly
    Mar 24, 2023
    4
    我以前也做过类似的,但是分辨率不够好、文字有锯齿。你这个看起来不错,有时间试试~
    cvooc
    cvooc
    Mar 24, 2023
    5
    不是用的 pug 吗 我看源码没有用到呀
    Albacore
    Albacore
    OP
    Mar 24, 2023
    6
    @yukinotech 感谢支持
    Albacore
    Albacore
    OP
    Mar 24, 2023
    7
    @mclxly 感谢支持
    Albacore
    Albacore
    OP
    Mar 24, 2023
    8
    @retrocode 没有哦,项目名是 Pug Recorder
    suke119
    suke119
    Mar 25, 2023
    9
    准确的来说你只是用到了 Web API 去实现录制功能,WebRTC 是一个综合技术,基本前提是满足双方的实时通信;然后就是浏览器的 Web API 实现的录制功能对于视频时没得元数据的,这也就是录制完成后没得总的时间,要等加载一会才会出现;所以你需要手动去控制这个 metadata 或者利用第三方的组件配合加上元数据得到的录制视频才是完整的视频。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   3633 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 04:15 · PVG 12:15 · LAX 20:15 · JFK 23:15
    ♥ Do have faith in what you're doing.