THETA 試し撮り お手軽な全天球カメラ RICOH THETA m15 を買ったので、自サバに画像、動画をホスティング。


　THETAギャラリーにアカウントを作り、画像や動画をアップロードすれば、埋め込みコードによってブログなどに貼り付けられるけど、サーバーの速度や動画の時間制限などがあって使いづらい。なにより本家の Flash3dApplet.swf には、使いやすそうなAPIも含まれているので、自サバで運用してみる(ただしFlashオンリー)。
　Flash非対応のブラウザ向けには、画像であればThetaViewerが使いやすくていい。動画に関しては各デバイスのアプリまかせになるので、Google ChromeのIntentを使って呼び出そうとしてみたが、うまくいかなかった。

画像、動画の準備

動画撮影時のマウント 　動画撮影時のマウントの様子→
　THETAは傾きセンサーを内蔵しているので、静的(遠心力、横Gなどが掛かっていない状態)であればどの向きで撮っても、天頂補正によって(ほぼ)水平な状態を再現できる。
　純正アプリによる自動補正には限界があって、微妙に傾いていたり、ホームポジション(初期表示位置)を変更できなかったりする。そういうときは、Paint.NETのプラグインであるTHETAToolsを使用して、修正や変更ができる。修正等を行った後に保存したjpgファイルには、元ファイルのExifが書き込まれる。また、カラーバランスやレベル調整、一部ぼかしやモザイクを入れるなど処理も、Paint.NETの標準フィルターで行えるので、これは超便利!!。
　他のソフトで編集する場合は、Exif情報が失われてしまうので、exifcutterを使って、Exif情報を書き出し→編集後のjpgに書き戻す作業を行う。
　動画に関しては、両魚眼MOV→円筒MP4の変換時に、モノによっては傾きセンサーを無効にできるオプションがあった方がいいかも。
MOV
1920x1080 8Bit AVC/H.264 High@4 1:1 Progressive 14.99fps 12000kb/s
signed/two's complement(Big) 32.00kHz 16Bit 1ch 256kb/s
MP4
1920x960 8Bit AVC/H.264 Baseline@4 1:1 Progressive 14.98fps 8760kb/s
AAC 44.10kHz 1.0ch(1/0 C) LC 132kb/s

サーバー側

本家サーバーからFlash3dApplet.swfを拾ってくる(リンク先を名前を付けて保存など)。
swfobjectとjQueryも必要。

html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<script type='text/javascript' src='jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='swfobject.js'></script>
</head>
<body>
<div id='viewer'></div>
</body>
</html>

swfobject 1系

var src = 'http://server.com/pathto/image.jpg';	// 読み込む画像または動画のURL
var angle = '120';								// 初期視野角
var v_width = '640';							// ビュワー幅
var v_height = '480';							// ビュワー高
$(function() {
	$('#viewer').width(v_width);
	$('#viewer').height(v_height);

	var s1 = new SWFObject('/pathto/Flash3dApplet.swf','Flash3dApplet', v_width, v_height, "11.1");

	s1.addParam('quality','high');
	s1.addParam('allowscriptaccess','always');
	s1.addParam('allowfullscreen','true');
	s1.addParam('wmode','gpu');
	
	s1.addVariable('source', src);
	s1.addVariable('angle', angle);
	s1.addVariable('wheelControl','true');
	s1.addVariable('visibleNavigationGroup','true');		// ナビゲーションボタン
	s1.addVariable('visibleNavigationGroupMini','false');	// ナビゲーションボタン(コンパクト)
	s1.addVariable('enableFullScreen','true');
	s1.write('viewer');

	var mousewheelevent = "onwheel" in document ? "wheel" : "onmousewheel" in document ? "mousewheel" : "DOMMouseScroll";
	$(document).on(mousewheelevent,function(e){								// とりあえずdocument全体のマウスホイールをキャプチャして
		if(e.target.tagName == "EMBED" && e.target.id == "Flash3dApplet"){	// それがFlash3dApplet由来のものだったら
			e.preventDefault();												// デフォルトのスクロールを無効にして
																			// スクロールが上下どちらかを判定
			var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
			if(delta >= 10){												// Google Chromeで上スクロール(Firefoxは±3を吐く)
				e.target.doWheelDelta(10);									// doWheelDelta()を使ってスクロール
			} else if(delta <= -10){
				e.target.doWheelDelta(-10);
			}
		}
	});
});

swfobject 2系

var scrollStop = function(event){
	event.preventDefault ? event.preventDefault() : event.returnValue = false;
};
var viewer;
var src = 'http://server.com/pathto/image.jpg';	// 読み込む画像または動画のURL
var angle = '120';								// 初期視野角
var v_width = '640';							// ビュワー幅
var v_hight = '480';							// ビュワー高

$(function() {
	$('#viewer').width(v_width);
	$('#viewer').height(v_height);

	var flashvars = {
		source:src,
		angle:angle,
		wheelControl:'true',
		visibleNavigationGroup:'true',		// ナビゲーションボタン
		visibleNavigationGroupMini:'false',	// ナビゲーションボタン(コンパクト)
		enableFullScreen:'true'
	};
	var params = {
		quality:"high",
		allowscriptaccess:"always",
		allowfullscreen:"true",
		wmode:"gpu"
	};
	var attributes = {
		id:"Flash3dApplet"
	};
	
	swfobject.embedSWF("/pathto/Flash3dApplet.swf", "viewer", v_width, v_height, "11.1", "", flashvars, params, attributes);

	var mousewheelevent = "onwheel" in document ? "wheel" : "onmousewheel" in document ? "mousewheel" : "DOMMouseScroll";
	$(document).on(mousewheelevent,function(e){								// とりあえずdocument全体のマウスホイールをキャプチャして
		if(e.target.tagName == "OBJECT" && e.target.id == "Flash3dApplet"){	// それがFlash3dApplet由来のものだったら
			e.preventDefault();												// デフォルトのスクロールを無効にして
																			// スクロールが上下どちらかを判定
			var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
			if(delta >= 10){												// Google Chromeで上スクロール(Firefoxは±3を吐く)
				e.target.doWheelDelta(10);									// doWheelDelta()を使ってスクロール
			} else if(delta <= -10){
				e.target.doWheelDelta(-10);
			}
		}
	});
});

サンプル

Flash Player needed
　画像のサンプル→。
　動画に関しても、↑の"source"にmp4ファイルを指定してやれば、そのまま動く。ただしファイルを全て読み込むので、えらく時間がかかる。
約33MiBのサンプル
音量注意!!
　詳しいAPIに関しては、javascript API sampleにまとめました。

画質とか

　ズームするとデジカメ黎明期並の画質になってしまう(^^;
　ただ、一発で全天球の魅力は大きい。使い方によっては楽しい写真が撮れるかも？
　Google Maps(Google+)とかでも使えそうだし。