基于云函數(shù)全景錄制，用Markdown和Tailwind CSS「寫(xiě)」視頻

01.

傳統(tǒng)視頻制作的缺點(diǎn)

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

另一方面，這些軟件幾乎都是通過(guò)圖形界面來(lái)操作，當(dāng)我們有內(nèi)容要進(jìn)行修改時(shí)，必須打開(kāi)這個(gè)軟件，手工的去調(diào)整。比如你想改掉視頻中一個(gè)名詞，只能一個(gè)一個(gè)地方的去找，而不能像我們?cè)诰庉嬈髦兄苯优刻鎿Q。

在過(guò)去，我們把這些作為成本接受了下來(lái)。但是現(xiàn)在，隨著各種技術(shù)的發(fā)展和成熟，我們多了一個(gè)選擇。

02.

用Web全景錄制來(lái)制作視頻

騰訊云云函數(shù)上線了基于Chrome Web全景錄制服務(wù)，只需要用戶提供一個(gè)可供訪問(wèn)的公網(wǎng)鏈接，可以自動(dòng)進(jìn)行頁(yè)面渲染、錄制、轉(zhuǎn)碼，并實(shí)時(shí)生成視頻文件。

這個(gè)服務(wù)可以用來(lái)錄制網(wǎng)課、也可以用來(lái)生成錄制視頻，用這種方式生成視頻的好處是：

1.只要在網(wǎng)頁(yè)上看得見(jiàn)的，聽(tīng)得見(jiàn)的，都可以直接錄制成視頻。不存在「因?yàn)槟阌玫倪@個(gè)視頻制作軟件它不支持、或者功能太多你不會(huì)用，而導(dǎo)致最終沒(méi)有辦法實(shí)現(xiàn)」的情況發(fā)生。

2.對(duì)于程序員來(lái)講，可以重用整個(gè)Web技術(shù)棧來(lái)制作視頻，而無(wú)需學(xué)習(xí)新的知識(shí)。而視頻的預(yù)覽和調(diào)整也會(huì)變得很簡(jiǎn)單，直接通過(guò)瀏覽器就可以，速度快負(fù)載低，不用把電腦風(fēng)扇弄得呼呼轉(zhuǎn)。

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

還有一個(gè)不得不說(shuō)的優(yōu)點(diǎn)，就是我們可以很容易的做到網(wǎng)頁(yè)內(nèi)容自動(dòng)化，而錄制接口云函數(shù)已經(jīng)準(zhǔn)備好了，所以整個(gè)過(guò)程很容易做到全程自動(dòng)化，完全不需要人工干預(yù)。這對(duì)批量制作視頻有非常大的優(yōu)勢(shì)。

03.

WindMark，

用Markdown和tailwind「寫(xiě)」視頻

我們就在云函數(shù)的全景錄制服務(wù)基礎(chǔ)上，開(kāi)發(fā)了WindMark這個(gè)工具。要讓普通人書(shū)寫(xiě)HTML來(lái)組織內(nèi)容的難度太高，所以我們退了一步，使用Markdown和tailwind來(lái)組織內(nèi)容。說(shuō)起里比較抽象，大家可以看看這個(gè)不到兩分鐘的演示視頻。（因?yàn)槿颁浿品?wù)尚未支持海外節(jié)點(diǎn)，所以我們把錄制功能分離為了獨(dú)立服務(wù)「錄像姬」，稍后會(huì)內(nèi)置到WindMark里邊）

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

如果你對(duì)這個(gè)產(chǎn)品感興趣，可以訪問(wèn)windmark.pro實(shí)際體驗(yàn)一下，我還在GitHub上有一個(gè)項(xiàng)目，開(kāi)源了不少帶動(dòng)畫(huà)效果的視頻源文件，復(fù)制下方鏈接，訪問(wèn)查看。

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

新世界的大門

其實(shí)WindMark針對(duì)的只是一個(gè)非常小的場(chǎng)景，全景錄制打開(kāi)的，卻是一扇新世界的大門，它其實(shí)意味著今后Web就略等于視頻了。比如我們可以：

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

·通過(guò)Live2D Web SDK對(duì)模型編寫(xiě)劇本，并錄制成動(dòng)畫(huà)短片；

·實(shí)時(shí)抓取數(shù)據(jù)并生成圖表，自動(dòng)生成視頻并發(fā)布到各個(gè)平臺(tái)；

如何使用全景錄制服務(wù)，文檔其實(shí)已經(jīng)很詳細(xì)了。下邊我們就來(lái)講講在做WindMark這類全新的視頻生成工具（后文稱全景視頻生成工具）過(guò)程中，發(fā)現(xiàn)的需要注意的一些地方：

1.內(nèi)容組織

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

2.自播放

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

3.不確定性和預(yù)加載

最開(kāi)始我們沒(méi)有注意到這個(gè)問(wèn)題，因?yàn)樵诒镜販y(cè)試，訪問(wèn)都很快。但是當(dāng)我們把服務(wù)部署到公網(wǎng)上以后，我發(fā)現(xiàn)通過(guò)公開(kāi)網(wǎng)絡(luò)錄制充滿了不確定性。比如我們經(jīng)常就會(huì)出現(xiàn)網(wǎng)頁(yè)里面的資源文件，加載的時(shí)候卡住了。這樣就會(huì)造成錄制的視頻也會(huì)卡頓，甚至停到一個(gè)地方不再往前播放了。

這時(shí)候我們就需要做預(yù)加載了。其實(shí)是一個(gè)很簡(jiǎn)單的技術(shù)，在做網(wǎng)頁(yè)游戲的時(shí)候用得已經(jīng)很多了。把資源文件提取出來(lái)全部用瀏覽器訪問(wèn)一遍緩存上，然后再開(kāi)始播放時(shí)，就不容易卡住了。

4.開(kāi)始錄制開(kāi)關(guān)

預(yù)加載解決了一個(gè)問(wèn)題，但又帶來(lái)了一個(gè)新的問(wèn)題：在資源加載完成前，網(wǎng)頁(yè)一直不播放，會(huì)多出來(lái)一段視頻。這時(shí)候我們可以采用手動(dòng)調(diào)用開(kāi)始開(kāi)關(guān)的方式來(lái)錄制。根據(jù)文檔，在發(fā)起視頻錄制請(qǐng)求時(shí)候，傳遞一個(gè)ManualStart為true的參數(shù)，這樣全景錄制服務(wù)就不會(huì)自動(dòng)開(kāi)始錄制。而在資源文件的預(yù)加載完成后，再調(diào)用window.startRecord才會(huì)開(kāi)始錄制。

5.停止錄制開(kāi)關(guān)

同樣的，我們還有一個(gè)播放時(shí)長(zhǎng)不確定的問(wèn)題。嚴(yán)格來(lái)說(shuō)，我們的網(wǎng)頁(yè)每一次在進(jìn)行播放的時(shí)候，它的時(shí)間都是不一樣的。它不像完全在本地，播完一個(gè)音頻后接著就是另一個(gè)音頻。它中間還有一個(gè)加載等待時(shí)間，這個(gè)時(shí)間根據(jù)網(wǎng)絡(luò)的情況會(huì)不同。這讓我們很難預(yù)估時(shí)長(zhǎng)。不過(guò)和window.startRecord類似，全景錄制服務(wù)也提供window.stopRecord，這樣我們?cè)诰W(wǎng)頁(yè)播放完成后可以主動(dòng)調(diào)用這個(gè)方法來(lái)停止錄制（此方法我們還沒(méi)來(lái)得及測(cè)試）。

6.字體

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

7.冷啟動(dòng)

在測(cè)試早期我們還遇到了第一次發(fā)起錄制請(qǐng)求時(shí)太慢，導(dǎo)致API網(wǎng)關(guān)超時(shí)出現(xiàn)504錯(cuò)誤。后來(lái)全景服務(wù)優(yōu)化過(guò)后，已經(jīng)很少遇到了。如果你依然碰到了，可以調(diào)整下API網(wǎng)關(guān)的后端超時(shí)時(shí)間。

04.

更大的想象空間

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

總之，全景錄制是個(gè)很有前途又很好玩的服務(wù)，沒(méi)有試過(guò)的同學(xué)可以嘗試下。