如何將網頁渲染視頻保存爲mp4 - Diaporama

我有一組圖像，我創建了一個Diaporama視頻，因此我可以使用Ken Burns效果和glsl轉場。該視頻運行的是一個json文件，該文件定義了圖像的時間軸，持續時間以及轉換到下一個圖像的時間。該視頻然後在瀏覽器中呈現。我正在尋找一種方法來將此呈現的幻燈片式視頻保存爲實際的mp4文件。任何幫助是極大的讚賞。如何將網頁渲染視頻保存爲mp4 - Diaporama

來源

2015-11-13 Jon Stevens

我從來沒有見過一個JavaScript MP4轉換器。很確定沒有這樣的事情，因爲JavaScript是一種編程語言，而mp4是一種文件類型。但是，您可以在計算機上運行一個程序，以捕捉屏幕上的視頻。一旦進入視頻格式，你應該能夠找到一個轉換器。 – PHPglue

其實Chrome有一些實驗性的WebRTC API可以捕捉[用戶的屏幕]（https://developer.chrome.com/extensions/desktopCapture）。它需要從特權代碼中調用（來自擴展）。然後，您可以將流保存爲ogv並將其重新編碼爲mp4 – Kaiido

Ya，這就是我的想法。只是想看看有人以前寫過些什麼東西去做。不過這是個好主意。或者，我正在考慮通過phantomjs打開網頁，然後每秒渲染幾張圖像，並通過ffmpeg循環所有圖像來構建視頻。 –

我想通了。我正在運行一個phantomjs runner.js腳本，該腳本打開網頁並呈現每秒25張圖像，然後使用ffmpeg從這些圖像中構建mp4。

Phantomjs runner.js

var page = require('webpage').create(); 
page.viewportSize = { width: 640, height: 480 }; 

page.open('http://www.goodboydigital.com/pixijs/examples/12-2/', function() { 
    setTimeout(function() { 
    // Initial frame 
    var frame = 0; 
    // Add an interval every 25th second 
    setInterval(function() { 
     // Render an image with the frame name 
     console.log("Image: " + frame); 
     page.render('frames/image-'+(frame++)+'.png', { format: "png" }); 
     // Exit after 50 images 
     if(frame > 50) { 
     phantom.exit(); 
     } 
    }, 25); 
    }, 666); 
});

和命令來運行：

phantomjs runner.js && ffmpeg -y -start_number 0 -i frames/image-%d.png -c:v libx264 -r 25 -pix_fmt yuv420p output.mp4

來源

2015-11-13 14:35:53

如何將網頁渲染視頻保存爲mp4 - Diaporama

回答

相關問題