nodejsでローカルにoscを送るwebアプリケーションを作る (SocketIO, Express)

誰でも osc を通して作品に参加できるような web アプリケーションをプロトタイピングしました。リポジトリ。

OSC

(Open

Sound

Control)

OSC とは: opensoundcontrol.org やwikipediaを参照。

yoppa.org のopenFramewoks – OSC (Open Sound Control) を利用したネットワーク連携が非常にためになる。

UDP 上で MIDI みたいなものを Max/MSP に送ったりできるので非常に便利。今回はこいつを LAN 上だけならずインターネット上のスマートフォンからローカルに受け付ける，展示をよりインタラクティブにするためのツールのプロトタイピングを行う。

概観

nodejs/express でサーバを立てて，軽くて双方向に使える websocket でユーザのアプリケーション上での動きを捉える。localhost に立てたサーバを ngrok で公開し，その URL(とローカルの IP アドレス)を QR コードに出力するところまでを実装する。

軽くフロントを書いてデモをつくり，簡単なボタンとそのボタンに対応したメッセージをローカルの osc に送れるかを確認する。

express

npm install express-generator -g
express --view=ejs osc-webapp
cd osc-webapp
npm install

socket.ioを使用する。

const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);

osc

node-osc(npm: node-osc)を利用する。利用例としては以下のような感じ

const osc_portnum = 5050;
const client = new osc.Client("127.0.0.1", osc_portnum);

io.of("osc").on("connection", (socket) => {
  socket.on("message", (obj) => {
    console.log("osc: " + obj);
    obj = JSON.parse(obj);
    let sendObj = new osc.Message(obj.address);
    sendObj.append(obj.args);
    client.send(sendObj);
    let dt = new Date();
    io.of("osc").send(
      `${dt.toFormat("HH24:MI:SS")} : osc message received: ${obj.args}`,
    );
  });
});

qrcode

os, qrcode(npm: qrcode) を用いて，ローカル IP アドレスとngrok(npm: ngrok)で生成した URL を QR にする。

const ngrok = require("ngrok");
const qrcode = require("qrcode");

// get local ip addresses
let interfaces = os.networkInterfaces();
let addresses = [];
for (let k in interfaces) {
  for (let k2 in interfaces[k]) {
    let address = interfaces[k][k2];
    if (address.family === "IPv4" && !address.internal) {
      addresses.push(address.address);
    }
  }
}
console.log(`local ip addresses: ${addresses}`);
console.log(`FOR LOCAL NEWORK PARTICIPANTS`);
qrcode.toString(
  `http://${addresses[0]}:${portnum}`,
  { type: "terminal" },
  (err, str) => {
    console.log(str);
  },
);

// make ngrok tunnel
console.log(`FOR WWW PARTICIPANTS`);
(async () => {
  let url = await ngrok.connect(portnum);
  console.log("ngrok URL: " + url);
  qrcode.toString(url, { type: "terminal" }, (err, str) => {
    console.log(str);
  });
})();

つかう

npm start

これで QR コードが生成されるので，それをシェアすれば osc を送れる。同一 LAN にいるなら，上部の QR コードでおｋ。config ファイルでポート番号を指定し，デモはクライアント側の main.js で(今は)送る osc メッセージをハードコードしているので，適宜それを編集して使っていただければと思う。

reference

• Qiita: node.js と Processing を OSC でやりとり
• yoppa.org: Processing Libraries 3 : oscP5 – OSC によるアプリケーション間通信