mac 上制作终端演示视频并生成 gif

2017-01-18 10:22:59 +08:00
 waruqi

尝试了各种方案:

  1. ttyrec + tty2gif/ttygif :时间长了后,生成 gif 太慢,效果也不是很好
  2. LICECap 工具录屏生成 gif :效果不尽如人意,画质太差
  3. ttystduio: 画质也不是很满意,而且生成文件很大
  4. mac 自带的 qucktime 录屏 mov + ffmpeg 转 gif + convert 优化 gif 大小:最后的方案

mac 自带的 qucktime 还是很强大哦的,直接选取需要录屏的区域,直接进行录制就行了,最后生成 mov 文件。。

但是用默认的 ffmpeg 参数直接转换成 gif ,画质很差,后来终于从老外的 github 上搜了一段脚本(原始 url 找不到了, = =)。。

#!/bin/sh

palette="/tmp/palette.png"

filters="fps=$4,scale=$3:-1:flags=lanczos"

ffmpeg -v warning -i $1 -vf "$filters,palettegen" -y $palette
ffmpeg -v warning -i $1 -i $palette -lavfi "$filters [x]; [x][1:v] paletteuse" -y $2

里面通过使用 ffmpeg 预生成调色板,来提高 gif 的画质,并且通过设置缩放比率、帧率来压缩文件大小。。

使用方式:

mov2gif  xxx.mov xxx.gif 800 1

这是我这边设置的参数,由于我是录制终端视频,帧率设置为 1fps ,就已经足够了,不然文件太大。。

然后再用 convert 进一步压缩 gif 大小:

convert xxx.gif -fuzz 5% -layers Optimize xxx2.gif

如果不加-fuzz 5%,优化粒度不大,这个参数可以将图片附近区域相近的颜色合并成相同值,进行压缩,通过这行命令,基本上可以继续压缩 50%的大小(对于终端视频,大块颜色都是背景色)

最后,晒下我这边的录制效果(顺带打个小广告 :)

4540 次点击
所在节点    程序员
16 条回复
gxm44
2017-01-18 11:07:29 +08:00
赞一个
ynyounuo
2017-01-18 11:40:47 +08:00
其实给别人演示用 asciinema 足矣呀
你录制的那个帧数像是幻灯片一样
一定要 gif 的话我一般用差不多这类参数,稍作微调

-r {5-15}
-b:v {<=500k}
-maxrate {<=1000k}
-pix_fmt rgb24

效果类似这样( https://www.v2ex.com/t/334244?p=1#r_3952591 ):
atywz
2017-01-18 11:47:05 +08:00
steam 上 有个软件 叫 shareX 免费
waruqi
2017-01-18 12:28:06 +08:00
@ynyounuo asciinema 我也用过 录制效果不错 还能上传到他们的网站 但是需要跳转过去才能播放 加载很慢 弄成 gif 有即视感感 可以直接看 嵌入 readme 效果不错 帧率低点 无所谓
waruqi
2017-01-18 12:28:49 +08:00
@atywz 回头我试试 谢谢
waruqi
2017-01-18 12:31:45 +08:00
@ynyounuo 我录的比较长 你那些参数录制的 gif 文件会很大
songz
2017-01-18 12:42:32 +08:00
@ynyounuo 1.7MB 好大啊
sobigfish
2017-01-18 12:58:53 +08:00
嵌入 readme 的大 gif 比 asciinema 加载更慢=。= (github 的话)
展示 terminal 而非直观展示界面的话, asciinema 的文字更直观。


非要用 gif 图的话, gifsicle 试过没
ynyounuo
2017-01-18 13:00:48 +08:00
@songz 因为帧数高, 1 帧每秒的话只要 200K

在我看来在 V2EX 发主题和回复 5MB 以下的 gif 都是合理可用的,我不会为了压缩而牺牲质量,当然如果支持

@waruqi 还行吧,实际长度超过 15 秒的录屏我觉得 gif 并没有什么优势
ynyounuo
2017-01-18 13:03:07 +08:00
@ynyounuo *如果支持 asciinema 嵌入回复的话,我肯定不会在 V 站用 gif 呀
waruqi
2017-01-18 13:04:49 +08:00
@sobigfish 没试过 一会我试下 谢谢
waruqi
2017-01-18 13:33:28 +08:00
@sobigfish 我看了下 gifsicle 貌似只是个 gif 的合并 编辑 生成工具,有点类似 convert 。。没法录屏
waruqi
2017-01-18 13:35:41 +08:00
github 上超过 2m 的 gif 。。我之前试了下。。 github 很容易缓存到一半,就再也加载显示不出来了。。 = =
sobigfish
2017-01-18 13:39:44 +08:00
是的, gifsicle 优化的 gif 好像比较好.
waruqi
2017-01-18 14:46:39 +08:00
@sobigfish 哦哦 我试试。
brucezhou
2017-01-20 18:38:10 +08:00
我用的是 Snagit ,挺方便的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/335312

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX