mocopi web visualizer

Sonyが販売している小型のモーションキャプチャーデバイス、mocopiから取得したデータをweb上に表示するシステムを実装をした。

本製品はOSCに対応しているため、Web ブラウザとの通信も比較的容易に行える。

しかしWebブラウザで扱えるOSC通信はWebSocketをベースにしており、ベースとなるプロトコルはUDPではなくTCPとなる。

このProjectではよりリアルタイムに近いビジュアライゼーションを目指すため、コネクション型であるTCPよりもコネクションレスなUDPを扱う方が望ましいと判断した。

そこで UDPをベースにし文字列やバイナリの通信が可能なWebRTC data channelsを利用しブラウザとやりとりするサーバーを実装した。

Rust言語で開発したこのサーバーはmocopiからデータを受け取り、そのdataをdeserializeする。その後、WebRTC data channelsを用いてそのデータをWebブラウザに送信する。

Webブラウザ側では、受け取ったデータを可視化するための実装を行った。


I developed a system to visualize data on the web from Sony's compact motion capture device, “mocopi.” This product is compatible with the OSC protocol, which makes it relatively straightforward to communicate with web browsers. However, the OSC protocol that web browsers can handle is based on WebSocket, which relies on the TCP protocol instead of UDP.

To achieve a visualization closer to real-time in this project,  I determined that it's preferable to use the connectionless UDP protocol to the connection-oriented TCP. To achieve this, I implemented a server that mediates between mocopi and web browsers using WebRTC data channels, which can transmit both strings and binary data based on UDP.

This server, written in the Rust language, receives data from mocopi and deserializes it. It then forwards the data to the web browser using WebRTC data channels.

On the web browser side, I implemented a feature to visualize the data received from the server.