diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a56a7ef --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules + diff --git a/package.json b/package.json index 10edd46..979033f 100644 --- a/package.json +++ b/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" + } } diff --git a/src/CCapture.js b/src/CCapture.js index 7fb3934..508dfdb 100755 --- a/src/CCapture.js +++ b/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 diff --git a/utils/websocketserver.js b/utils/websocketserver.js new file mode 100644 index 0000000..5db658e --- /dev/null +++ b/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+'/');