Google VR View 〜360°の写真とビデオをHTMLに埋め込む〜

イントロダクション

現在作成中のGoogleMapを使用したブラウザアプリに写真を埋め込むような形で実装しようと考えていましたが、PHPでの実装ではXmlHttpRequestでの通信処理が遅いのと、不具合(写真が時々表示できない)があるのと、深く追求うする気もないのでやめることにしました。
そして、その代替え案として

Google VR View

これ使って動画や、写真をHTMLに埋め込もうと考えたので、調査をすることにしました。

サンプル

ここのページに「こんな感じ」というものがありました。

埋め込む方法

JSを使用して埋め込む方法がありました。使用するJSファイルは「vrview.min.js」のようです。

<script> src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

そして、360度のイメージファイルは圧縮率などを考慮に入れると「JPEG」がオススメのようです。
圧縮を改善するためにjpegを使用することをお勧めします。

メディアの配置

上のようにJSでファイルを読み込むような形でHTMLに埋め込むのでJPEGなどのファイルを適当な場所に配置する必要があります。
そして、既存の問題もあるようです。PHPでの画像表示がうまくいかない原因もここにありそうです。

Web上の既知の問題
(JavaScript APIを使用せずに)iframeを明示的に宣言し、コードと画像が異なるサーバでホストされている場合、iOS Safariでは360度画像の方向が正しくありません。

メディアとVR Viewコードが異なるサーバーでホストされている場合、360°ビデオはOSX Safariでは機能しません。

2のべき乗でない正方形の画像は、ChromeおよびSafari iOS 8では正しく表示されない場合があります。

まとめ

意図しないところで、PHP画像アップロード問題の原因がわかったものの解決に至らずですが、とりあえずはWebアプリに関して

  1. 画像でなくURLを渡すような形で表示する
  2. URL形式でHTMLに出力してJSでコントロールする

このような形で実装すると良いという発見がありました。
そして、360°の写真とビデオはこれも URLで参照先(画像などの配置場所)を指定する形でHTMLに出力するので問題なくいけそうだということがわかりました。

でわでわ。。。