Google VR Viewで360度動画を自前サイトから配信

Google VR Viewで360度動画を自前サイトから配信

=Google VR View、Valiant360へのブラウザの対応状況=
(2017.06.12作成, 17.11.06更新)
 
静止画にホットスポット/ openイベントを追加してリンクするよう設定
動画は JavaScript方式よりもシークバー表示可能な iframe方式を推奨
 
Insta360 Airを用いて、Androidスマホ(GALAXY Note Edge SC-01G)で 360度全天球動画を撮影して(「Insta360 Airで360度全天球の静止画と動画を撮影」を参照)、動画共有サービスへ投稿しウェブ埋め込みで提示していたが(「360度動画に対応する動画共有サービス..」を参照)、自前のWebサイトで表示させる事を可能とするツールが存在する。
Google VR ViewValiant360は、360度コンテンツを直接ウェブページに埋め込んで 360度全方位で表示させることが出来るウェブ構築用補助ツール(プレイヤー/ ビューアー)。従って、動画共有サービスに投稿しなくとも、自前のサイトで 360度ビューが出来るようになるのだ。
そこで今回、Insta360 Airで撮影した 360度全天球動画(960P、8Mbps)と静止画(3008x1504)を素材として、これらツールを使用してレンタルサーバー Xserverから配信した。そして、各種ブラウザの対応状況を検討したところ、Google VR Viewは Valiant360よりも優秀だったが、MS Edgeは上手く作動せず、IExplorer11は動画では未対応だった。

<参考> WebVRとは、Webブラウザ上でVR(バーチャル・リアリティ)を可能とする技術。現在、ブラウザでVRコンテンツを扱うための WebVR APIには、HTMLのタグを書く感覚で作成するフレームワーク A-Frameと 多種多様なツール/ライブラリ群がエコシステムを形成するフレームワーク ReactVRが有名。しかし、これらで VRコンテンツを構築するには、Google VR ViewValiant360と比べて専門的なWebフロントエンド技術の知識が求められるので扱うのが難しく、対応デバイス・ブラウザも現時点では制限される(例えば、A-Frameで配信した 自前のデモ を参照)。

=コメント=
 
両ツールは動画・静止画を本ページに直接埋め込む事は可能だが、パワー不足の端末機器は動画・静止画のプレビューを複数個同時に読み込むとクラッシュし易いので、今回はインラインフレームにて先ず「スタートのダミー画像です」ページを表示するように設定した。
A) Google VR View
   
Google VR Viewを使えば、自前のサイト(今回はレンタルサーバー Xserver)から 360度コンテンツのカスタマイズ配信が可能(本家サイト)。
対応フォーマットは、最も標準的な Equirectangular(エクイレクタングラー、正距円筒図法、Sphereスフィア)形式(パノラマ投影法は、こちらを参照)に対応してさえいれば、どんなカメラで撮影されたコンテンツでも表示可能と云う。
こちらの [Clone or download▼]ボタンから入手、今回は v2.0.1を使用した。
=設定方法=
(1) ダウンロードした vrview-master.zipを解凍すると、「vrview-master」というフォルダとなる。この「vrview-master」フォルダをそのまま、プロジェクトにコピーする。
   
 
 
vrview-masterフォルダ内の buildフォルダ内にある vrview.jsファイルが Google VR Viewの本体だ。
 
   
(2) ループ再生出来るようにカスタマイズ
   
 説明
JavaScriptを使って実装
   
(1) 記事「Google VRの「VR View」で...表示させる」に準じて、
   
記事「Google VRの「VR View」で...表示させる」より引用 展開
   
(2) 記事「再生ボタンや一時停止ボタンを追加...」と合作して、以下の如く記述して「タップしてスタート方式」とした。
   
=今回実装したJavaScriptの記述内容=
   
iPad miniのSafariの場合は、自動再生では何故か再生出来ないが、「タップしてスタート方式」にすると再生可能となる。しかし、一時停止出来ない ?(゜_。)?
なお、動画共有サービスへ投稿する場合のように 必ずしも 360 Video Metadata Toolで動画にメタデータを挿入する必要はない(こちらの実験を参照)。
=提示=
A-1) 動画をGoogle VR Viewの JavaScript方式で配信
IE, Edgeは 未対応
   
再生方法:タップしてスタートして下さい。タップするたびに再生/ 一時停止を繰り返します(残念ながら iframe方式でないとシークバーを表示させられない)。
   
   
PCで自動再生は こちら
 
=ブラウザの対応状況= 
   
 
Androidスマホは、カードボードモードに変更して VRゴーグルで 3D視聴が可能
 
 
安価な VRゴーグルで、ジャイロ機能対応スマートフォンを液晶ディスプレイとして、360度全方向に奥行きのある仮想現実感(バーチャルリアリティ)が楽しめる。上下左右へと見た方向へ連動して、視界の映像が展開しているかのような臨場感が味わえる。
なお、アプリCardboardがインストールされていなくても VRビュー可能だ。
A-2) 静止画をGoogle VR Viewの JavaScript方式で配信(ホットスポットリンク付き)
   
video: '...mp4' を image: '...jpg' に変更して、表示する静止画のパスを通す。
360度静止画でのカスタマイズについては、下の記事に詳しく解説されている。
   
記事「Google VR Viewで360°コンテンツを..埋め込む」より引用 展開
   
追記A(2017.07.15)
今回、
複数のホットスポットを設置し、そのイベントに「open」も追加して隣部屋のページへリンクするように設定した。
   
=今回実装したJavaScriptの記述内容=
   
Edgeは StandAloneではドラッグ不可
 
   
スタンドアロンは こちら、<試験>動画を開くは こちら
   
<成績>
(1) ホットスポットに openイベントでシーン切り替えが可能となった \(^o^)/
(2) カードボードモードでは使い難い ┓(´_`)┏
カードボードモードでは、注視した状態で任意の場所をタップすることでアクティブになる仕様だ。又、次シーン(ページ)への切り替えでカードボードモードは解除されてしまうので、VRゴーグルでは連続的に鑑賞出来ない・・・残念だ!
追記B(2017.07.15)
    動画をGoogle VR Viewの iframe方式で配信
   
プレイヤーに動画のコントロール機能を埋め込みたい」のサンプルページで [Clone or download]ボタンから ZIPファイルをダウンロード(turbgraphics200さん!?提供)。
取得した google_vr_for_web_test-master.zipを解凍して、
google_vr_for_web_test-master\docs内の [vrview]フォルダの名称を「vrview-master02」フォルダにリネームして使用。
   
   
*シークバーは、..nouisliderというライブラリを使用しています、との事だ。
そのままでは自動的にループ再生しないので、embed.jsファイルをカスタマイズ
   
 説明
   
<中間成績>JavaScript方式ではトラブルのあった Android6.0.1-Chrome 58も含めて、360度ビューで再生可能なブラウザはいずれも問題なく自動的にループ再生可能。
   
=今回実装したiframe方式の記述内容=
   
なお、 iPad miniのSafari場合、直接ページに埋め込むと何故か? 再生しても描画出来ない(「孫達の360度動画をGoogle VR View配信」を参照)。 そこで、インラインフレームを設置してその内に埋め込みページを読み込めば、描画可能となる事を発見した ?(゜_。)?
   
=提示=
   
タップしてスタート。タップ毎に [再生] ⇔ [一時停止]します。
IE, Edgeは 未対応
   
通常の再生では再生中シークバーを消せないが、カードボードモードでは非表示となる。
   
   
スタンドアロンは こちら
   
<成績>360度動画の配信は、 結果 3) に記した理由から JavaScript方式よりもシークバーの表示が可能な iframe方式をお勧めだ!
   
=ブラウザの対応状況= 
1) Windowsブラウザ (Windows10、タッチパネル液晶付きCF-AX2)
IExplorer11は、再生すら出来ない。
MS Edge40は360度ビュー形式で再生するのだが、ナッ何んと!マウスでのドラッグ操作に反応しない(視点を変更させる操作が出来ない)
┓(´_`)┏
Firefox53は、360度ビュー可能だが、「タップするたびに再生/ 一時停止」操作に反応しない
・Opera44, Chrome58は、360度ビュー可能だが、指でのドラッグ操作に反応しない
2) Macブラウザ (MacOSX10.12.6、Mac mini Late 2014)
・Safari11.0, Firefox55, Opera47, Chrome61は、問題なく360度ビュー可能。
3) Ubuntuブラウザ (Ubuntu 16.04 LTS 、EGGマシン)
・Firefox54, Chromium62, Midori0.5.11は、360度ビュー可能。
・Opera45(HTML5ビデオMP4に未対応)は、再生すら出来ない。

4) Androidブラウザ(Android 6.0.1、GALAXY Note Edge SC-01G)
・標準ブラウザ4.0, Opera42, Chrome58は、360度ビュー可能。本体を傾けると視点が同じ方向に追従して移動する事も可能だ
\(^o^)/
Firefox55は、映像を描画出来ない(PCサイトモードでも
ダメ)
・Edge1.0.0は、360度ビュー形式で再生するが ドラッグ操作に反応しない
カードボードモードに変更して VRゴーグルで 3D視聴が出来る機能を搭載
標準ブラウザ, Opera, Chromeは、問題なく 360度全方向に奥行きのある仮想現実感(バーチャルリアリティ)が楽しめる。
5) iOSブラウザ(iOS 10.3.3、iPad mini4)
・Safari10.0, Chrome60は、360度ビューも視点の追従移動も可能だが、一時停止出来ない
Puffin5.2.0は、再生すら出来ない

B) Valiant360
 
Valiant360こちらから入手、今回は v0.4.3)は、JS + WebGLで構築された360度パノラマビデオプレーヤー。ブラウザ上で 360度動画・写真の再生を可能とするツール。今回は、レンタルサーバー Xserverから配信した。
=設定方法=
ダウンロードした jquery.valiant360_0.4.3.zipを解凍すると、「valiant360」というフォルダとなる。 導入は、その中の demo.htmlをそのまま使ってパスを通すだけと簡単。
 
 
 今回実装したdemo.htmlの記述内容
=提示=
B-1) 360度動画を Valiant360で配信
 
<注意> 通信状況により、再生開始迄に 2~3分以上とやたら時間が掛かる場合がある!
 
 
スタンドアロンは こちら
 
jquery.valiant360.jsファイルのパラメーターをカスタマイズすれば ” autoplay ” を制御出来るのであろうが、見出せない
マウスで視点を固定するという基本的な操作が出来ない事は致命的欠陥。
残念ながら、本体を傾けて視点を同じ方向に追従移動する(スマートフォンのジャイロ)機能を表現出来ない
┓(´_`)┏
 
=ブラウザの対応状況= 
B-2) 360度静止画を Valiant360で配信
 
<div ... data-video-srcを data-photo-srcに変更して表示する静止画のパスを通せばよい
 
 
スタンドアロンは こちら

 
=成績=
各ブラウザの 360度ビューの可否
 
◯,印:360度ビュー可能、X印:360度ビュー不可、,印:ビューに問題あり
 
ディバイス
ブラウザ
Google VR Viewで配信
Valiant360で配信
360度動画
360度静止画
JavaScript
360度
動画
360度
静止画
iframe方式
JavaScript
 
Windows
10
(CF-AX2)
IExplorer11
X(再生不)
c)
c)
MS Edge40
X a)
X a)
Firefox53
b, d)
b)
b)
b)
b)
Opera44
b)
b)
e)
e)
Chrome58
b)
b)
e)
e)
MacOSX
10.12
(Macmini)
Safari11.0
Firefox55
Opera47
Chrome61
Ubuntu
16.0.4
(x32,EGG)
Firefox54
X(再生不)
Opera45
X(再生不)
X(再生不)
Chromium62
Midori0.5.11
j)
Android
6.0.1
(GALAXY
SC-01G)
ブラウザ4.0
h)
h,i)
h)
X(再生不)
e)
Firefox55
X(描画不)
X(描画不)
X(ビュ不具合)
X(再生不)
e)
Opera42
h)
h
X(再生不)
e)
Chrome58
h)
h)
h)
e)
e)
iOS
10.3.3
(iPad mini4)
Safari10.0
l)
l)
h)
X(再生不)
Chrome60
l)
l)
h)
X(再生不)
Puffin5.2.0
X(再生不)
X(再生不)
X(再生不)
 
 
a:360度ビュー形式で再生するが、ナッ何んと!マウスでのドラッグ操作に反応しない
b:タッチパネル液晶付きPC(CF-AX2)で、指でのドラッグ操作に反応しない
c:指のドラッグ操作に反応しないが、Fullscreenならドラッグ操作可能となる。
d:「タップするたびに再生/ 一時停止」操作に反応しない
e:指でタップすると描画に不具合
f:自動的にループ再生出来ない
g:360度ビュー可能?描画に不具合あり
h:360度ビューも端末の傾きに追従する視点の移動も可能
i:カードボードモードに変更して 3D視聴可能だが、再生が停止してしまう
j:ガク々再生
k:再生は可能だが上手く360度ビュー出来ない
l:タップしてスタート方式にすると再生可能となるが、一時停止出来ない
=結果=
 
1) Google VR Viewの方が、Valiant360よりもコンテンツの読み込みに時間が掛からず、Androidのブラウザ, Operaでも動画の360度ビューが可能。端末本体の傾きに追従して視点の移動も可能。しかも、カードボードモードに変更すれば VRゴーグルで 3D視聴も可能と優秀だ。
しかし、まだ改良される事を望まれる余地がある。
2) タッチパネル液晶付き Windowsマシン(CF-AX2)の Firefox, Opera, Chromeは、残念ながら Google VR Viewと Valiant360いずれも、指でのタップ/ ドラッグ操作に不都合がある(一方、動画共有サービスは 補足1) ┓(´_`)┏
3) Google VR View配信では、Windowsの MS Edgeはうまく作動せず、iOSの Puffinは静止画も360度ビュー出来ない。IExplorer11は動画を再生すら出来ない。
  追記(2017.07.15)
4) 360度動画の Google VR View配信では iframe方式を JavaScript方式より推奨する。その理由は、
 
 
(1) JavaScript方式ではシークバーを表示する事は困難だが、iframe方式なら表示可能。通常の再生中はシークバーを消せないのは残念だが、カードボードモードでは非表示となる。
(2) Androidの標準ブラウザは、JavaScript方式ではカードボードモードにすると再生が停止してしまうが、iframe方式では問題なく楽しめる。
(3) JavaScript方式では、同じページに複数個埋め込んでも再生/ 一時停止の制御が1個しか出来ず、良い方策を見出せないでいる。一方、iframe方式なら複数個埋め込んでも問題なく一個一個制御が可能(こちら のページで実証)。
 
5) iframe方式のデメリットは、Firefoxが「タップするたびに再生/ 一時停止」操作に反応しない事。又、ホットスポット/ イベントの設定は、JavaScript方式でないと難しそうだ。

補足(1) 6種類の動画共有サービスへの投稿試験では、タッチパネル液晶付き PC(CF-AX2)の指でのタップ/ ドラッグ操作は全て問題なく可能だった(「60度動画に対応する動画共有サービス..」を参照)。一方、
補足(2) 動画共有サービスにおいて、ブラウザ上でカードボードモード変更機能を搭載しているサイトは、YouTubeも含めて皆無だった(但し、専用アプリ YouTube, Vimeo, ハコスコ及び PANOPLAZA MOVIEなら可能。こちらの追加検証を参照)。

 最上段へ