橋本商会

前：Web+DB Press vol.85でRICOH THETAについて書いた


THETAの数だけVM起動すれば複数接続できる。


THETAはWiFiで接続する必要があるので、USB WiFiアダプタがあるとよい。接続したいTHETAの数だけ用意する。USB WiFiを追加しないと、Macbookの内蔵のWiFiがTHETAに専有されてしまってインターネットできなくなる。

MacにTHETAを1つ接続する

MacのWiFiはインターネットに接続するのに使う。
追加のWiFiアダプタをUSB接続し、そっちをTHETAに接続する。planexのGW-USVALUE-EZが小さくていい感じなので使ってる。

「ネットワーク環境設定」の左下の歯車メニューから、「サービスの順序を設定」して内蔵WiFiを追加WiFiよりも上に持ってこないと、Macがインターネットにつながらないので注意する。


なお、THETAのIPアドレスは192.168.1.1に固定されている。ルーターのIPアドレスが192.168.1.1だったり、複数のTHETAに同時接続したりするとIPアドレスが重複してしまって接続できなくなる。

そんな時はVirtualBoxを使う

MacにTHETAを複数接続する

VirtualBoxでVMを作って、VMのネットワークアダプタの設定で割り当てを「NAT」にする。するとVMはVirtualBox内に作られた仮想ネットワークを経由してインターネットに接続する。VMのIPアドレスは192.168.56.101とかそんな感じのになる。


追加したUSB WiFiアダプタをVMに割り当てれば、

[インターネット]—[vboxnet0 (192.168.56.1)]—[VM (192.168.56.101)]—[THETA (192.168.1.1)]

のような接続で外に出る。VMではなくMac側でifconfig等で見ると「vboxnet(数字)」等の仮想アダプタが増えてるはず。

VMを複数起動してそれぞれにUSB WiFiアダプタ割り当てれば、それぞれのVMから見てTHETA(192.168.1.1)は各自に割り当てられたUSB WiFiの接続先のTHETAだけになるので、1台のMacで複数のTHETAに接続できる。

NATではなくNATネットワークにすればVM間でも通信できるはず。

Nodeから定期的にシャッター切ってSocket.IOで配信してWebGLでビューア作ってライブカメラ化した

書いた

1週間前に発売のWeb+DB Press 85号で全天球カメラ RICOH THETAのAPIについて書きました。

1. THETAのAPIをNode.jsのricoh-theta npmから使う
2. 全天球画像をブラウザで見れるビューアをWebGL(Three.js)で作った
3. 応用例：全天球Webカメラを作る

という話を書いた。

全天球Webカメラ

リモートから1分毎に撮影してその画像をPCに取り込み、Socket.IOでクライアント(webブラウザ)に配信して表示させるというもの。
こんな感じで撮影した画像をパラパラと切り替え、繰り返す。時間が立つとどんどん新しい写真が追加されてくるので面白い。視点もぐりぐり回せるし、Androidのchromeからも見れる。

ソースコードはここ
https://github.com/shokai/theta-live-viewer
サーバー・クライアント合わせてcoffeeで130行ぐらい（ライブラリは含まず）なので改造とかもしやすいと思う

不満

THETAは充電しながらWiFiからAPIを使うことができない。バッテリーだけでAPI使ってるとだいたい1〜2時間で電池が切れてしまう。

USBケーブル接続して充電するんだけど、ただのACアダプタに接続してもPCに接続された時の写真読み取り待ちモード（と言えばいいのかな？）になってしまい、APIが使えない。USB-ACアダプタ等を使って充電されている時はデータ線が結線されていないはずだから、そこを判別して写真読み取り待ちモードにならずにWiFi APIを有効にしてほしい。

http://npmjs.org/package/ricoh-theta

音量設定オプションをthetaコマンドに付けた。
THETAにWiFiで接続してから

% npm install ricoh-theta -g

% theta --volume 0

0x502C AudioVolume | RICOH THETA Developersを使って設定している。


初期型の2013年モデルはシャッター音が消せないという公式見解だけど、消せた。去年ファームウェア入れた気がするのでそのせいかもしれないけど。

node.jsでRICOH THETAを操作できるnpmを作った。nodeが入ってるMacやLinuxをWiFiでTHETAに接続して使う。

https://github.com/shokai/node-ricoh-theta
https://www.npmjs.com/package/ricoh-theta

不具合・質問などはtwitterやgithubのissueにお願いします。


ネットを探した感じだと、thetaのシャッターを切るコード片は色々な言語で実装されてた。
でもそれらはちゃんとPTP-IPのコネクションやセッションを管理せず撮影命令のパケットを送るだけなので、撮影した写真を吸い出したり、リスト取得、削除はできない。
そこでptp.jsにそれらの機能を追加して、それをさらにラップしてricoh-theta npmを作った。

インストール

グローバルにインストールするとthetaというコマンドが使える。

% npm install ricoh-theta -g

% theta --help

crontabに

* * * * * theta --capture tmp.jpg && open tmp.jpg

とか書いて大きいモニタに表示しておくだけで結構おもしろい。

ライブラリとして使う

もちろんライブラリとしてもこんな感じで使える。

var Theta = require('ricoh-theta');



var theta = new Theta();

theta.connect('192.168.1.1');



// capture

theta.on('connect', function(){

  theta.capture(function(err){

    if(err) return console.error(err);

    console.log('capture success');

  });

});



// get picture

theta.on('objectAdded', function(object_id){

  theta.getPicture(object_id, function(err, picture){

    fs.writeFile('tmp.jpg', picture, function(err){

      console.log('picture saved => tmp.jpg');

      theta.disconnect();

    });

  });

});

取得した写真はbufferなので、ファイルに書き出さずにそのままhttpで配信するとかも容易。

captureからのコールバックで撮影したオブジェクトのIDを受け取るのではなく、objectAddedという別イベントにしてある。PTP-IPがそれらを別に扱っているのでそうした（今後のTHETAでどっちが先に発火するか、逆になる可能性あるし）
この書き方だと、APIに接続していればリモートシャッターではなく本体の撮影ボタンを自分で押して撮って、オブジェクト追加通知をnodeで受けて写真を吸い取るという事もできる。

そんなわけで、最初は接続→撮影→取得っていう手続きすればいいんだからPromiseでやろうと思ったけど、socket.io風のインタフェースに落ち着いた。

PTPではオブジェクトIDのほかにストレージIDというのもあって、これは例えばデジカメで内蔵メモリとSDカードとを切り替えて使う時に指定するためのIDなんだけど、thetaは内蔵メモリしかないから常にID:1が使われている。
もし今後マイクロSDを追加できるTHETAがでてきたら、APIを変えると思う。




ptp.jsへの追加分はプルリクしておいたんだけど、今のところricoh-theta npmがインストールするptp.jsは俺のgithubのread_dataブランチからインストールするようになっている。
（2015年1月31日：mergeされたのでnpmjs.orgから普通にインストールするようにした）

nodeって、マイナーなプロトコルの基本実装がnpmになっている事が多かったり、変更が本家にmergeされていなくても言語のパッケージマネージャがgithubから依存解決できたりというのがすごい良いと思う。

全天球写真が取れるリコーのTHETAの写真を、複数枚アニメーションするビューアを作った。
Three.jsのOrbitControls.jsのサンプルをいじってたらできてた。


質問や機能要望はgithubのissueかtwitterにお願いします

デモ

http://shokai.github.io/theta-viewer.js


ドラッグで視点移動、マウスホイールで拡大縮小
safariだと[開発]→[WebGLを有効にする]を設定しないとWebGLが動かない。
ChromeかFirefoxなら動く。
Nexus7のChromeでは動くけどAndroidでもHTC One Jのchromeだと動かない。
WebGLすごくて、ChromeのCPU使用率5%もいかないけど、まだ全てのブラウザで動くわけではない。

ソースコード

https://github.com/shokai/theta-viewer.js

使い方

theta-viewer.jsをダウンロードして、自分のサーバーに設置する。
Three.jsとasync.jsとOrbitControls.js（Three.jsのexamplesの中にある）も必要。

<script src="./lib/async.js"></script>

<script src="./lib/three.js"></script>

<script src="./lib/OrbitControls.js"></script>

<script src="./lib/theta-viewer.js"></script>

適当な描画用div等を作って

<body>

  <div id="viewer" style="width: 100%; height: 100%;"></div>

</body>

var viewer = new ThetaViewer( document.getElementById("viewer") );

viewer.images = ["01.jpg", "02.jpg", "03.jpg"];

viewer.interval = 200; // ミリ秒

viewer.autoRotate = true;

viewer.load();

これで読み込める。

詳しくはgithubのREADMEや、index.htmlのソースコード見るとわかると思う。

それなりに簡単に設置できる。
設置しやすいようにasync.jsとthree.jsも一緒に1つのjsに固めてしまおうかと思ったけど、async.jsのライセンスがMIT Licenseのようで1行目にMIT Licenseと書いてないちょっとMIT Licenseじゃないライセンスだったのでやめた。