基于云函數全景錄制，用Markdown和Tailwind CSS「寫」視頻

01.

傳統視頻制作的缺點

以往我們都已經習慣了通過專門的軟件來制作視頻，但是這些軟件往往有很高的學習成本，需要花很多的時間去熟悉它的功能、菜單以及它自己制造的一些概念，理解以后，才能隨心所欲的做出想要的效果。

另一方面，這些軟件幾乎都是通過圖形界面來操作，當我們有內容要進行修改時，必須打開這個軟件，手工的去調整。比如你想改掉視頻中一個名詞，只能一個一個地方的去找，而不能像我們在編輯器中直接批量替換。

在過去，我們把這些作為成本接受了下來。但是現在，隨著各種技術的發(fā)展和成熟，我們多了一個選擇。

02.

用Web全景錄制來制作視頻

騰訊云云函數上線了基于Chrome Web全景錄制服務，只需要用戶提供一個可供訪問的公網鏈接，可以自動進行頁面渲染、錄制、轉碼，并實時生成視頻文件。

這個服務可以用來錄制網課、也可以用來生成錄制視頻，用這種方式生成視頻的好處是：

1.只要在網頁上看得見的，聽得見的，都可以直接錄制成視頻。不存在「因為你用的這個視頻制作軟件它不支持、或者功能太多你不會用，而導致最終沒有辦法實現」的情況發(fā)生。

2.對于程序員來講，可以重用整個Web技術棧來制作視頻，而無需學習新的知識。而視頻的預覽和調整也會變得很簡單，直接通過瀏覽器就可以，速度快負載低，不用把電腦風扇弄得呼呼轉。

3.從更高層次上來講，全景錄制方案把「內容制作」和「視頻生成」分開了，可以讓我們的精力重新回歸到前者，而不是在創(chuàng)作時動不動就要去翻手冊看菜單和參數再哪個地方。

還有一個不得不說的優(yōu)點，就是我們可以很容易的做到網頁內容自動化，而錄制接口云函數已經準備好了，所以整個過程很容易做到全程自動化，完全不需要人工干預。這對批量制作視頻有非常大的優(yōu)勢。

03.

WindMark，

用Markdown和tailwind「寫」視頻

我們就在云函數的全景錄制服務基礎上，開發(fā)了WindMark這個工具。要讓普通人書寫HTML來組織內容的難度太高，所以我們退了一步，使用Markdown和tailwind來組織內容。說起里比較抽象，大家可以看看這個不到兩分鐘的演示視頻。（因為全景錄制服務尚未支持海外節(jié)點，所以我們把錄制功能分離為了獨立服務「錄像姬」，稍后會內置到WindMark里邊）

視頻地址：https://www.bilibili.com/video/BV1xo4y1Q78g

如果你對這個產品感興趣，可以訪問windmark.pro實際體驗一下，我還在GitHub上有一個項目，開源了不少帶動畫效果的視頻源文件，復制下方鏈接，訪問查看。

GitHub地址：https://github.com/easychen/windmark-practice

新世界的大門

其實WindMark針對的只是一個非常小的場景，全景錄制打開的，卻是一扇新世界的大門，它其實意味著今后Web就略等于視頻了。比如我們可以：

·用CSS和JS編寫炫酷的動畫特效，根據輸入的品牌自動生成OP和ED視頻，賣給企業(yè)和自媒體；

·通過Live2D Web SDK對模型編寫劇本，并錄制成動畫短片；

·實時抓取數據并生成圖表，自動生成視頻并發(fā)布到各個平臺；

如何使用全景錄制服務，文檔其實已經很詳細了。下邊我們就來講講在做WindMark這類全新的視頻生成工具（后文稱全景視頻生成工具）過程中，發(fā)現的需要注意的一些地方：

1.內容組織

全景視頻生成工具的重點不是視頻，而是內容組織。所以更多的是去思考如何組織內容。常規(guī)的圖片和文字大家可能都很熟悉了，但音頻和視頻之間按什么順序來播放，是否可以同時播放，音視頻和字幕如何同步等新問題是更需要考慮的。

2.自播放

被錄制的網頁必須有一套自動播放機制，不然我們錄制的就是靜態(tài)頁面了。一般來講，需要確定一個驅動頁面更新的元素。在WindMark中，這個元素是音視頻，一旦它們播放完，就會觸發(fā)翻頁，進入新的內容。而如果你做的是動畫，那么就應該在動畫完成后開始觸發(fā)。在編寫代碼之前把這個問題想清楚可以節(jié)省不少時間。

3.不確定性和預加載

最開始我們沒有注意到這個問題，因為在本地測試，訪問都很快。但是當我們把服務部署到公網上以后，我發(fā)現通過公開網絡錄制充滿了不確定性。比如我們經常就會出現網頁里面的資源文件，加載的時候卡住了。這樣就會造成錄制的視頻也會卡頓，甚至停到一個地方不再往前播放了。

這時候我們就需要做預加載了。其實是一個很簡單的技術，在做網頁游戲的時候用得已經很多了。把資源文件提取出來全部用瀏覽器訪問一遍緩存上，然后再開始播放時，就不容易卡住了。

4.開始錄制開關

預加載解決了一個問題，但又帶來了一個新的問題：在資源加載完成前，網頁一直不播放，會多出來一段視頻。這時候我們可以采用手動調用開始開關的方式來錄制。根據文檔，在發(fā)起視頻錄制請求時候，傳遞一個ManualStart為true的參數，這樣全景錄制服務就不會自動開始錄制。而在資源文件的預加載完成后，再調用window.startRecord才會開始錄制。

5.停止錄制開關

同樣的，我們還有一個播放時長不確定的問題。嚴格來說，我們的網頁每一次在進行播放的時候，它的時間都是不一樣的。它不像完全在本地，播完一個音頻后接著就是另一個音頻。它中間還有一個加載等待時間，這個時間根據網絡的情況會不同。這讓我們很難預估時長。不過和window.startRecord類似，全景錄制服務也提供window.stopRecord，這樣我們在網頁播放完成后可以主動調用這個方法來停止錄制（此方法我們還沒來得及測試）。

6.字體

我們在進行錄制的時候，實際上是從全景服務容器里的瀏覽器去訪問網頁。裝在我們電腦上的字體并不會被帶過去，所以網頁上用的字體要和瀏覽器內置字體對應，否則錄制下來效果就會和你電腦上預覽的相差很大。如果是英文字體的話，我們可以用過webfont來解決。中文字體的話，目前騰訊默認支持宋體和文泉譯文，如果你需要其他的字體，可以采取鏡像的形式，我也和云函數團隊反饋是否有更優(yōu)雅的的使用姿勢，期待他們給出好的解決方案。

7.冷啟動

在測試早期我們還遇到了第一次發(fā)起錄制請求時太慢，導致API網關超時出現504錯誤。后來全景服務優(yōu)化過后，已經很少遇到了。如果你依然碰到了，可以調整下API網關的后端超時時間。

04.

更大的想象空間

當我給騰訊云云函數的同學提「是否支持Puppeteer腳本」的建議時，他們似乎已經在后續(xù)版本中考慮了，這會激活更多的場景。全景錄制服務只是攝像機，但有了腳本支持，它就變成了自帶攝像頭的機器人，我們甚至可以寫一個腳本在網上隨機沖浪，然后把整個過程錄下來直播。

總之，全景錄制是個很有前途又很好玩的服務，沒有試過的同學可以嘗試下。