We are creating animations using HTML5 + Javascript. Now, we'd like to convert these animations to video files (MPEG4, or other, doesn't matter) so that browserly challenged people could also see the animations. Animations contain an audio track.
We are looking for solutions where HTML page would be rendered and recorded on the server side. I know there exist tools for rendering web page thumbnails etc. static images already. However, in our use case we should output a video file.
What options are there? Is headless X server + Firefox a way to go? Preferably we'd be running this in a cloud (Amazon EC2).
Also if there something special we'd need to think when playing animation in non-real-time speeds, I'd like to hear - e.g. syncing HTML5 audio with animation.
Just to note that we have solved this problem by
Running Firefox on a headless server. A server with a decent graphics card.
Having a Selenium Python control script to start/stop rendering
A custom rendering loop which will use Firefox's XPCom API to feed <canvas> raw pixels directly in the encoding pipeline
A custom Javascript rendering loop where clock does not come from a real clock, but it slices frames to the renderer on a stable framerate which is not real-time
Quite a complex system, so doesn't fit into one Answer box :(
One thing that might work, depending on your animation, would be to essentially create an animated gif. With enough still images of your animation strung together, you should be able to turn those into a video with the right software. This is a rather brute-force solution, but if you can advance through your animation in a "frame-by-frame" fashion, it might work.
Sounds interesting. I've done a similar thing with the QtWebKit library that requires a headless X server to run. What I was doing was converting web pages to PDF on a large scale. It might make sense to search for some webkit2pdf tools to see an example that you can build off of.
I would take a look at the library and combine it with another recording solution.
In terms of tooling I've had a pretty decent experience with these Ruby tools:
the headless gem supports video capturing with ffmpeg
capybara will allow you to drive e.g. firefox.
I have NO idea about how they deal with audio though
Related
I have a responsive (RWD) website which works OK on mobile devices. My problem is that pictures are sort of "heavy" on smartphones and uselessly large on older phones.
I know there are plenty of tools either offline or online (such as: http://www.resizeyourimage.com/) to resize pictures and I know I could roll my own image resizer with GD and the like (PHP here), but I was wondering if someone here is aware of a way to have images automatically resized.
For example by piping them through a proxy of some kind, such as:
http://cloudservice/w_320/http://myserver/mypic.jpg" />
A free service highly preferrable.
This way I wouldn't have to retrofit old pictures nor is it necessary to provide multiple versions of the same picture.
I hope my question makes sense...
There are many such services, and a similar question has been asked before.
All reliable solutions will also requires a tiny bit of client-side javascript. Cookies don't work on the first page load (which is most of them), and sniffing gives useless data if you're doing RWD with breakpoints. Excepting slimmage (and solutions with <noscript> tags), most will download 2 copies of each image (or worse, fail accessibility and SEO requirements).
I favor the DRY & CSS-friendly Slimmage.js, as its author, but there is also Picturefill for those who want art direction support (and are willing to handle the resulting markup complexity). Both can be used with any RIAPI-compliant server-side module, such as ImageResizer (disclaimer of authorship applies here too).
If you have access to a Windows (or linux/mono) server, consider self-hosting.
Dynamic imaging SaaS products appear and fail on a regular basis, so have a backup plan in place to replace the URLs if your SaaS isn't RIAPI-compliant. If your HTML isn't dynamic or can't be post-processed, you're going to have... fun.
A few services (free or in beta):
CDNConnect (RIAPI-compliant third-pary service based on ImageResizer)
BoxResizer (free, but uptime not guaranteed)
Sqish
Resizor
Some non-free (and non-compliant) services
http://www.resrc.it/pricing/us
https://responsive.io/plans#pricing-list
https://www.maikoapp.com/
http://www.thumbr.io/plans_and_prices
You should check out WURFL Image Tailor.
Works pretty much as you describe. You refer the images through a proxy like this:
<img src="//wit.wurfl.io/[full-url-to-your-image]">
The proxy will then detect the screen size of the user-agent and resize the image accordingly. This service also take some arguments that allows you to explicitly set height, width and percentage of screen size.
One image resizing service you can use is https://gumlet.com. You can use any image source with it and resize images exactly as per your need.
For example, to get image width of 300 px, you can write
https://subdomain.gumlet.com/image.jpg?width=300
P.S. I work at Gumlet.
Is there any way to have three.js running server-side on a headless server (standalone server, Amazon AWS or similar)?
Currently I fall back to canvas rendering (wireframe only for performance reasons) when user's browser does not support WebGL. This is good enough for realtime interaction, but for the app to make sense, users would really need to somehow be able to see a properly rendered version with lights, shadows, post processing etc. even if it comes with great latency.
So... would it be possible to create a server-side service with functional three.js instance? The client would still use tree.js canvas wireframe rendering, but after say... a second of inactivity, it would request via AJAX a full render from the server-side service, and overlay it simply as an image.
Are there currently any applications, libraries or anything that would allow such a thing (functional javascript+webgl+three.js on a headless, preferably linux server, and GPU-less at that)?
PhantomJS comes to mind, but apparently it does not yet support WebGL: http://code.google.com/p/phantomjs/issues/detail?id=273
Or any alternative approaches to the problem? Going the route of programmatically controlling a full desktop machine with a GPU and standard chrome/firefox instance feels possible, while fragile, and I really really wouldn't want to go there if there are any software-only solutions.
In its QA infrastructure, Google can run Chromium testing using Mesa (see issue 97675, via the switch --use-gl=osmesa). The software rasterizer in the latest edition of Mesa is pretty advanced, involving the use of LLVM to convert the shaders and emulate the execution on the CPU. Your first adventure could be building Mesa, building Chromium, and then try to tie them together.
As a side note, this is also what I plan (in the near future) for PhantomJS itself, in particular since Qt is also moving in that direction, i.e. using Mesa/LLVMpipe instead of its own raster engine only. The numbers actually look good. Even better, for an offline, non-animated single-shot capture, the performance would be more than satisfactory.
Some inputs in this thread : https://github.com/mrdoob/three.js/issues/2182
In particular this demo shows how to generate some images on server side using nodejs.
Thanks,
Nico
Links below will not resolve your problem with AWS but will give you a hint.
I am working on the application with a similar architecture and came across with these examples:
Multiplayer game with realtime socket.io
My original question on similar architecture
I need to access web camera using Java. This is what I want to do
Access web cam
Now the user can see web cam working because his face is visible on screen
(have heard some libs are there which doesn't show the video output of webcam)
when user click save button, take a snapshot and save it
I have tried number of ways to do this, from a long time.
JMF - Now it is dead
FMJ - Now it is dead too
VLCJ - too much because I am not creating a music/video player and it expect VLC to be installed
Xuggler - too much and hard work
JMyron - didn't work
JavaFX - I thought it could do it, but seems like it can't
I am even satisfied if the library is just ONLY doing the above mentioned, because that's enough for me. But I expect it to be simple too. Really great if it is not using DLLs, because it is not platform independent if it does. Really appreciate if it can DETECT the camera, without manually passing the camera name and other info as have do in VLCJ (because there might be thousands of camera brands, so I can't create a list of thousand elements in it). And, I am creating a desktop application, not web app.
If you know a library like this, please be kind enough to let me know. Other libraries (which might not suit to all of my requirements, but suits to the basic requirement) also welcome. Please help
I think the project you are looking for is: https://github.com/sarxos/webcam-capture (I'm the author)
There is an example working exactly as you've described - after it's run, the window appear where, after you press "Start" button, you can see live image from webcam device and save it to file after you click on "Snapshot" (source code available, please note that FPS counter in the corner can be disabled):
The project is portable (WinXP, Win7, Win8, Linux, Mac, Raspberry Pi) and does not require any additional software to be installed on the PC.
API is really nice and easy to learn. Example how to capture single image and save it to PNG file:
Webcam webcam = Webcam.getDefault();
webcam.open();
ImageIO.write(webcam.getImage(), "PNG", new File("test.png"));
Useful when implementing a design, to make the design pixel accurate.
I've used the pixel perfect plugin for firefox to do this, but it doesn't seem to work anymore. The best would be a separate program that can be used independently of browser. Any recommendations?
I'm working on a javascript tool for developers to manage image overlays: https://github.com/frontfoot/overlay_me
I found another solution though that is corresponding to your need: http://makiapp.com/
My version of the tool is a bit more developer oriented, as you can have a pack of overlaying images loading automatically per project, and also keeping the possibility to inspect DOM elements while overlaying things.
The makiapp tool is a more accessible, designer oriented, where you can upload a local file.
My tool is at its first stage and need feedback BTW ;)
Suppose I'm writing a 2d tile based MMORPG.
Furthermore suppose I hate flash.
Lastly, suppose I only need my code to run in the latest safari, latest firefox, and latest chrome.
What are the limits to what I can and can't do? (Are there examples of good game engines that only require a recent web browser)?
Look into HTML5 Canvas http://en.wikipedia.org/wiki/Canvas_element
The latest versions of the browsers you mention already support it.
Check out the Unity3D engine: http://www.unity3d.com
Cross-browser, cross-platform, although your users would have to download the unity browser plugin...
There's also the Raphaël javascript library...it does a very nice job of abstracting a lot of the heavy lifting you'd have to do otherwise! The memory footprint seems decently light as well (from my small-scale playing around with it anyway).
For something that works for the user, OOBE (without add-ins etc); Javascript is probably the only unified functionality that exists between all browsers.
The browser is surprisingly quite capable (at least Chrome is), this is something that Google Chrome is attempting to promote (see http://www.chromeexperiments.com/). Notice some however, that experiments are often laggy or unworkable in other web browsers.
As for a list of things that are and aren't capable; that would take a fair while to compile.
In regards specifically to a 2D tile based game, I wouldn't say it isn't possible, but it may be quite difficult to create. As mentioned before, most browsers (apart from the stand-out; Google Chrome), suffer from limited resources. Therefore resources wise, it may be difficult to implement and would defiantly require a lot of requirement fore planning.
Java applets are also possible...
You could also move to 3D. While it does require a plug-in (although is being integrated into Chrome), the results are undeniable.
"O3D is an open-source web API for creating rich, interactive 3D applications in the browser." http://code.google.com/apis/o3d/. The video is quite amazing actually -- especially the live map editing (e.g. removing sprites).