/blog/Creating a web application to send OSC locally with nodejs (SocketIO, Express)
Tech Blog2019 - 10 - 9

Creating a web application to send OSC locally with nodejs (SocketIO, Express)

Open Sound Controlnodejsexpress

I prototyped a web application that allows anyone to participate in an artwork through OSC.

I prototyped a web application that allows anyone to participate in an artwork through OSC. Repository.

OSC (Open Sound Control)

What is OSC: See opensoundcontrol.org or Wikipedia.

yoppa.org's openFrameworks – Network collaboration using OSC (Open Sound Control) is very helpful.

It is very convenient because you can send something like MIDI over UDP to Max/MSP. This time, I will prototype a tool to make exhibitions more interactive by accepting this locally not only on the LAN but also from smartphones on the Internet.

(You can run the application locally by referring to the repository below)

atsukoba/osc-webapp

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

Overview

Set up a server with nodejs/express, and capture the user's movements on the application with websocket, which is lightweight and can be used bidirectionally. Implement up to exposing the server set up on localhost with ngrok and outputting its URL (and local IP address) to a QR code.

Write a light front-end to create a demo, and check if a simple button and the message corresponding to that button can be sent to the local OSC.

alt

express

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

Use socket.io.

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

osc

Use node-osc (npm: node-osc). An example of usage is as follows:

1const osc_portnum = 5050;
2const client = new osc.Client("127.0.0.1", osc_portnum);
3
4io.of("osc").on("connection", (socket) => {
5  socket.on("message", (obj) => {
6    console.log("osc: " + obj);
7    obj = JSON.parse(obj);
8    let sendObj = new osc.Message(obj.address);
9    sendObj.append(obj.args);
10    client.send(sendObj);
11    let dt = new Date();
12    io.of("osc").send(
13      `${dt.toFormat("HH24:MI:SS")} : osc message received: ${obj.args}`,
14    );
15  });
16});

qrcode

Use os, qrcode (npm: qrcode) to make the local IP address and the URL generated by ngrok (npm: ngrok) into a QR code.

1const ngrok = require("ngrok");
2const qrcode = require("qrcode");
3
4// get local ip addresses
5let interfaces = os.networkInterfaces();
6let addresses = [];
7for (let k in interfaces) {
8  for (let k2 in interfaces[k]) {
9    let address = interfaces[k][k2];
10    if (address.family === "IPv4" && !address.internal) {
11      addresses.push(address.address);
12    }
13  }
14}
15console.log(`local ip addresses: ${addresses}`);
16console.log(`FOR LOCAL NEWORK PARTICIPANTS`);
17qrcode.toString(
18  `http://${addresses[0]}:${portnum}`,
19  { type: "terminal" },
20  (err, str) => {
21    console.log(str);
22  },
23);
24
25// make ngrok tunnel
26console.log(`FOR WWW PARTICIPANTS`);
27(async () => {
28  let url = await ngrok.connect(portnum);
29  console.log("ngrok URL: " + url);
30  qrcode.toString(url, { type: "terminal" }, (err, str) => {
31    console.log(str);
32  });
33})();

Usage

1npm start

This will generate a QR code, and you can send OSC by sharing it. If you are on the same LAN, the top QR code is fine. Specify the port number in the config file, and the demo hardcodes the OSC message to send (for now) in main.js on the client side, so please edit it as appropriate.

gif

reference