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

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

OSC (Open Sound Control)

OSCとは: opensoundcontrol.orgwikipediaを参照。

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

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

(以下リポジトリを参照していただければローカルでアプリケーション動かせます)

atsukoba/osc-webapp

Serve OSC from www. Contribute to atsukoba/osc-webapp development by creating an account on GitHub.

概観

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

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

alt

express

1
2
3
4
npm install express-generator -g
express --view=ejs osc-webapp
cd osc-webapp
npm install

socket.ioを使用する。

1
2
3
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

osc

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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にする。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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);
});
})();

つかう

1
npm start

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

gif

reference