如何将网页渲染视频保存为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

回答

相关问题