Support websocket as a capture destination

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+

package.json

@@ -21,5 +21,8 @@
   "bugs": {
     "url": "https://github.com/spite/ccapture.js/issues"
   },
-  "homepage": "https://github.com/spite/ccapture.js#readme"
+  "homepage": "https://github.com/spite/ccapture.js#readme",
+  "dependencies": {
+    "ws": "^1.1.1"
+  }
 }

src/CCapture.js

@@ -372,6 +372,57 @@ CCFFMpegServerEncoder.prototype.safeToProceed = function() {
     return this.encoder.safeToProceed();
 };
 
+
+// http://www.smartjava.org/content/capture-canvas-and-webgl-output-video-using-websockets
+// http://fhtr.blogspot.com.au/2014/02/saving-out-video-frames-from-webgl-app.html
+function CCWebsocketServerEncoder( settings ) {
+
+  CCFrameEncoder.call( this, settings );
+
+  this.framerate = this.settings.framerate;
+  this.type = 'image/png';
+  this.extension = '.png';
+  this.fileExtension = this.extension;
+  this.stream = null;
+  this.mediaRecorder = null;
+  this.chunks = [];
+  this.count = 0;
+
+  settings.quality = ( settings.quality / 100 ) || .8;
+
+  this.encoder = new WebSocket("ws://localhost:8889/");
+
+}
+
+CCWebsocketServerEncoder.prototype = Object.create( CCFrameEncoder.prototype );
+
+CCWebsocketServerEncoder.prototype.add = function( canvas ) {
+
+  canvas.toBlob( function( blob ) {
+    var fileReader = new FileReader();
+    fileReader.onload = function() {
+      frame = new Uint8Array( fileReader.result );
+      filename = pad( this.count ) + this.fileExtension;
+      this.encoder.send(frame);
+      this.count++;
+      this.step();
+    }.bind( this );
+    fileReader.readAsArrayBuffer(blob);
+
+  }.bind( this ), this.type )
+
+}
+
+CCWebsocketServerEncoder.prototype.save = function( callback ) {
+  // End the stream
+  this.mediaRecorder.stop();
+  // Close the socket
+  this.encoder.close()
+
+  this.stop();
+}
+
+
 /*
 	HTMLCanvasElement.captureStream()
 */
@@ -603,6 +654,7 @@ function CCapture( settings ) {
 		gif: CCGIFEncoder,
 		webm: CCWebMEncoder,
 		ffmpegserver: CCFFMpegServerEncoder,
+		websocketserver: CCWebsocketServerEncoder,
 		png: CCPNGEncoder,
 		jpg: CCJPEGEncoder,
 		'webm-mediarecorder': CCStreamEncoder

utils/websocketserver.js

@@ -0,0 +1,38 @@
+// http://fhtr.blogspot.com.au/2014/02/saving-out-video-frames-from-webgl-app.html
+// Adapted from this _WikiBooks OpenGL Programming Video Capture article_.
+var port = 8889;
+var ws = require('ws');
+var fs = require('fs');
+var frame = 0;
+var path = "../../../output";
+
+var WebSocketServer = require('ws').Server, wss = new WebSocketServer({ port: port });
+
+wss.on('connection', function connection(ws) {
+  frame = 0;
+
+  var d = new Date();
+  var directory = path + "/" + d.toISOString();
+
+  fs.mkdir(path, '755', function() {});
+  fs.mkdir(directory, '755', function() {});
+
+  ws.on('message', function incoming(data, filename, x) {
+    console.log("filename")
+    console.log(filename)
+
+    base64Data = data.toString('base64');
+
+    // Allows for up to 1 hour of encoded data at 25fps.
+    var filename = ("00000" + frame).slice(-5)+".png";
+
+    fs.writeFile(directory + "/" + filename, base64Data, 'base64', function(err) {
+        if ( err ) console.log(err);
+    });
+
+    console.log('Wrote ' + filename);
+    frame++;
+  });
+});
+
+console.log('Server running at ws://127.0.0.1:'+port+'/');