ZIG SIM と Node.js のプログラム（osc.js を利用）との間で UDP による OSC通信を軽く試す（OSC Data Monitor の話も）

この記事は Node.js による OSC通信を試してみた時の話で、以下の記事を書いていた流れの続きです。

• ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】 - Qiita
• ブラウザ上の p5.js のプログラムで OSC を使う（サーバー・クライアントは osc-js で実装） - Qiita

送信側にはスマホ（iPhone）を使い、受信側にはノートPC（Mac）を使います。

今回利用するもの

構成

冒頭に書いた機器間で OSC （over UDP） による通信を試すのですが、その際に以下のアプリ・ライブラリを使います。

• スマホ（iPhone）
  • ZIG SIM
• ノートPC
  • OSC Data Monitor
  • Node.js のプログラム（osc.js を利用）

個々のアプリ・ライブラリの補足

ZIG SIM

ZIG SIMは、以下の公式サイトの記載に書かれているとおり、プロトタイピングに便利なアプリです。
スマホのセンサーで取得された値を、簡単にネットワーク経由で送ったりすることができます。

このアプリは App Store と Google Play の両方で、iOS・Android用にリリースされています。
両OS用の無償版が出ているのと、さらに iOS版については機能が足された有償の Pro版が提供されています。

今回は iOS用の無償版 を使います。

OSC Data Monitor

OSC Data Monitor は、OSC経由で受信したデータを表示してくれるアプリです。

Windows、Mac、Linux　のそれぞれの OS向けに提供されています。

今回、スマホの　ZIG SIM からノートPC へ正常にデータが届いているかどうかを確認するために、こちらを利用します。

osc.js を使った Node.js のプログラム

osc.js　を使い、OSC over UDP で送られたデータを受信するシンプルなプログラムを作ります。

osc.js の「UDP in Node.js」と書かれた部分に利用できそうな情報が書かれているため、こちらを利用していきます。

OSC を用いた通信を試す

ZIG SIM と OSC Data Monitor との間での通信

まずは、ZIG SIM から OSC Data Monitor へデータを送ってみます。

ノートPC側で OSC Data Monitor を起動すると、画面左上に IPアドレスが表示されます。
また、その下の「NOW LISTENING TO OSC PORTS:」と書かれた部分にポート番号が表示された状態になっていると、アプリで既に待ち受けをしている状態になります。

この状態で ZIG SIM側の設定を行ってみます。

「Sensorタブ」を選び、その中の適当なセンサーを選びます。
以下はジャイロを選んだ例です。

「Settingsタブ」を開き、OSC over UDP を使うように設定します。
また、先ほどの OSC Data Monitor の画面上に表示されていた、IPアドレスとポート番号を指定してください。それと、DEVICE UUID はデフォルトでも良いですが、書きかえてしまっても問題ありません。

そして「Startタブ」を押すと、通信が始まります。
画面上には、送信しているデータの内容が表示されます。

そして、OSC Data Monitor側の表示を見てみると、以下のように ZIG SIM から送られたデータが表示されています。
受信したデータには、ZIM SIM の設定画面で指定した DEVICE UUID を含むジャイロの値が書かれているのが分かります。

osc.js を使った Node.js のプログラムでデータを受信する

今度は、osc.js を使った Node.js のプログラムでデータを受信してみます。

プログラムを書いていく前に、npmコマンドで osc.js をローカルインストールしておきます。

$ npm install osc

プログラムに関しては、公式ページの「UDP in Node.js ＞ Sample Code」の部分に書かれたコードを見て実装してみます。

上記のプログラムの送信処理を削ったり、少し変更をしてみました。
以下が変更後のプログラムです。

const osc = require("osc");

var udpPort = new osc.UDPPort({
    localAddress: "0.0.0.0",
    localPort: 8000,
    metadata: true
});

udpPort.on("message", function (oscMsg, timeTag, info) {
    console.log("An OSC message just arrived!", oscMsg);
    console.log("Remote info is: ", info);
});

udpPort.on("ready", function () {
    console.log("ready");
});

udpPort.open();

上記のプログラムを実行し、OSC Data Monitor を使った時と同じように、ZIG SIM から送られたデータを受信してみます。
以下のように、無事にデータを受信することができました。

まとめ

今回、スマホ用の ZIG SIMアプリと、PC用の OSC Data Monitor・Node.js のプログラム（osc.js を利用）との間での OSC を用いた通信を試しました。

今後は、他のパターンも試すために、以下下のサンプルなどを見ていこうと思っています。

●colinbdclark/osc.js-examples: Sample code illustrating how to use osc.js in a variety of scenarios.
　https://github.com/colinbdclark/osc.js-examples

余談

今回、当初は osc.js　ではなく、前回の記事で使った osc-js を使おうとしました。
でも、UDP を用いた通信がうまくいかず、自分の実装・使い方がまずいだけかもしれないですが、osc.js　を使ってやってみることにしました。