Chromebox Commercialで空と実とをつないでみた

AOPEN Chromebox Commercial (以下Chromebox)はGoogle Chrome OSを搭載した商業用の小型メディアプレーヤーです。

今回はこのChromeboxの持つ新たな可能性を探ってみようぞ！おー！

ということで、いろいろなハードウェアやクラウドサービスや開発環境を組み合わせて、IoTのハブとして活用してみました。

Chromeboxでこんなことが出来る

Webカメラが使える

手元にあったLogicool HD Pro ウェブカメラ C920を繋いで、Chromeブラウザ上のJavaScriptからgetUserMedia APIを使って映像を取得することが出来ました。

Unityで開発したWebGL版アプリが動く

アプリの開発スタイルとしてはHTMLやJavaScriptを直書きするのも好きですが、Unityでグラフィカルに作るのも大好きです。WebGL版でビルドすれば動くのでは？ということで早速やってみたところ難なく動きました。

WebGL版のビルドやデバッグのやり方は、UnityのWebGLについてドキュメントを読めばお分かりいただけるかと思います。WebGLの場合直接ソケットが使えない制約などがあるので、Unityのマニュアルに一度目を通されることをお勧めします。

Arduinoが動く

Chromeブラウザ上で動くChrome AppsはUSBデバイスにアクセスするためのAPIが用意されています。(参考: USB Devices)

ChromeboxのUSB端子にArduino Unoを接続して、Chromeブラウザからシリアル通信できるか試してみました。そしてこちらも無事に動きました。

SparkFun社のBlogにChrome+ArduinoというタイトルでArduinoの接続方法が載っていますので、ご参考にしてみてください。

Bluetooth LEデバイスと通信できる！

私たちクウジットが試作している9軸センサーを搭載したスポーツセンサーボード「Q.board」にはBluetooth LE(以下BLE)の通信モジュールが搭載されていて、PCやスマホとの間でセンサーデータをやりとりすることが出来ます。そして何とChromeboxにはBLE対応のBluetooth 4.0のモジュールがビルトインされているので、特別な機器を追加せずともQ.boardが接続できるはずです。

これはChromeブラウザのWeb Bluetooth APIを利用して繋ぐしかない！！

これも簡単に繋がりましたよ！！

画面上の9軸センサーの値が手の動きに合わせて変化しているのが分かりますね！(って分かりにくいですね。次回はGoogle ChartsやD3.jsでイケてる表現にしましょうね)

参考までに、Web Bluetooth APIでQ.boardのセンサー値を取得してコンソールに出力するJavaScriptを載せておきます。

// 1. ボタン等を配置して、そのボタンが押されたらQ.boardとの接続を開始する
function onClick() {
    var options = {filters: [{　namePrefix: QBOARD_NAME}]};
    navigator.bluetooth.requestDevice(options).then(found, error);
}

// 2. Q.boardが見つかった
function found(device) {
    // GATTプロファイルで接続を試みる
    device.gatt.connect().then(gatt, error);
}

// 3. GATTプロファイルで接続出来た
function gatt(server) {
    // Q.boardが提供するサービスに接続する
    server.getPrimaryService(QBOARD_SERVICE).then(service, error);
}

// 4. Q.boardが提供するサービスに接続出来た
function service (service) {
　　　　// Q.boardが提供するCharacteristicに接続する
    Promise.all([
    	service.getCharacteristic(QBOARD_CHARACTERISTIC_0),
    	service.getCharacteristic(QBOARD_CHARACTERISTIC_1),
    	service.getCharacteristic(QBOARD_CHARACTERISTIC_2)
    ]).then(characteristic, error);
}

// 5. Characteristicを取得出来た
function characteristic (characteristics) {
    // characteristicの値が変化したらイベントを受け取る
    characteristics.forEach(function(value, index, array) {
        value.addEventListener('characteristicvaluechanged', characteristicValueChanged);
        value.startNotifications();
    });
}

// 6. Characteristicの値が変化した
function characteristicValueChanged(event) {
    // センサーの値を出力してみる
　　　 console.log(event.target.value);
}

// エラーの場合
function error (e) {
    console.log(e);
}