blocks|key|2718014|text|最接近“不理想”的方法想法(手动制作-使用JS并保存每个单独的视频帧%2B稍后将其全部绑定在一起)+=>遵循https://stackoverflow.com/a/4936358/1110661|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2718015|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/4936358/1110661^0|1G|17|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

The closest 'not ideal' approach idea (making it manually - using JS and saving each separate video frame + binding it all together later on) => following <a href="https://stackoverflow.com/a/4936358/1110661">https://stackoverflow.com/a/4936358/1110661</a>

blocks|key|2718049|text|为此，您可以使用Linux+Xvfb+(Linux虚拟帧缓冲区)。然后在该X服务器上运行浏览器，并从中制作ffmpeg记录。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2718050|它的包装器是：https://github.com/leonid-shevtsov/headless|2718051|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/leonid-shevtsov/headless^0|1H|6|0|7|17|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

You could use the Linux Xvfb (Linux virtual framebuffer) for this. Then make a browser run on that X server, and make <code>ffmpeg</code> record from it.

A wrapper for this is: <a href="https://github.com/leonid-shevtsov/headless" rel="nofollow">https://github.com/leonid-shevtsov/headless</a>

blocks|key|2718126|text|我已经创建/找到了这个问题的解决方案。正如一些人已经提到的，xvfb就是答案，是的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2718127|我已经创建了一个docker容器，它与xvfb，google+chrome和ffmpeg，nodejs一起运行。|2718128|我使用nodejs和chrome-remote-interface+与浏览器进行通信。|offset|length|2718129|实际上，我执行以下步骤：|2718130|2718131|启动停靠容器。|ordered-list-item|2718132|启动chrome(尽可能无头)|2718133|使用chrome-|2718134|-interface连接到chrome|2718135|打开动画url|2718136|准备动画网页通知nodejs(通过控制台)动画准备就绪启动ffmpeg+(从nodejs)和浏览器中的动画。|2718137|process+|2718138|视频|2718139|不幸的是，由于许可证问题，我不能发布整个代码，但我可以粘贴其中的一部分。|2718140|如果有人有任何问题，请告诉我。|2718141|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/cyrus-and/chrome-remote-interface^0|0|0|A|O|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1F|8|@]|9|@$F|1G|G|1H|1|1I]]|A|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1L|8|@]|9|@]|A|$]]|$1|N|3|O|5|M|7|1M|8|@]|9|@]|A|$]]|$1|P|3|Q|5|M|7|1N|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1O|8|@]|9|@]|A|$]]|$1|T|3|U|5|M|7|1P|8|@]|9|@]|A|$]]|$1|V|3|W|5|M|7|1Q|8|@]|9|@]|A|$]]|$1|X|3|Y|5|M|7|1R|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1S|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1T|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|1U|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|16|$17|$5|18|19|1A|A|$1B|1C]]]]

I have created/found a solution to this problem. As some people already mentioned xvfb is the answer and yes it is. 

I've created a docker container, which is running with xvfb, google chrome and ffmpeg, nodejs pre-installed. 

I use nodejs and <a href="https://github.com/cyrus-and/chrome-remote-interface" rel="noreferrer">chrome-remote-interface </a> to communicate with the browser. 

Practically I execute the following steps:

<ol>
<li>start the docker container. </li>
<li>start chrome(as headless as possible)</li>
<li>use chrome-remote-interface to connect to chrome</li>
<li>open the animation url</li>
<li>prepare the animation the web-page notifies nodejs(through console)
that the animation is ready start ffmpeg (from nodejs) and the
animation in the browser. </li>
<li>process the video</li>
</ol>

I can't publish the whole code unfortunately due to license issues, but I can paste parts of it. 

If anyone has questions, let me know.

blocks|key|2507644|text|只是与一些代码略有不同的另一种方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2507645|我用PhantomJS和它的截图功能做到了这一点。|2507646|基本上，你通过headerless浏览器访问你的动画，并一直截屏，直到你的动画完成。您可以使用全局变量来指示动画是否已完成。|2507647|当您有您的屏幕截图，只需使用FFMPEG来生成视频。|2507648|简单的例子：|2507649|PhantomJS：|2507650|var+running;
var+c+=+1;

var+intervalId+=+setInterval(function(){

++++running+=+page.evaluate(function(){
++++++++return+window.RUNNING
++++});

++++if+(running)+{
++++++++console.log('still+running:+',+running);
++++++++page.render('temp/screenshot'%2Bc%2B'.png');
++++}+else+{
++++++++clearInterval(intervalId);
++++++++console.log('still+running:+',+running);
++++++++phantom.exit(0);
++++};

++++c%2B%2B;
},+100);|code-block|syntax|javascript|2507651|使用FFMPEG，您可以执行以下操作：|2507652|ffmpeg+-y+-r+25+-i+temp/screenshot%2501d.png+-c:v+libx264+-r+25+-pix_fmt+yuv420p+video.mp4|2507653|其中25是FPS+(每秒帧数)，您可以根据需要进行调整。|2507654|我希望它能对某些人有用。|2507655|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|18|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

Just another way slightly different with some code.

I manage to do that with PhantomJS and its screenshot feature.

Basically you access your animation through headerless browser and keep doing screenshots till your animation finishes. You can have a global var to indicate if the animation is done or not.

When you have your screenshots just use FFMPEG to generate the video.

Simple example:

PhantomJS:

<pre><code>var running;
var c = 1;

var intervalId = setInterval(function(){

 running = page.evaluate(function(){
 return window.RUNNING
 });

 if (running) {
 console.log('still running: ', running);
 page.render('temp/screenshot'+c+'.png');
 } else {
 clearInterval(intervalId);
 console.log('still running: ', running);
 phantom.exit(0);
 };

 c++;
}, 100);
</code></pre>

With FFMPEG you can do:

<pre><code>ffmpeg -y -r 25 -i temp/screenshot%01d.png -c:v libx264 -r 25 -pix_fmt yuv420p video.mp4
</code></pre>

Where 25 is the FPS (frames per second) which you can adjust as you need.

I hope it can be useful to someone.

I have one big question: HOW TO RECORD A HTML5 ANIMATION TO VIDEO without human interaction? 
We're looking for a open/source or even proprietary solution. 

The use-case:

We want to start a project where we will create Html5 animations. The animations will be a short technical presentation (2-5 Minutes) that will include all kind of animations: lines, charts, areas. It will have also an audio track.

To generate the animations we'll use different JS libraries: 

<ul>
<li><a href="http://highcharts.com" rel="noreferrer">http://highcharts.com</a> </li>
<li><a href="http://raphaeljs.com" rel="noreferrer">http://raphaeljs.com</a></li>
<li><a href="http://greensock.com" rel="noreferrer">http://greensock.com</a></li>
<li>... other as well</li>
</ul>

We need to be able to record this animation and save it as a mp4 video or equivalent. 

The big question is: HOW TO DO IT? 

I see 2 options:

<ol>
<li>Record it with PhantomJs</li>
</ol>

Based on my research the FPS is almost impossible to control. I've ran a few tests, the results are not very good. Greensock timeline could help but we need to have flexibility with the JS libraries we use.

<ol start="2">
<li>Play it in the browser and record it with some tool</li>
</ol>

This would be awesome if we can automate it. 

Thanks in advance!

References used in my research

<ul>
<li><a href="https://groups.google.com/forum/#!msg/phantomjs/wluVGGjhL90/oGBXqh7QP44J" rel="noreferrer">https://groups.google.com/forum/#!msg/phantomjs/wluVGGjhL90/oGBXqh7QP44J</a></li>
<li><a href="http://mindthecode.com/recording-a-website-with-phantomjs-and-ffmpeg" rel="noreferrer">http://mindthecode.com/recording-a-website-with-phantomjs-and-ffmpeg</a></li>
<li><a href="http://www.ultramegatech.com/2010/09/record-html-canvas-animations-to-video/" rel="noreferrer">http://www.ultramegatech.com/2010/09/record-html-canvas-animations-to-video/</a></li>
<li><a href="http://www.tweetbeam.com/blog/generating-facebook-lookback-style-dynamic-videos-html5-using-phantomjs-ffmpeg/" rel="noreferrer">http://www.tweetbeam.com/blog/generating-facebook-lookback-style-dynamic-videos-html5-using-phantomjs-ffmpeg/</a></li>
</ul>

Record a html5 animation to video - without human interaction

服务器

容器

Docker

Linux

HTML5

我有一个很大的问题：如何在没有人工交互的情况下将HTML5动画录制到视频中？我们正在寻找一个开放/源代码甚至是专有的解决方案。使用案例：我们想开始一个项目，在那里我们将创建Html5动画。动画将是一个简短的技术演示文稿(2-5分钟)，其中将包括各种动画:线条，图表，区域。它还会有一个音轨。为了生成动画，我们将使用不同的...

问将html5动画录制到视频中-无需人工交互
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将html5动画录制到视频中-无需人工交互EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将html5动画录制到视频中-无需人工交互
EN