Android下如何把螢幕錄製演示生成GIF動態圖

chengkai發表於2015-07-22

最近想錄制一段視訊用來演示自己的作品 XBrowser 的網址補全及搜尋提示功能 , 通過螢幕錄製生成的.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

經過多次嘗試,我準備使用600×800的解析度,控制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動態圖,一個是用來演示位址列的搜尋建議和網址補全功能,另外一個是用來演示,如何在位址列中搜尋本地安裝的應用,並開啟。

search.gif

qa.gif

相關文章