browserglue
Exposes OSC connections to the browser through WebSockets.
Work in progress, design and interface may change frequently
Features
- Send messages from local OSC applications to different channels.
- Publish messages to channels and broadcast them to multiple OSC application on your machine.
- Portable cross-platform executable that acts as the Server.
- Server can be controlled remotely from clients (Browser or Node.js library).
Example
Send and receive messages (SuperCollider example)
This example creates a single channel called /sclang, and binds it to the port
4000. It also subscribes port 57120 to forward all messages published to this
channel.
const { Client, Message } = browserglue;
const osc = new Client();
console.log("Add channel /sclang binded to udp:4000")
osc.addChannel("/sclang", 4000).then(channel => {
// Handle messages sent to port 4000
channel.on("message", msg => {
console.log("Received:", msg.address, msg.args);
});
// Subscribe to port 57120 (default SuperCollider interpreter port)
channel.subscribePort(57120);
setInterval(() => {
const now = new Date();
const msg = new Message("/chat", 42, now.toISOString());
channel.publish(msg);
console.log("Publish:", msg.address, msg.args);
}, 1000);
});You can try this on SuperCollider, by running the following pieces of code:
s.boot;
// Listen messages on port 51720
(
OSCdef(\test, { |msg, time, addr, recvPort|
"Received from browser: %".format([time, msg]).postln
}, '/chat');
)
// Send every 2 seconds an OSC message to port 4000
b = NetAddr("127.0.0.1", 4000);
(
r = Routine {
inf.do { |i|
"Sent: /hello there! %".format(i).postln;
b.sendMsg("/hello", "there!", i);
2.wait;
}
}.play;
)Multiple channels
(async () => {
const { Client, Message } = browserglue;
window.bg = new Client();
// Subscribe to all server events
bg.on('connect', (() => console.log("[connect]")));
bg.on('disconnect', (() => console.log("[disconnect]")));
bg.on('change', (msg => console.log("[change]", msg)));
bg.on('add-channel', (msg => console.log("[add-channel]", msg)));
bg.on('remove-channel', (msg => console.log("[remove-channel]", msg)));
bg.on('bind-port', (msg => console.log("[bind-port]", msg)));
bg.on('subscribe-port', (msg => console.log("[subscribe-port]", msg)));
bg.on('unsubscribe-port', (msg => console.log("[unsubscribe-port]", msg)));
console.log("Remove all channels first");
await bg.removeAllChannels();
console.log("Add channel /foo binded to udp:4000")
const channel = await bg.addChannel("/foo", 4000);
// Handle messages
channel.on('message', msg => {
console.log("[/foo]", msg.address, msg.args);
});
// Remove channel after 3 seconds
console.log("Remove channel /foo in 3 seconds...");
setTimeout(() => {
console.log("Remove channel /foo");
channel.remove();
console.log("Current channels:", bg.channels);
}, 3000);
// Add another channel
console.log("Add channel /bar binded to udp:5000");
const barChannel = await bg.addChannel("/bar", 5000);
console.log("Subscribe port 5010 on /bar");
barChannel.subscribePort(5010);
console.log("Subscribe port 5011 on /bar");
barChannel.subscribePort(5011);
// Handle messages
barChannel.on('message', msg => {
console.log("[/bar]", msg.args);
});
// Remove channel after 3 seconds
setTimeout(() => {
console.log("Unsubscribe port 5010 on channel /bar");
barChannel.unsubscribePort(5010);
console.log("/bar Channel instance:", barChannel);
}, 500);
// List all channels
console.log("Current channels:", bg.channels);
setInterval(() => {
const now = new Date();
const msg = new Message("/myaddress/1", 42, now.toISOString());
if (barChannel.publish(msg)) {
console.log("Publish to /bar:", msg.address, msg.args);
}
}, 3000);
})();Development
After cloning repository, install dependencies with yarn or yarn install .
You can start a development server by runnig yarn dev. It will watch source
files for changes and restart the BrowserGlue binary script automatically.
To create production bundles for the browser and Nodejs, run yarn build .
This will generate a dist/browserglue.js library for browsers, and
dist/browserglue.node.js for Nodejs.
Run yarn docs to build documentation.
Design
OSC Apps Supported Use Cases
Internals
Contributing
Bug reports and pull requests are welcome on GitHub at the issues page. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
License
This project is licensed under AGPL 3+. Refer to LICENSE.txt.