01. 傳統視頻製作的缺點
以往我們都已經習慣了通過專門的軟件來製作視頻，但是這些軟件往往有很高的學習成本，需要花很多的時間去熟悉它的功能、菜單以及它自己製造的一些概念，理解以後，才能隨心所欲的做出想要的效果。
另一方面，這些軟件幾乎都是通過圖形界面來操作，當我們有內容要進行修改時，必須打開這個軟件，手工的去調整。比如你想改掉視頻中一個名詞，只能一個一個地方的去找，而不能像我們在編輯器中直接批量替換。
在過去，我們把這些作爲成本接受了下來。但是現在，隨着各種技術的發展和成熟，我們多了一個選擇。
02. 用 Web 全景錄製來製作視頻
騰訊云云函數上線了基於 Chrome Web 全景錄製服務，只需要用戶提供一個可供訪問的公網鏈接，可以自動進行頁面渲染、錄製、轉碼，並實時生成視頻文件。
這個服務可以用來錄製網課、也可以用來生成錄製視頻，用這種方式生成視頻的好處是：
**1. 只要在網頁上看得見的，聽得見的，都可以直接錄製成視頻。**不存在「因爲你用的這個視頻製作軟件它不支持、或者功能太多你不會用，而導致最終沒有辦法實現」的情況發生。
**2. 對於程序員來講，可以重用整個 Web 技術棧來製作視頻，而無需學習新而視頻的預覽和調整也會變得很簡單，**直接通過瀏覽器就可以，速度快負載低，不用把電腦風扇弄得呼呼轉。
3. 從更高層次上來講，全景錄製方案把「內容製作」和「視頻生成」分開了，可以讓我們的精力重新迴歸到前者，而不是在創作時動不動就要去翻手冊看菜單和參數再哪個地方。
還有一個不得不說的優點，就是我們可以很容易的做到網頁內容自動化，而錄製接口雲函數已經準備好了，所以整個過程很容易做到全程自動化，完全不需要人工干預。這對批量製作視頻有非常大的優勢。
03. WindMark，用 Markdown 和 tailwind 「寫」視頻
我們就在雲函數的全景錄製服務基礎上，開發了 WindMark 這個工具。要讓普通人書寫 HTML 來組織內容的難度太高，所以我們退了一步，使用 Markdown 和 tailwind 來組織內容。說起裏比較抽象，大家可以看看這個不到兩分鐘的演示視頻，點擊查看詳細視頻 。（因爲全景錄製服務尚未支持海外節點，所以我們把錄製功能分離爲了獨立服務「錄像姬」，稍後會內置到 WindMark 裏邊）
- 如果你對這個產品感興趣，可以訪問 windmark.pro 實際體驗一下，我還在 GitHub 上有一個項目，開源了不少帶動畫效果的視頻源文件，點擊 GitHub 地址立即查看。
新世界的大門
其實 WindMark 針對的只是一個非常小的場景，全景錄製打開的，卻是一扇新世界的大門，它其實意味着今後 Web 就略等於視頻了。比如我們可以：
- 用 CSS 和 JS 編寫炫酷的動畫特效，根據輸入的品牌自動生成 OP 和 ED 視頻，賣給企業和自媒體；
- 通過 Live2D Web SDK 對模型編寫劇本，並錄製成動畫短片；
- 實時抓取數據並生成圖表，自動生成視頻併發布到各個平臺；
如何使用全景錄製服務，文檔其實已經很詳細了。下邊我們就來講講在做 WindMark 這類全新的視頻生成工具（後文稱全景視頻生成工具）過程中，發現的需要注意的一些地方：
1. 內容組織
全景視頻生成工具的重點不是視頻，而是內容組織。所以更多的是去思考如何組織內容。常規的圖片和文字大家可能都很熟悉了，但 *音頻和視頻之間按什麼順序來播放，是否可以同時播放，音視頻和字幕如何同步等新問題是更需要考慮的*。
2. 自播放
被錄製的網頁必須有一套自動播放機制，不然我們錄製的就是靜態頁面了。一般來講，需要確定一個驅動頁面更新的元素。在 WindMark 中，這個元素是音視頻，一旦它們播放完，就會觸發翻頁，進入新的內容。而如果你做的是動畫，那麼就應該在動畫完成後開始觸發。在編寫代碼之前把這個問題想清楚可以節省不少時間。
3. 不確定性和預加載
最開始我們沒有注意到這個問題，因爲在本地測試，訪問都很快。但是當我們把服務部署到公網上以後，我發現通過公開網絡錄製充滿了不確定性。比如我們經常就會出現網頁裏面的資源文件，加載的時候卡住了。這樣就會造成錄製的視頻也會卡頓，甚至停到一個地方不再往前播放了。
這時候我們就需要做預加載了。其實是一個很簡單的技術，在做網頁遊戲的時候用得已經很多了。把資源文件提取出來全部用瀏覽器訪問一遍緩存上，然後再開始播放時，就不容易卡住了。
4. 開始錄製開關
預加載解決了一個問題，但又帶來了一個新的問題：在資源加載完成前，網頁一直不播放，會多出來一段視頻。這時候我們可以採用手動調用開始開關的方式來錄製。根據文檔，在發起視頻錄製請求時候，傳遞一個 ManualStart 爲 true 的參數，這樣全景錄製服務就不會自動開始錄製。而在資源文件的預加載完成後，再調用 window.startRecord 纔會開始錄製。
5. 停止錄製開關
同樣的，我們還有一個播放時長不確定的問題。嚴格來說，我們的網頁每一次在進行播放的時候，它的時間都是不一樣的。它不像完全在本地，播完一個音頻後接着就是另一個音頻。它中間還有一個加載等待時間，這個時間根據網絡的情況會不同。這讓我們很難預估時長。不過和 window.startRecord 類似，全景錄製服務也提供 window.stopRecord，這樣我們在網頁播放完成後可以主動調用這個方法來停止錄製（此方法我們還沒來得及測試）。
6. 字體
我們在進行錄製的時候，實際上是從全景服務容器裏的瀏覽器去訪問網頁。裝在我們電腦上的字體並不會被帶過去，所以 網頁上用的字體要和瀏覽器內置字體對應，否則錄製下來效果就會和你電腦上預覽的相差很大。如果是英文字體的話，我們可以用過 webfont 來解決。中文字體的話，目前騰訊默認支持宋體和文泉譯文，如果你需要其他的字體，可以採取鏡像的形式，我也和雲函數團隊反饋是否有更優雅的的使用姿勢，期待他們給出好的解決方案。
7. 冷啓動
在測試早期我們還遇到了第一次發起錄製請求時太慢，導致 API 網關超時出現 504 錯誤。後來全景服務優化過後，已經很少遇到了。如果你依然碰到了，可以調整下 API 網關的後端超時時間。
04. 更大的想象空間
當我給騰訊云云函數的同學提「是否支持 Puppeteer 腳本」的建議時，他們似乎已經在後續版本中考慮了，這會激活更多的場景。全景錄製服務只是攝像機，但有了腳本支持，它就變成了自帶攝像頭的機器人，我們甚至可以寫一個腳本在網上隨機衝浪，然後把整個過程錄下來直播。
總之，全景錄製是個很有前途又很好玩的服務，沒有試過的同學可以嘗試下。
本文作者：Easy，互聯網科技博主（微博賬號：Easy），方糖氣球（ftqq.com）博主，系列課程主講人，課貓互動課程平臺負責人。
如何接入使用「全景錄製」方案？
⽬前已經有較多企業逐步上線使用，如果您也想參與此⽅案的測試使用，點此完成內測表單填寫，將提供大客戶專屬 1 對 1 服務，我們將在 1-3 個工作日與聯繫，感謝您的關注與支持。
識別下方 👇 海報二維碼，瞭解更多方案詳情，立即體驗使用！
更有低至 1 元專屬特惠資源包，限時領取！
05. 音視頻實時互動 Serverless 系列解決方案
- 雲函數和 Headless Chrome 進行實時渲染錄製合流；
- 使用 Serverless 雲函數爲 TRTC 輸入在線媒體流；
- 使用 Serverless 雲函數實現 TRTC 單流 / 混流錄製；
One More Thing
立即體驗騰訊雲 Serverless Demo，領取 Serverless 新用戶禮包 👉 騰訊雲 Serverless 新手體驗
歡迎訪問：Serverless 中文網！