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

请问大家前端如何实现类似“剪映”的多媒体编辑器,最近有这个需求

  •  
  •   unt · 2023-01-10 10:40:00 +08:00 · 3111 次点击
    这是一个创建于 465 天前的主题,其中的信息可能已经有所发展或是发生改变。
    看过友商做的,体验还行,该有的功能都有,但是没有源码,用老技术做的。
    有没有现成的 demo 和库,要不然感觉代码量还挺大的。
    实现原理是什么,用到的技术有哪些
    第 1 条附言  ·  2023-01-10 15:40:51 +08:00
    可能需求没说清楚,附带一条:

    是 UI 和“剪映”一样,需要多图层,时间轴,任意时间点画面的实时渲染等等;
    但是最终不是输出视频,不对视频进行特效,裁剪,倍速等操作;
    最终输出的是整个图层的 json 数据(存视频、图片地址即可)
    13 条回复    2023-11-21 18:02:26 +08:00
    zhanlanhuizhang
        1
    zhanlanhuizhang  
       2023-01-10 10:46:09 +08:00
    可能用的 asm.js 或者 webassembly 实现的。
    duan602728596
        2
    duan602728596  
       2023-01-10 11:01:16 +08:00
    曾经做过内部用的简单的视频编辑器工具。技术栈是 react ,视频轨数据存在 redux 里面,视频渲染用的 canvas ,播放就是当前时间在 canvas 上把所有轨道上的视频和特效实时渲染出来,视频和特效的渲染位置、视频在相同、不同轨道的拖拽计算就是纯原生计算了。因为 react 的渲染机制会导致播放时出现卡顿,还需要在播放时进行优化。
    unt
        3
    unt  
    OP
       2023-01-10 13:10:42 +08:00
    @duan602728596 #2 谢谢
    xiaojie668329
        4
    xiaojie668329  
       2023-01-10 13:56:07 +08:00 via iPhone
    ffmpeg.wasm
    wzfwzfwzf
        5
    wzfwzfwzf  
       2023-01-10 13:59:28 +08:00
    Cellinlab
        6
    Cellinlab  
       2023-01-10 14:03:30 +08:00
    阿里腾讯都有云剪服务,直接嵌入就行,自己开发的话,要功能全不是一两人能搞定
    tl228
        7
    tl228  
       2023-01-10 14:10:33 +08:00
    前端真的最怕这种繁重的 dom 操作
    yaphets666
        8
    yaphets666  
       2023-01-10 14:26:39 +08:00
    我之前面试一家公司,人家就靠这个 web 端剪辑工具估值 100 亿。想做好很难的,找个开源的凑合用下就行了。
    unt
        9
    unt  
    OP
       2023-01-10 15:46:39 +08:00


    @zhanlanhuizhang #1
    @xiaojie668329 #4
    @wzfwzfwzf #5
    @Cellinlab #6
    @tl228 #7
    @yaphets666 #8 不好意思,需求没讲清楚,是 UI 和图中一样,但是输出 json 即可,不需要剪辑视频,已附言
    wzfwzfwzf
        10
    wzfwzfwzf  
       2023-01-10 17:33:34 +08:00
    @unt 我们公司做这个云剪集成的,有兴趣买吗,可能会比程序员人力投入便宜一些
    polarbearn
        11
    polarbearn  
       2023-01-11 09:08:28 +08:00   ❤️ 1
    unt
        12
    unt  
    OP
       2023-01-11 11:26:05 +08:00
    @rolitter #11 非常感谢
    sarcomtdgzxz
        13
    sarcomtdgzxz  
       150 天前
    @wzfwzfwzf 怎么卖的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2895 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:46 · PVG 21:46 · LAX 06:46 · JFK 09:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.