在後端錄製HTML5 WebGL的視頻

Question

對於不支持HTML5 WebGL的瀏覽器，是否可以錄製HTML5 WebGL視頻播放的視頻（包括聲音）？例如，是否有可能在後臺錄製SeriouslyJS（http://seriouslyjs.org/）的內容，這種格式將被大多數瀏覽器/設備所接受？

我做了很多後端的東西，但從來沒有涉及到後端GUI的東西......我感謝任何人都可以給我的幫助。

Answer 1

您可以使用屏幕截圖軟件（如ScreenFlow）錄製一個或多個靜態視頻，然後將其作爲視頻呈現給未啓用的瀏覽器。在JavaScript方面，你需要「回退」到視頻。僞代碼隨之而來：

var canvas = document.getElementByID('webgl-canvas'); 
var webgl = canvas.getContext("experimental-webgl"); 
if (!webgl) { 
    /* 
    create a <video> element and replace the <canvas> 
    tag with it. Or, have the <video> tag already 
    created and hidden with CSS, and display it at this 
    time. 
    */ 
} else { 
    /* 
    Proceed with the interactive, WebGL-enabled version. 
    */ 
} 

但是，視頻顯然會受到技術的限制：這是一個預重新編碼，非交互式視頻。爲了實現僞交互式風格（只要按下按鈕即可），您可以使用HTML5 media API在多個預先錄製的視頻之間動態切換，但我不知道這會在多大程度上起作用由於帶寬和同步問題而實踐。您可能需要驗證每個視頻在啓動序列之前是否有可接受的緩衝量。

注意：上面的提議假定至少支持HTML5，即使代替WebGL。如果您的目標瀏覽器不支持HTML5，我認爲您可能會遇到像YouTube視頻一樣簡單的問題。

Answer 2

此問題的答案可能是in this blog post。作者使用canvas.toDataURL（）方法將每個幀發送到他創建的簡單node.js實例。 node.js實例將每個幀保存爲PNG文件。在保存所有幀之後，作者似乎使用類似ffmpeg的內容從圖像生成視頻。然後，您可以將此視頻作爲實際動畫的替代品。這是一個很好的解決方法，但對作者來說似乎很好。