1. 程式人生 > >Android螢幕錄影轉換GIF解決方案

Android螢幕錄影轉換GIF解決方案

作為一個Android開發人員,經常需要把UI效果錄製下來,有時候要給遠端客戶看效果,有時候要錄製demo寫部落格或者教程,客戶和QA也需要錄製一些bug的表現給開發。在網上查閱了很多錄屏的方法,但都不是很好用。比如有人推薦用“錄屏大師”這樣一款軟體,我在手機和模擬器上都報錯失敗;還有人推薦用adb的adb shell screenrecord指令去錄製,但是命令列一直提示“device not found”,那麼有沒有一種錄製出來視訊清晰度高,容量小,碼流和幀率合適的方法呢,又如何把錄製好的視訊轉換成清晰度高,觀看流暢的gif呢。

在某度上來來回回查詢了許多方案均以失敗告終,總結出來目前Android錄屏功能的現狀

1、免費的模擬器幾乎都不支援錄屏功能,比如天天,夜神。。。收費模擬器GenyMotion號稱支援錄屏,但是我沒試過好不好用(如果有人發現好用的錄屏模擬器一定要告訴我)

2、手機真機幾乎全部沒有原生的錄屏功能(MIUI,Flyme等等定製系統裡面都沒見有)

3、有很多第三方app專門用於錄屏功能,是目前一種比較成熟的方案,adb shell screenrecord指令雖然有人說,但是用的不多

再去問谷歌,谷歌第一條就給了我一系列專門用於螢幕錄製的app,各有特色,原文地址:http://www.hongkiat.com/blog/android-screen-recording-apps/

這裡推薦一款我用起來感覺還不錯的一款app:Rec. 

GooglePlay下載地址:https://play.google.com/store/apps/details?id=com.spectrl.rec

如果你沒有翻牆,或者手機沒有安裝谷歌框架,推薦一個可以直接下載其apk包的地址:https://apkpure.com/region-free-apk-download,將上面的url複製到它的大輸入框裡就能下載相應apk了,但是從這裡下載的apk在關閉時會經常彈出一個全屏的廣告

在我魅藍note2(Android 5.1)上可以很流暢的執行,錄出來的視訊也清晰沒有卡頓,30秒鐘視訊大小在2m左右,在天天模擬器上不能進行錄製,有知道原因的朋友希望能告訴我。

這個app可以做很多實用的配置,如下圖:


這裡的size就是輸出視訊檔案大小,它的預設值為手機螢幕的畫素數,比如720x1280,1080x1920,這裡我推薦使用720*1280 8m碼流,這個配置已經可以清晰的看到螢幕上所有的元素了,而且可以減少視訊檔案的大小,延長錄製時間

Bit rate:這裡在1280*720的解析度下使用8m碼流(注意這裡是動態碼流,也就是說你的頁面元素越複雜生成的視訊檔案就越大)已經可以清晰的顯示頁面元素了。這裡要提示一下,8M為最大的動態碼流,如果你的頁面5顏六色或者有大量的圖片要展示,使用8m錄出來很卡的話,建議增大這個碼流率,如果頁面元素非常簡單,顏色也比較統一,就不用管了。

Duration:錄製的時間,預設5分鐘,時間越長相應的視訊檔案大小也就越大,根據實際需要來設定,一般20-30s就足夠應付日常需要(注:這個軟體的免費版最長只支援錄製5分鐘,可以在app內購買)

Audio:是否錄製聲音(注:免費版最長支援錄製30s的聲音)

FileName:錄製好檔案的檔名,預設storage/emulated/0/Movies/screen-recording.mp4,檔案放置的目錄可以在app的setting頁裡設定,第一行就是


這個app有個很人性化的功能,就是在點選了record以後會用toast的形式進行10s的倒計時,在這寶貴的10s中裡可以迅速切換到自己需要錄製的app,並做好準備


如果錄製到一般不想錄了,可以下拉狀態列,點選取消

錄製時間結束以後,可以用手機自帶的檔案瀏覽器storage/emulated/0/Movies/資料夾下瀏覽剛剛錄製好的檔案,並且可以用手機自帶視訊播放器開啟


據我的錄製結果來看,一個畫面元素少,顏色單一的,30秒視訊錄影,320*640,大小約在2-3m,非常節省空間,甚至比一張照片都小

在錄製demo的時候,推薦把觸控位置也展現出來,方便觀看者想象你的手指移動,方法是進入安卓系統的設定->開發人員選項->顯示觸控操作 開啟


這樣在點選螢幕的時候就會有小白點表示出來

那麼一個更復雜的問題,如何將錄製好的MP4檔案轉換成gif動圖呢

我再百度上搜索解決方案,多數都提示我下載一些格式轉換軟體,我用了一下“格式工廠”,和“視訊GIF轉換器1.2.0 免費版”,轉換出來的gif顏色糊成一塊,而且非常卡頓,基本沒法看。如下圖


於是我又去問谷歌

習慣性的開啟谷歌第一個給出的地址http://ezgif.com/video-to-gif

這是一個線上轉換是檔案到gif圖片的網站,雖然是線上轉換,但是卻非常專業,可以調很多有用的引數,最重要的是轉換完後的圖片質量甩上面兩款軟體十條街

步驟也很簡單:

需要先上傳給它一個視訊檔案(60m)一下,大小越低越好


出乎我意料的是在上傳完畢視訊檔案後,這個網站居然還支援視訊的預覽,還可以控制生成gif的時間段,幀數,大小等,我都快感動哭了


Start time 填開始轉換的起始點秒數

End time 填結束時候的秒數,也可以在視訊預覽框裡拖動滑塊然後點選藍色按鈕自動幫你填

size 使用320*AUTO可以達到檔案大小和清晰度的平衡,推薦選擇,預設的比較大,不要使用預設

Frame rate:每秒幀數,預設是10,這樣播放起來比較卡頓,建議選擇20

其他的不用管,直接點選convert然後下載就好,下面給一個我轉好的例子(csdn會對圖片進行一定程度的壓縮,看起來要比我上傳的gif要模糊一點)

注意:同一個gif在ie下和在chrome下顯示的流暢度是不同的,ie下會卡很多