過去に 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 の話で、それ以外でシリアル通信などにも対応しているようです。
ページの中を見ていくと、ブラウザ側の実装と Node.js側の実装のそれぞれの概要や、他のサンプルが置いてあるページへのリンクなどが書いてあります。
https://github.com/colinbdclark/osc.js-examples/tree/master/udp-browser という URL にアクセスすると見られるサンプルを参考に、実装を進めていきます。
やりたいこと的には、こちらかも。https://t.co/YXQWaaZ1kI pic.twitter.com/dvwYluJS7U
— you (@youtoy) November 21, 2021
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側のプログラムでデータが届いた後の部分でエラーが出ました...
最低限、osc-browser.min.js があれば良さそうです。
検索してみると CDN からの読み込みができそうでした。
以下は、 https://www.jsdelivr.com/package/npm/osc というアドレスから、その中の distフォルダ内へと移動していった時のページのキャプチャです。
執筆時点では、以下のようにスクリプトタグで読み込めばよさそうでした。
<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側で、ブラウザから送られたデータを受信・表示できたのが確認できました。
osc.js を使ったブラウザでの OSC利用の件、
— you (@youtoy) November 21, 2021
Node.js と HTML+JavaScript のプログラムをそれぞれ書いて動かした。
そして、ブラウザのページ上から OSC over WebSocket を使って、Node.js のプログラムを介し、OSC Data Monitor にデータが送られたのを確認できた! pic.twitter.com/fJNzbCSWXz
添付画像の右端のほうの部分を、以下に掲載しておきます。
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