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

一个『视频转 GIF』的工具,在浏览器里运行,速度挺快

  •  
  •   lyonbot · 220 天前 via Android · 1066 次点击
    这是一个创建于 220 天前的主题,其中的信息可能已经有所发展或是发生改变。

    周末做了一个在浏览器里「视频转 GIF 」的工具。

    https://lyonbot.github.io/video-to-gif/

    使用 WebCodec 解码视频,转换速度还是有保障的。而且还可以自定义颜色、抖动等参数,提高转换效果。

    技术栈:Solidjs, Unocss, WebCodec, ffmpeg.wasm, modern-gif, mp4box.js

    欢迎各位大佬体验,反馈问题和分享😘

    第 1 条附言  ·  216 天前

    如果这个工具有用的话,希望能 点个支持🌟 ,或者帮忙分享一下。关于推广我是没有一点思路,也不想在这方面倒腾太多。

    但没有正反馈的话,还是挺影响维护或者做新的东西的积极性的。

    发出来后回复全是一些神奇的case,并且没有样本。如果可以的话,辛苦发到 GItHub Issues 区里,我会抽空处理下

    12 条回复    2024-04-22 11:38:30 +08:00
    dazuijuren004
        1
    dazuijuren004  
       220 天前
    尝试使用了一个 mov 格式录制的视频,网站提示 code c is not support
    lyonbot
        2
    lyonbot  
    OP
       220 天前
    @dazuijuren004 测试了一下 MacOS 自带的录屏 mov 是可以的,方便发一下浏览器版本 & 视频文件看下情况么?
    📧 bHlvbmJvdEBnbWFpbC5jb20K
    dazuijuren004
        3
    dazuijuren004  
       220 天前
    @lyonbot 很奇怪,我刚又试了一遍,成功了
    MossFox
        4
    MossFox  
       220 天前
    好用,⭐了

    刚想说默认走的 ffmpeg 会不会有些重量级,但是选了个分辨率略大的视频,速度对比了一下真比纯 JS 快好多,赞。
    lyonbot
        5
    lyonbot  
    OP
       220 天前   ❤️ 1
    @MossFox 感谢😉实践证明跑压缩算法还是 wasm 更快一些。

    方案落地走过挺多弯路的,一开始是直接让 ffmpeg 解码视频+编码 GIF ,发现 wasm 解码速度太差,后来改成 video 抓画面,再改成 WebCodec 超高速解码。而 GIF 编码这部分,本来用的 gif.js ,因为未暴露颜色数量控制能力,改成了 [modern-gif]( https://github.com/qq15725/modern-gif)
    YY
        6
    YY  
       220 天前
    测试一个竖版的视频,转后方向好像变了
    lyonbot
        7
    lyonbot  
    OP
       220 天前
    @YY
    是手机拍摄的视频吧……手机拍摄的视频会有一个变换矩阵,这个玄学玩意儿我解码画面时还没处理🤦
    一会弄下
    lyonbot
        8
    lyonbot  
    OP
       219 天前
    @YY 已经修复了,只能说有点神奇
    YY
        9
    YY  
       219 天前
    能不能添加文字 (可以设置字体 大小 颜色 等
    方便制作表情包
    630071099
        10
    630071099  
       216 天前
    随便找了个 QQ 录屏 MP4 格式的,不能用。看了下竟然是 H.263 编码的,网页对视频编码的支持还是太有限。
    InvalidStateError: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0.
    lyonbot
        11
    lyonbot  
    OP
       216 天前
    @630071099 头一回见有用 h263 编码的,看说明一是正常的 mp4 不支持存储 h263 信息,二是其分辨率类型不是说很有限…… 好奇能发个样本看看吗 bHlvbmJvdEBnbWFpbC5jb20K
    630071099
        12
    630071099  
       213 天前
    @lyonbot 样本提交到 github 上了: https://github.com/lyonbot/video-to-gif/issues/1 。问了 ChatGPT ,确实不是 H.263 ,是使用了 H.263 的默认矩阵配置进行编码,视频文件的编码为 MPEG-4 Visual 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1758 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:41 · PVG 00:41 · LAX 08:41 · JFK 11:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.