multipart/x-mixed-replaceのプロキシを作る

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向きですね。