I'm currently working on a project that involves sending WebGL frames/screenshots to a server for saving to the hard drive and later merging them into a video file. I came across this helpful resource: Exporting video from WebGL
Without delving too much into WebGL specifics, my main goal is to send the content of two client-side JavaScript variables to a localhost node.js server. These variables are:
var frame = frame + 1; //frame counter
var dataUrl = renderer.domElement.toDataURL("image/png"); //encoded screenshot/frame
The receiving server-side code has been provided by Joe Turner (running in node.js). So my question is, how can I send the above variables' content to this node.js script?
var http = require('http');
var querystring = require('querystring');
var fs = require('fs');
// Override to prevent decoding spaces, which may affect base64 encoding
querystring.unescape = function(s, decodeSpaces) {
return s;
};
// Function to pad numbers according to export format
function pad(num) {
var s = "000" + num;
return s.substr(s.length-4);
}
http.createServer(function (request, response) {
request.content = '';
request.addListener("data", function(data) {
request.content += data;
});
request.addListener("end", function() {
if (request.content.trim()) {
request.content = querystring.parse(request.content);
var data = unescape(request.content['data']);
var frame = request.content['frame'];
// Remove data:image/png;base64,
data = data.substr(data.indexOf(',') + 1);
var buffer = new Buffer(data, 'base64');
fs.writeFile('screen-' + pad(frame) + '.png', buffer.toString('binary'), 'binary');
}
});
response.writeHead(200, {
'Content-Type': 'text/plain',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'X-Requested-With'
});
response.end();
}).listen(8080, "127.0.0.1");
Could implementing something like this work?
...
...
//WebGL related code
...
...
var frame = frame + 1;
var dataUrl = renderer.domElement.toDataURL("image/png");
$.ajax({
url: "http://127.0.0.1:8080",
type: "POST",
data: {"data": dataUrl, "frame": frame}
});
...
...
As an example, you can check out this experiment: Three.js basic example
I made a modification to the code in the experiment mentioned above:
pointLight.position.copy(camera.position);
progress += frameTime;
lastTimestamp = timestamp;
renderer.render(scene, camera);
stats.update();
requestAnimationFrame(animate);
And added this snippet:
pointLight.position.copy(camera.position);
progress += frameTime;
lastTimestamp = timestamp;
renderer.render(scene, camera);
stats.update();
requestAnimationFrame(animate);
var dataUrl = "data:image/png;base64,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#<!---->
var frame = 10;
$.ajax({
url: "http://127.0.0.1:8080",
type: "POST",
data: {"data": dataUrl, "frame": frame}
});
However, I still cannot locate the saved image file.