A simple guide to use OSC in the Browser
In this article, I’ll explain how you can send and recieve OSC messages with your browser. We’ll use an open source app to send OSC messages from a smartphone to the browser via Wifi.
A little background
Open Sound Control (OSC) is a protocol for communication among computers and other multimedia devices. It can be seen as the successor of MIDI. OSC is very simple, flexible and provides everything needed for real-time control of media. This may not sound very exciting at first but OSC is incredibly useful for connecting devices and creating rich multimedia experiences.
Prerequisites and Installation
Ok, let’s get started.
- Download and install node.js
- Open up the terminal and install socket.io with the help of the node.js New Packet Manager (npm):
npm install socket.io
- Then install the osc-web module by Vilson Vieira, which will create the folder “osc-web” in your users root folder and enable us to send/receive OSC messages via socket.io:
git clone git://github.com/automata/osc-web.git cd osc-web/ npm install
- Run the bridge app:
cd osc-web node bridge.js
You can also type in “node” and then drag an drop the “bridge.js” file directly into the terminal. This will run the file with node.js. The terminal will show “socket.io started” and a “heartbeat” from time to time.
Send OSC from smartphone to browser
So, now we’re all set to receive OSC messages but still need some kind of software or device to send OSC messages. For this purpose, we’ll use Charlie Roberts Control App to send messages from our smartphone to the browser. It allows you to build custom interfaces with buttons, sliders, knobs etc and send OSC messages over Wifi. The app hasn’t been updated in a while and is not super-intuitive but it’s good enough and it’s free. If you want a more polished, easy-to-use app you can go for Touch OSC.
- Download and install the Control App
- Make sure your smartphone and computer are connected to the same Wifi
- Choose “Destinations” from the Apps menu, add the local IP adress of your computer and port 3333 to tell the Control App where to send the OSC messages.
- Go to “Interfaces” and choose one of the available interfaces
- Run bridge.js with node, if it’s not already running (see step 4 above).
- Open “app.html” in the “web-side” folder within the OSC-Web folder
- Move a slider (or whatever) on the Control interface on your smartphone to send OSC messages to the browser. The terminal will show the messages and the latest one is also visible on the app.html site.
Congrats, you’ve successfully managed to send OSC messages from your smartphone to your browser!
Using OSC in the browser opens up a world of possibilities:
- Build a web-based game and control it with your smartphone.
- Connect a Wiimote to you computer with the help of OSCulator and use it to navigate through your website. This could be useful for prototyping Smart-TV apps, for example.
- Build a web-app that you can control with your facial expressions via FaceOSC
I might cover one or more of these examples in a future article. Stay tuned 🙂