Electronで、VJをしよう!②OSCの受信

  • 10
    Like
  • 0
    Comment
More than 1 year has passed since last update.

ElectronでVJをすべく、OSCを受信できるようにします。

準備

追加モジュール

node-oscを使用します。

npm install --save node-osc

OSC送信

送信側は、openFrameworksのサンプルを使用します。

openFrameworks
zipを解凍した以下のフォルダにあります。
of_v0.9.2_osx_release/examples/addons/oscSenderExample

ソース

app.js
'use strict';

const electron = require('electron');
const app = electron.app;  // アプリケーション作成用モジュール
const BrowserWindow = electron.BrowserWindow;  // メインウィンドウ作成用モジュール

// OSC
const osc = require('node-osc');

//  クラッシュレポート
require('crash-reporter').start();

var mainWindow = null;

// 全てのウィンドウが閉じたら、アプリケーションを終了する
app.on('window-all-closed', () => {
    app.quit();
});

// アプリケーション初期化完了後
app.on('ready', () => {
    // メインウィンドウ
    mainWindow = new BrowserWindow({ width: 400, height: 400 });

    // 読み込み
    mainWindow.loadURL('file://' + __dirname + '/main.html');

    // デバッグ
    // mainWindow.webContents.openDevTools();
    // メインウィンドウを閉じた時
    mainWindow.on('closed', () => {

        mainWindow = null;
    });

    // OSCサーバー
    mainWindow.webContents.once('did-finish-load', () => {
        console.log('loaded');
        var oscServer = new osc.Server(12345, 'localhost');
        // OSC受信時
        oscServer.on('message', (msg, info) => {
            // [address, ...data]
            var address = msg[0] || "",
                data = msg.slice(1);

            // console.log('receive', address, data, msg, info);
            // メインウィンドウにIPCでデータを送信
            mainWindow.webContents.send('osc receive', {address:address, data:data});
        });
    });
});
main.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>OscApp</title>
</head>
<body>
<h1>OSCテスト</h1>

<p id="osc_address"></p>
<p id="osc_data"></p>
<script src="./main_window.js"></script>
</body>
</html>
main_window.js
const electron = require('electron');

// IPC受信時
electron.ipcRenderer.on('osc receive', (event, message) => {
    // {address, data}
    console.log('receive', event, message);
    document.getElementById('osc_address').innerHTML = message.address;
    document.getElementById('osc_data').innerHTML = message.data.join();
});

備考

これで、高度な解析は、他の言語で作成したアプリケーションを使用して、解析結果をOSCで投げれば、Electron側でグラフィックを生成して、VJができそうですね。

送信側は、とりあえず必要がないので、実装していません。