HTML-GL can be used to render to video?
drschwabe opened this issue · comments
Is there a way to render the output of an html-gl element to a video format like MP4 ?
I'm looking for a way to render an HTML page (ie containing a slideshow and JS/CSS driven animations) into an HD MP4 and my research brought me here - any insights or detail on how this might be acommodated via HTML-GL are appreciated.
so essentially you need to convert it to a series of screenshots and then convert to video, I would say this is not possible in a realtime but for screenshots would recommend to read my article on it http://pixelscommander.com/javascript/state-of-html-content-rasterization-draw-html-to-canvas-image/ and then use something like http://libwebpjs.appspot.com/v0.1.3/ to convert screenshots to video. Also consider new kid on the block when it comes to content rasterization - https://github.com/tsayen/dom-to-image
I am open for consulting if you have any difficulties.
Great ! Thanks for your detailed insight/suggestion and article on the topic - as well as the headusp about dom-to-image
Call canvas.captureStream() on the canvas being used to render (it's available as window.HTMLGL.context.renderer.view) and you'll get a MediaStream with your html-gl rendered content.
Nice thinking! Thanks @RationalCoding
Not too experienced in canvas yet but hopeful that the MediaStream would be able to capture every frame ie- an animation @ 30 FPS