tuio-client

This is a TUIO client for JavaScript and TypeScript aimed at running in the browser using WebSockets for TUIO trackers that provide WebSocket access.

Usage

See the examples in the tuio-web-examples repository.

To use the library in another project, install it using NPM:

npm install tuio-client

Then, you can use it as follows:

const hostname = "127.0.0.1";
const port = 3343;

const tuioReceiver = new WebsocketTuioReceiver(hostname, port);
const tuio20Client = new Tuio20Client(tuioReceiver);
tuio20Client.addTuioListener({
    tuioAdd: (tuioObject: Tuio20Object) => { console.log(tuioObject); },
    tuioUpdate: (tuioObject: Tuio20Object) => { console.log(tuioObject); },
    tuioRemove: (tuioObject: Tuio20Object) => { console.log(tuioObject); },
    tuioRefresh: (tuioTime: TuioTime) => { console.log(tuioTime); },
});

For this, you need to implement a TuioReceiver. Here is an example for a WebsocketTuioReceiver that uses osc-js:

import OSC from "osc-js";
import { TuioReceiver } from "tuio-client";

export class WebsocketTuioReceiver extends TuioReceiver {
    private readonly _host: string;
    private readonly _port: number;
    private _osc: OSC;
    constructor(host: string, port: number) {
        super();
        this._host = host;
        this._port = port;
        const plugin = new OSC.WebsocketClientPlugin({host: this._host, port: this._port});
        this._osc = new OSC({plugin: plugin});
        this._osc.on("*", (message: OSC.Message) => this.onOscMessage(message));
    }

    public connect() {
        this._osc.open();
        this.isConnected = true;
    }

    public disconnect() {
        this._osc.close();
        this.isConnected = false;
    }
}

Development

You can use this TUIO simulator to simulate touches and objects. Configure it to use WebSocket as the connection type and, TUIO2 as the TUIO version and e.g., port 3343.