Capture video from wade game

I want to make my game as animation at first, and as interactive game story than. For first stage I need to capture my online demos in video, as avi. I know, I can do that with different programs (as capturing snapshot). But is that possible through wade framework? In game code internally.

All 5 Comments

bro, wade is cool but you aim unreal for now - it only javascript framework, not low-level language.

it must be node libraries like  videoshow or  fluent-ffmpeg 

if you want to create desctop application - try this libraries

Or read this



Thank you, I'll see it.

Also, there is WebAssembly standart, where I can write low-level code (on .NET for example). But I don't know about client-side restriction. Is there access to write video on disk, from browser? Don't know...

And the second thing I don't know - how to get each frame into image in wade


it very expensive cost

var getScreenShot = function(){
  //first define area          
  var area = {};
            area.minX = -wade.getScreenWidth/2;
            area.minY = -wade.getScreenHeight/2;
            area.maxX = wade.getScreenWidth/2;
            area.maxY = wade.getScreenHeight/2;
  //then catch all sprites in area
  var arr = wade.getSpritesInArea(area,5);
  //then create an transpanent container with name 'image' in application use generated name as 'shot1','shot2', etc..    
  wade.createTransparentImage('image', wade.getScreenWidth, wade.getScreenHeight);

  //draw all sprites in container
  for(var i=0;i<arr.length;i++){
    //be careful if we catch template        	 
    if(!arr[i].getSceneObject().isTemplate()) {
    	//clone object that not broke object
        var temp = arr[i].clone();
        //and draw it on top of an existing image.
	    temp.drawToImage('image',false, {x:arr[i].getPosition().x,y:arr[i].getPosition().y});

  var src = wade.getImageDataURL('image');

  return src;

but it work with 2d mode, i dont know how it work in webgl


Thank you, I'll try! This is not neccesary for me, save video, but interesting. Also, if anyone could make animation films with wade, not only games - it will be great. And all that needed - is save rendering scenario.


I just wanted to add that we do have a function called wade.screenCapture that should work both in 2d and webgl mode. It's a bit tricky though, because Chrome keeps changing its implementation of the WebGL framebuffer, and we have to modify that function every so often. It's worth a try though I can't guarantee that it's going to work with your version of Chrome. Sometimes you may have to call wade.draw() manually, and immediately after that wade.screenCapture(), to prevent Chrome from clearing the framebuffer between the draw and the capture.

There is a way to make it work more consistentlty, and that involves editing layer.js. Search for 


And replace it with

this._canvas.getContext('webgl', {preserveDrawingBuffer: true})

This may make things much slower in some situations though, that's why it's not the default behaviour.

But I agree with krumza's comment above - if you want to capture video at a decent framerate, don't do it in JavaScript. There are native programs for each OS that can do this much faster, being able to access the hardware acceleration of the graphics card through some low-level API.


Post a reply
Add Attachment
Submit Reply
Login to Reply