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

[lyonbot]

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

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

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

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

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

[dazuijuren004]

尝试使用了一个 mov 格式录制的视频，网站提示 code c is not support

[lyonbot]

@dazuijuren004 测试了一下 MacOS 自带的录屏 mov 是可以的，方便发一下浏览器版本 & 视频文件看下情况么？
📧 bHlvbmJvdEBnbWFpbC5jb20K

[dazuijuren004]

@lyonbot 很奇怪，我刚又试了一遍，成功了

[MossFox]

好用，⭐了

刚想说默认走的 ffmpeg 会不会有些重量级，但是选了个分辨率略大的视频，速度对比了一下真比纯 JS 快好多，赞。

[lyonbot]

@MossFox 感谢😉实践证明跑压缩算法还是 wasm 更快一些。

方案落地走过挺多弯路的，一开始是直接让 ffmpeg 解码视频+编码 GIF ，发现 wasm 解码速度太差，后来改成 video 抓画面，再改成 WebCodec 超高速解码。而 GIF 编码这部分，本来用的 gif.js ，因为未暴露颜色数量控制能力，改成了 [modern-gif]( https://github.com/qq15725/modern-gif)

[YY]

测试一个竖版的视频，转后方向好像变了

[lyonbot]

@YY
是手机拍摄的视频吧……手机拍摄的视频会有一个变换矩阵，这个玄学玩意儿我解码画面时还没处理🤦
一会弄下

[lyonbot]

@YY 已经修复了，只能说有点神奇

[YY]

能不能添加文字 （可以设置字体 大小 颜色 等
方便制作表情包

[630071099]

随便找了个 QQ 录屏 MP4 格式的，不能用。看了下竟然是 H.263 编码的，网页对视频编码的支持还是太有限。
InvalidStateError: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0.

[lyonbot]

@630071099 头一回见有用 h263 编码的，看说明一是正常的 mp4 不支持存储 h263 信息，二是其分辨率类型不是说很有限…… 好奇能发个样本看看吗 bHlvbmJvdEBnbWFpbC5jb20K

[630071099]

@lyonbot 样本提交到 github 上了： https://github.com/lyonbot/video-to-gif/issues/1 。问了 ChatGPT ，确实不是 H.263 ，是使用了 H.263 的默认矩阵配置进行编码，视频文件的编码为 MPEG-4 Visual 。