multipart/x-mixed-replace
というmimeTypeがあります。これはコンテンツをリアルタイムにプッシュできるもので、Webカメラの画像であったり、擬似的なサーバプッシュとして使われたりしています。
multipart/x-mixed-replaceで配信される画像を使ってJavaScriptで処理をしたいと思ったのですが、外部ドメインで配信されているとCORS制限が加わってCanvasなどで使い勝手が悪くなります。
そこでmultipart/x-mixed-replaceのプロキシを立ててみました。
var express = require('express');
var http = require('http');
var app = express();
var url = require('url');
app.use(express.static('public'));
app.get('/motion', function(req, res) {
var u = url.parse(req.query.url)
var options = {
host: u.hostname,
port: u.port,
path: u.path,
method: 'GET',
headers: req.headers
};
var creq = http.request(options, function(cres) {
for (var name in cres.headers) {
res.setHeader(name, cres.headers[name]);
}
cres.on('data', function(chunk){
res.write(chunk);
});
cres.on('close', function(){
res.writeHead(cres.statusCode);
res.end();
});
}).on('error', function(e) {
res.writeHead(500);
res.end();
});
creq.end();
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
これで /motionでアクセスするとクエリのurlで指定したコンテンツをそのまま流してくれます。コツとしてはdataイベントで流れてくる情報が常時発生するということでしょうか。こういう処理はnode.js向きですね。