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

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


誰でも 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
15
16
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
30
31
32
33
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