最近想錄制一段視頻用來(lái)演示自己的作品 X瀏覽器 的網(wǎng)址補(bǔ)全及搜索提示功能 , 通過(guò)屏幕錄制生成的.mp4文件把視頻放到"某酷" 視頻網(wǎng)站持舆,本來(lái)才十幾秒的產(chǎn)品演示,前置廣告就近一分鐘犬第。這是實(shí)在是讓人崩潰,無(wú)奈之下只好放棄仓洼,突然我在想為什么不用gif呢宦言?gif圖是很古老的技術(shù),到現(xiàn)在還是經(jīng)久不衰都應(yīng)該歸結(jié)到它的簡(jiǎn)單易于傳播吧换可。本著不重復(fù)造輪子的原則于是我上網(wǎng)搜尋這樣的工具椎椰,結(jié)果真的沒(méi)有找到讓我特別稱(chēng)心如意的好用工具。直覺(jué)告訴我快速簡(jiǎn)單一鍵把屏幕錄像生成gif圖絕對(duì)是強(qiáng)需求沾鳄,要是不是精力有限我真擼一個(gè)這樣的工具這樣的工具出來(lái)慨飘。對(duì)于可以自力更生的程序員來(lái)講,好處是沒(méi)有飛機(jī)大炮译荞,小米加步槍還是可以搞定的瓤的,下面分享一下我是如何運(yùn)用簡(jiǎn)單粗暴的方法把屏幕錄制過(guò)程直接生成gif圖片的。
先說(shuō)一下我的工作環(huán)境吧 吞歼,MacOs 10.9.5 圈膏,Android系統(tǒng)需要4.4以上 完成操作基本上是簡(jiǎn)單粗暴的命令行,所以說(shuō)我介紹的方法也許未必適合你篙骡,請(qǐng)酌情選擇閱讀和嘗試稽坤。
生成gif動(dòng)態(tài)圖包括兩個(gè)重要的步驟,首先我們還是得先把屏幕錄制過(guò)程生成視頻糯俗,然后再通過(guò)ffmpge命令把視頻轉(zhuǎn)為gif圖片慎皱。
一些前置條件
- Homebrew - MAC 下的包管理軟件,如果不了解請(qǐng)自行搜索,這樣主要是用來(lái)完成ffmpge命令的編譯安裝 (如果你使用linux系統(tǒng)叶骨,用其他的包管理系統(tǒng)效果是一樣的茫多,比如apt-get)
- Android 4.4 系統(tǒng)以上 - 這里會(huì)用到Android4.4系統(tǒng)下的 screenrecord 命令
- Android SDK - 主要是需要其工具包里的adb 命令用來(lái)和手機(jī)設(shè)備的shell交互,SDK的安裝可以參考這篇文章《打造一個(gè)全命令行的Android構(gòu)建系統(tǒng)》
首先我們需要通過(guò)homebrew 安裝ffmpge ,在這里我假設(shè)你已經(jīng)在使用homebrew管理mac的軟件依賴(lài)了忽刽,終端下敲入下面的命令天揖。(為了確保安裝成功最好在VPN環(huán)境下,因?yàn)槟承┌惭b包的依賴(lài)可能在墻外的跪帝,我自己是在VPN狀態(tài)下安裝成功的)
brew install ffmpeg
接下來(lái)我們可以嘗試用Android4.4 下的 "screenrecord" 錄制一段屏幕錄像今膊,下面的命令用于開(kāi)啟屏幕錄制,按下回車(chē)命令我們就可以在手機(jī)屏幕上進(jìn)行操作了伞剑,錄制完畢直接 ctrl+c 這時(shí)候會(huì)在手機(jī)的 /sdcard目錄下生成一個(gè)叫做"demo.mp4"的視頻文件斑唬。
adb shell screenrecord /sdcard/demo.mp4
經(jīng)過(guò)多次嘗試,我準(zhǔn)備使用600x800的分辨率,控制10秒的時(shí)長(zhǎng)恕刘,主要是從視頻質(zhì)量和大小進(jìn)行考量缤谎,視頻源的大小和質(zhì)量同時(shí)也會(huì)影響到接下來(lái)gif生成的質(zhì)量(gif圖片的大小最好控制在1M以下).
adb shell screenrecord /sdcard/demo.mp4 --size 600x800 --time-limit 10
由于生成的屏幕錄像視頻存在于手機(jī)本身的 SD卡目錄下,而ffmpge命令是我PC中的命令褐着,所以還需要把"demo.mp4" 復(fù)制到PC中坷澡,使用下面的命令。
adb pull /sdcard/demo.mp4
ffmpeg生成gif的基本用法如下:
ffmpeg -t <視頻時(shí)長(zhǎng)> -ss -i <視頻文件> demo.gif
接下來(lái)我們用ffmpeg命令就可以生成一個(gè)10妙的git動(dòng)態(tài)圖含蓉。
ffmpeg -t 10 -ss 00:00:00 -i demo.mp4 demo.gif
下面是我生成的兩個(gè)gif動(dòng)態(tài)圖频敛,一個(gè)是用來(lái)演示地址欄的搜索建議和網(wǎng)址補(bǔ)全功能,另外一個(gè)是用來(lái)演示馅扣,如何在地址欄中搜索本地安裝的應(yīng)用斟赚,并打開(kāi)。
[圖片上傳失敗...(image-4772ba-1528424032482)]
[圖片上傳失敗...(image-f6572f-1528424032483)]