最近想录制一段视频用来演示自己的作品 X浏览器 的网址补全及搜索提示功能 , 通过屏幕录制生成的.mp4文件把视频放到"某酷" 视频网站,本来才十几秒的产品演示,前置广告就近一分钟。这是实在是让人崩溃,无奈之下只好放弃,突然我在想为什么不用gif呢?gif图是很古老的技术,到现在还是经久不衰都应该归结到它的简单易于传播吧。本着不重复造轮子的原则于是我上网搜寻这样的工具,结果真的没有找到让我特别称心如意的好用工具。直觉告诉我快速简单一键把屏幕录像生成gif图绝对是强需求,要是不是精力有限我真撸一个这样的工具这样的工具出来。对于可以自力更生的程序员来讲,好处是没有飞机大炮,小米加步枪还是可以搞定的,下面分享一下我是如何运用简单粗暴的方法把屏幕录制过程直接生成gif图片的。
先说一下我的工作环境吧 ,MacOs 10.9.5 ,Android系统需要4.4以上 完成操作基本上是简单粗暴的命令行,所以说我介绍的方法也许未必适合你,请酌情选择阅读和尝试。
生成gif动态图包括两个重要的步骤,首先我们还是得先把屏幕录制过程生成视频,然后再通过ffmpge命令把视频转为gif图片。
一些前置条件
- Homebrew - MAC 下的包管理软件,如果不了解请自行搜索,这样主要是用来完成ffmpge命令的编译安装 (如果你使用linux系统,用其他的包管理系统效果是一样的,比如apt-get)
- Android 4.4 系统以上 - 这里会用到Android4.4系统下的 screenrecord 命令
- Android SDK - 主要是需要其工具包里的adb 命令用来和手机设备的shell交互,SDK的安装可以参考这篇文章《打造一个全命令行的Android构建系统》
首先我们需要通过homebrew 安装ffmpge ,在这里我假设你已经在使用homebrew管理mac的软件依赖了,终端下敲入下面的命令。(为了确保安装成功最好在VPN环境下,因为某些安装包的依赖可能在墙外的,我自己是在VPN状态下安装成功的)
brew install ffmpeg
接下来我们可以尝试用Android4.4 下的 "screenrecord" 录制一段屏幕录像,下面的命令用于开启屏幕录制,按下回车命令我们就可以在手机屏幕上进行操作了,录制完毕直接 ctrl+c 这时候会在手机的 /sdcard目录下生成一个叫做"demo.mp4"的视频文件。
adb shell screenrecord /sdcard/demo.mp4
经过多次尝试,我准备使用600x800的分辨率,控制10秒的时长,主要是从视频质量和大小进行考量,视频源的大小和质量同时也会影响到接下来gif生成的质量(gif图片的大小最好控制在1M以下).
adb shell screenrecord /sdcard/demo.mp4 --size 600x800 --time-limit 10
由于生成的屏幕录像视频存在于手机本身的 SD卡目录下,而ffmpge命令是我PC中的命令,所以还需要把"demo.mp4" 复制到PC中,使用下面的命令。
adb pull /sdcard/demo.mp4
ffmpeg生成gif的基本用法如下:
ffmpeg -t <视频时长> -ss -i <视频文件> demo.gif
接下来我们用ffmpeg命令就可以生成一个10妙的git动态图。
ffmpeg -t 10 -ss 00:00:00 -i demo.mp4 demo.gif
下面是我生成的两个gif动态图,一个是用来演示地址栏的搜索建议和网址补全功能,另外一个是用来演示,如何在地址栏中搜索本地安装的应用,并打开。
[图片上传失败...(image-4772ba-1528424032482)]
[图片上传失败...(image-f6572f-1528424032483)]