2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

osc.js でブラウザから OSC Data Monitor に OSC over WebSocket でデータを送る(とりあえず片方向)

Last updated at Posted at 2021-11-21

過去に OSC を使った記事をいくつか書いていたのですが、今回の記事はその中の以下に近いものです。

●osc.js で OSC Data Monitor に OSC over UDP でデータを送る(Node.js の keypress との組み合わせ) - Qiita
 https://qiita.com/youtoy/items/740686a8d2ffb0c6b8ba

上記は、Node.js のプログラムのみを使って OSC over UDP を使うものでしたが、今回はブラウザ上の JavaScript のプログラムから OSC over WebSocket でデータを送ります。
※ ブラウザ上では UDP を直接扱えないため、WebSocket の上にのる形になります

正確には、Node.js で作った仲介役を介して OSC Data Monitor にデータを送るような構成です。
そして、自分がこの後にやりたい事は、ブラウザから送信する側だけあれば良いので、その部分は片方向の通信を実装する形です(ちょっと処理を足せば、双方向もできてしまいますが)。

osc.js と OSC Data Monitor の間の通信

OSC Data Monitor について

OSC Data Monitor は、OSC で送られたデータの情報を、GUI上に表示してくれるアプリです(※ Windows、Mac、Linux のそれぞれで利用可能)。
関連リンク等については、以下の記事の中の「OSC Data Monitor」という部分の説明などをご参照ください。

●ZIG SIM と Node.js のプログラム(osc.js を利用)との間で UDP による OSC通信を軽く試す(OSC Data Monitor の話も) - Qiita
 https://qiita.com/youtoy/items/fddc750759f4ecef7ca7

osc.js の OSC over WebSocket

まずは、osc.js を使って OSC over WebSocket の通信を実現する方法を確認します。

ちなみに、以下の赤線をひいた部分が WebSocket の話で、それ以外でシリアル通信などにも対応しているようです。
対応プロトコル.jpg

ページの中を見ていくと、ブラウザ側の実装と Node.js側の実装のそれぞれの概要や、他のサンプルが置いてあるページへのリンクなどが書いてあります。
ブラウザでOSC.jpg

https://github.com/colinbdclark/osc.js-examples/tree/master/udp-browser という URL にアクセスすると見られるサンプルを参考に、実装を進めていきます。

Node.js側の実装

元のサンプルの実装は、このリンク先の内容のとおりなのですが、もっと簡略化できそうに見えるので、必要最低限となりそうな部分以外削ったり書きかえます。

なお、以下を実行する場合には、 npm i osc で osc.js を呼び出せるようにしておいてください。
ちなみに ws は、上記のインストール時に一緒に準備されるので、特に上記の npmコマンドでの指定は不要です。

const osc = require("osc"),
    WebSocket = require("ws");

const udp = new osc.UDPPort({
    localAddress: "0.0.0.0",
    localPort: 7400, // 自分が UDP で待ち受ける時のポート番号
    remoteAddress: "127.0.0.1",
    remotePort: 8000 // OSC Data Monitor の待ち受けポート番号
});

udp.on("ready", function () {
    console.log("Listening for OSC over UDP.");
});
udp.open();

const wss = new WebSocket.Server({
    port: 8081 // WebSocket で接続する場合の接続先ポート番号
});

wss.on("connection", function (socket) {
    console.log("A Web Socket connection has been established!");
    const socketPort = new osc.WebSocketPort({
        socket: socket
    });

    const relay = new osc.Relay(udp, socketPort, {
        raw: true
    });
});

上記で 3つのポート番号が出てきますが、それぞれコメントに書いた通りです。

  • localPort: 7400: Node.js のプログラム自身が UDP で待ち受けるポート(今回は不使用)
  • remotePort: 8000: OSC Data Monitor に接続するためのポート番号(OSC Data Monitor のデフォルトの待ち受けポート番号)
  • port: 8081: ブラウザ側から WebSocket で接続する場合のサーバーのポート番号

ブラウザ側の実装

次に、サンプルのブラウザ側の実装を見てみます。

以下のように、osc.js での OSC over WebSocket にはライブラリが必要なようです。
※ 念のため、素の WebSocket での通信を試したのですが、Node.js側のプログラムでデータが届いた後の部分でエラーが出ました...
ブラウザ側でのライブラリの読み込み.jpg

最低限、osc-browser.min.js があれば良さそうです。
検索してみると CDN からの読み込みができそうでした。

以下は、 https://www.jsdelivr.com/package/npm/osc というアドレスから、その中の distフォルダ内へと移動していった時のページのキャプチャです。
distフォルダ.jpg

dist以下.jpg

執筆時点では、以下のようにスクリプトタグで読み込めばよさそうでした。

<script src="https://cdn.jsdelivr.net/npm/osc@2.4.2/dist/osc-browser.min.js"></script>

とりあえず、最低限、Node.js側に接続して何らかデータを送る、というプログラムを書いてみます。
元のサンプルから、必要最低限の部分のみが残るような感じで書きかえました(冒頭にも書いたとおり、ブラウザから送信するだけの、片方向通信用の処理になっています)。

<!DOCTYPE html>
<html>
    <head>
        <title>osc.js Web Socket Demo</title>
        <meta charset="UTF-8" />
        <script src="https://cdn.jsdelivr.net/npm/osc@2.4.2/dist/osc-browser.min.js"></script>
        <script type="text/javascript">

            const port = new osc.WebSocketPort({
                url: "ws://localhost:8081"
            });
            port.open();

            const sayHello = function () {
                port.send({
                    address: "/hello",
                    args: ["world"]
                });
            };

        </script>
    </head>

    <body>
        <h1>osc.js Web Socket Demo</h1>
        <button onclick="sayHello()">Send OSC message</button>
    </body>
</html>

動作させてみた結果

以下のツイートの添付画像にあるように、OSC Data Monitor側で、ブラウザから送られたデータを受信・表示できたのが確認できました。

添付画像の右端のほうの部分を、以下に掲載しておきます。
データを受信.jpg
HTML上のボタンを複数回押したので、メッセージ受信が複数受信されている、という状態です。

おわりに

osc.js を使った Node.js のプログラムで WebSocket関連の処理を書くことで、UDP・WebSocket の両方で待ち受けができる仲介役ができあがりました。
そして、その仲介役にブラウザからアクセスして WebSocket でデータを送ることで、OSC Data Monitor へデータを送ることができました(仲介役が、WebSocket の通信を UDP の通信に変換していたりします)。

UDP・WebSocket の両方が使えると、いろいろ活用できる内容が拡がりそうです!

【追記】 その後

p5.js から使う、というのもやってみました。

●p5.js Web Editor のプログラムから osc.js を使った OSC通信(OSC over WebSocket を利用) - Qiita
 https://qiita.com/youtoy/items/45bebdfb948b3f918c05

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?