Panotour Pro 2配信アルバムへの各ブラウザの対応


.
Panotour Pro 2配信アルバムへの各ブラウザの対応
=360度動画・写真混在アルバムの仮想パノラマツアー=
(2017.11.15作成, 19.01.06更新)

Panotour Pro 2.5は、Kolor社が開発した有料のパノラマオーサリングソフト。
360度動画、写真からインタラクティブに動作するバーチャルツアー(仮想パノラマ回遊)を創造して、ウェブ上で公開可能な 360度ビューアー/プレイヤーを構築できる。
Insta360 Airを用いて、Androidスマホ(GALAXY Note Edge SC-01G)で撮影した 360度全天球写真(3008x1504)と動画(1920x960、8Mbps)とが混在するアルバムを素材として、Panotour Pro 2.5でオーサリングした後のバーチャルツアーをレンタルサーバーから配信した(別記Panotour Proで360度映像をプレイリスト付き配信を参照)。そして今回は、各種ディバイスのブラウザがこの大容量アルバムを軽快に再生する能力があるか検証した。
<参考>Insta360 Airによる動画撮影は、960P(1920x960 pixel, 8Mbps)の他に、
2.5K (2560x1280 pixel, 16Mbps)も可能で、Galaxy S7等では 3K (3006x1504 pixel, ?Mbps)も可能となっている。しかし、ウェブ配信用途としては最小の 960Pでも容量が大き過ぎるが、画質は良くなくボケが気になる。
各種ディバイスのブラウザの対応状況
 
Google VR Viewとの比較は、別記Aの成績 及び 別記Bの成績 を参照
ネット配信としては容量が大きい 360度動画(1920x960、8Mbps)と写真(3008x1504) 混在のアルバムツワーを遂行するには、マシンパワーと適切な通信環境が必要。微力だとブラウザによってはガク々再生となり、動画が呼び込まれずスルーしてしまう(但し、初回はスルーしてもリピートすれば再生されるようになる場合も多い)。
1) Windowsブラウザ (Windows10、Let's note CF-AX2:タッチパネル液晶付きPC)
IExplorer11, MS Edge40は、360度ビュー可能だが、パワー不足の機種ではガク々再生となる。
・ Firefox53, Opera44, Chrome58は、問題なく360度ビュー可能。
いずれも指タッチによるドラッグ操作が可能だったが・・・
追記(2019.01.06)
Chromiumベースブラウザのタッチ操作に不都合が発生
 
ナッ何んと ! 何時の間にか Chromiumベースのブラウザ(Opera57, Chrome71, Vivaldi2.2)は、指タッチによるドラッグ操作が Panotour Pro 2配信の 360度映像では出来なくなっていた ┓(´_`)┏
Chromeは v70から、Vivaldiは v2.1からタッチイベント APIが初期設定で無効になった。その理由(下記事の解釈)は?
 
Chrome「Touch Events API」がスクロールを中断する 展開
こちらの記事から引用
ChromeがタッチスクリーンPCで使用されているときに、自分のWebアプリケーションのページがスクロールしないことに気付きました。問題をテストするには、chrome://flagsに行き、 "Touch Events API"を無効にしてください。逆に、私の開発マシンに問題を表示させるために、私はそれを有効にします(デフォルトはautoです)。

タッチイベントAPIが有効になっている
、Chromeのコンソール出力:
[違反]スクロール・ブロッキングtouchstartイベントに非受動的なイベントリスナーを追加しました。ページをより敏感にするには、イベントハンドラを「パッシブ」としてマークすることを検討してください。
[違反]スクロールブロッキングtouchmoveイベントに非受動的なイベントリスナーを追加しました。ページをより敏感にするには、イベントハンドラを「パッシブ」としてマークすることを検討してください。

この違反は私のjquery.min.jsファイルからのものです。バージョンは2.1.3です。

質問:
1. 私は、任意のタッチ機能を必要としない - 私は、タッチイベントAPIを無効にすることができます。 そして/またはそのベストプラクティスですか?
2. jQueryの最新バージョンでこの問題が修正されますか?私はこのような大きなバージョンジャンプについて心配しています...
3. 違反のアドバイスを読んで、私は "イベントハンドラを「受動的」とマークして、ページをより反応的にすることを検討してください。 - どういう意味ですか?ウィンドウサイズやスクロールに影響を与えるいくつかのJS関数がありますが、どうすればそれらを受動的にすることができますか?

回答:
私たちがテストできるJSFiddleやコード例はありますか?あなたのコードに問題があるかどうか疑問に思っています。
さらに問題がある場合は、この質問の解決策を参照することもできます。簡単な修正や、独自のPassiveEventハンドラを書く必要があるかもしれません。

Warning: Added non-passive event listener to a scroll-blocking 'touchstart' event

 
<設定方法>
各ブラウザの アドレスバーに Chrome://flags 又は Opera://flags 又は Vivaldi://flagsを入力すると、Experiments(試験運用機能) ページが開く。
「Available」項目は多いので、検索欄に「Touch」と入力して「Touch Events API」を探す。該当項目の [Disabled]を→ [Enabled] に変更し、再起動すればタッチ/ドラッグ操作に反応するようになる。
 
 
しかし、ナッ何んと!Opera, Vivaldiは、メジャーアップデートする毎に再設定が必要なようだ ┓(´_`)┏
<補足>
一方、オンラインストレージ(Googleマップ, Flickr、こちらを参照)及び 動画共有サービス(YouTubes, Dailymotion, Vimeoやハコスコストアなど、こちらを参照)へ投稿して公開した 360度映像は、PanoPlaza Movie以外 Touch Events APIが Disabledのままでも 何故か?タッチ/ドラッグ操作が出来てしまう
?(゜_。)?チンプンかんぷん
 
=Windowsブラウザの 360度アルブム閲覧時 CPU使用率
試験は、こちらのツアーの最後から 5~ 2番目シーンを再生して、タスクマネージャーのパフォーマンスで CPU使用率を表示して比較した。
[I] CF-AX2:Core i5-3317U, 1.7GHz、メモリー 4GBのタッチパネル液晶付きウルトラブックマシン。
CPU負荷は、Firefox Quantum< Vivaldi≦ Chrome< Opera< Firefox< Edge< IExplorerの順に大きい。
IExplorerは、写真表示時でさえ使用率100%となってしまい、動画を再生出来ない。Edgeも使用率100%となってしまうが、動画はガク々だが再生される。一方、
Chrome、Firefox Quantum、Vivaldiは軽快に作動し、動画再生もガク憑くことなく再生可能だ。
 
   
 
[II] QSWIN:Core i7-34770K, 3.5GHz, メモリー 16GBの組み立てパソコン。
CPU負荷は、Vivaldi< Chrome= Firefox Quantum< Opera< Firefox< Edge< IExplorerの順に大きい。
IExplorerの動画はややガク々再生だが、他はスムーズに再生可能。
 
 
[III] Surface Go:Pentium Gold Processor4415Y, 1.6GHz, メモリー 8GBの 2in1タブレットPC(タッチパネル液晶付きPC、「SurfaceGoは快適仕様の 2in1タブレットPC」を参照)。
CPU負荷は、Chrome ≦ Firefox Quantum< Vivaldi< Edge≦IExplorerの順に大きい。
IExplorer, Edgeは、動画再生はややガク々気味。
Chrome, Vivaldiは、軽快に作動しガク憑くことなく再生可能。
なお、Firefox Quantumは本機種と相性悪く、ガク々再生で一時停止してしまう。
追記(2019.01.06)
Firefox:のオプション>パフォーマンスで、「推奨のパフォーマンス設定を使用する」のチェックを外して、「ハードウェアアクセラレーション機能を使用する(可能な場合)」のチェックを外したら改善した!
 
   
   
2) Macブラウザ (MacOSX10.12.6、Mac mini 4)
・Safari11.0.1, Firefox55, Chrome61は、問題なく360度ビューで再生可能。
Safari11.0.2へアップしたら、ナッ何んと!360度ビュー可能だが再生が進行しなくなってしまった
┓(´_`)┏
Safari 11.1では 360度ビューで再生可能となったが、数ケ連続再生後は描画出来なく(black renderingと)なってしまう不具合が発生(下図は Black Rendering)
 追記(2018.06.23)
 
Panotour Pro 2.5.9及び 2.5.11で作成した作品では不具合あったが・・・
Panotour Pro 2.5.12(2018-06-21)にアップして出力したところ 回避されたVersion historyを参照:Workaround for the black rendering on the 4th or 5th video scene under Safari 11+)。
但し、デスクトップ版 Chrome, Opera, Safariは 最初の動画のみ自動再生出来なくなってしまった?
・Opera47は、動画によっては何故か再生エラーとなる場合がある
?(゜_。)?
 
 
=Macブラウザの 360度アルブム閲覧時 CPU使用率=
Mac mini Late 2014は、Core i5, 2.6GHz, メモリー 8GBのマシン。
試験は、Windowsブラウザと同様に再生して XRG (X Resource Graph)で CPU使用率を表示して比較した。
CPU負荷は、Safari< Firefox< Chrome< Operaの順に大きい。Operaがやや不安定以外は、軽快に作動し動画再生もガク憑くことなく再生可能。
 
   
3) Ubuntuブラウザ (Ubuntu 16.04 LTS 、EGGマシン)
・Firefox54, Chromium62, Midori0.5.11は、360度ビュー可能。
・Opera45(HTML5ビデオMP4に未対応)は、再生すら出来ない。
 
 
=Ubuntuブラウザの 360度アルブム閲覧時 CPU使用率=
EGG(EGPE66GT50P)は、 Core2 Duo E6600, 2.4GHz, メモリー 4GBのマシン。
試験は、Windowsブラウザと同様に再生してシステムモニターで CPU使用率を表示して比較した。
CPU負荷は、Vivaldi<Chromium< Firefox< Midoriの順に大きい。
Midoriは 動画再生時に使用率 100%となりガク々再生となってしまうが、Firefoxは 一応ガク憑くことなく動画再生可能。一方、Vivaldiと Chromiumは 軽快に作動しスムーズに動画再生可能。
 
   
4) Androidブラウザ(Android 6.0.1、GALAXY Note Edge SC-01G)
・標準ブラウザ4.0, Opera42, Chrome58, Edge1.0.0は、360度ビュー可能。本体を傾けると視点が同じ方向に追従して移動する事も可能。
Firefox55は、360度ビュー可能だが再生が進行しない
追記(2018.04.26)
・ Chromeは、v65以降ジャイロスコープの仕様が変更されたようで、Panotour Pro 2.5.9で作成した作品ではジャイロ機能が上手く作動せす、スッチャカメッチャカに動いてしまう ┓(´_`)┏
⇒ 「201709京都散策」以降のタイトルを Panotour Pro 2.5.11にて出力したところ、改善した。

カードボードモードに変更して VRゴーグルで 3D視聴が可能
標準ブラウザは、3D視聴可能だが、やはり再生が停止してしまう!
・ Opera, Chromeは、問題なく 360度全方向に奥行きのある仮想現実感(バーチャルリアリティ)が楽しめる。

5) iOSブラウザ(iOS 10.3.3、iPad mini 4)
・Safari10.0, Chrome60は360度ビューも視点の追従移動も可能。
iOS 11.3の Safari11.0は 360度ビューで再生可能なるも、数ケ連続再生後は描画出来なく(black renderingと)なってしまう(Chrome66も同じく不具合発生) ┓(´_`)┏
追記(2018.06.23)
Panotour Pro 2.5.9及び 2.5.11で作成した作品ではblack renderingあったが・・・
Panotour Pro 2.5.12にアップして出力したら 回避されたVersion historyを参照:
iOS 11.3+ and black rendering; ... This is related to the blend applied during the transitions between scenes. Until the release of a fix for iOS and/or krpano, the default transition for iOS devices will be made with no blend.)。

Puffin5.2.0は、[モバイル向け表示]では再生すら出来ないが、[PC版サイトを見る]にすれば 360度ビューも出来るようになり、自動ツアーも可能となるが(但し、加速度センサーによる視点の追従移動は不可)・・・下記へ
=自動ツアー(自動回転15秒後次のシーンへ自動切り替え)への対応=
 
自動ツアーの自動回転にはマシンパワーが必要で、足りないとなかなか回転が進行しない。以下の成績は、良好なマシンの通信環境下で検証した。
(1) Windowsの Firefox, Opera, Chromeは、全て問題なく作動する。一方、IE, Edgeは、機種によってはガク々ツアーのため動画の再生が飛ばされしてしまう場合がある。
(2) Macの Safari, Firefox, Chromeは問題なく作動する(但し、Safari11.0.2は再生が進行出来ない)。Operaは、動画によってはエラーとなって再生が飛ばされしてしまう場合がある。
(3) Ubuntuの Firefox, Chromium, Midori問題なく作動する。Operaは、再生すら出来ない。
(4a) Android、(5a) iPad mini 4
スマートフォン、タブレットのモバイルモードでは、ジャイロ機能を有効化すると残念(当然)ながら自動回転が作動しない為に自動ツアー出来ない(ジャイロ機能を設定しなければ、モバイルモードでも自動ツアーは可能 → トップページのスライドショーで確認)。
そこで、
ジャイロ機能を無効にして、自動回転を開始すれば自動ツアーが実行される!

<補足>
 
(4b) Androidでは、[PC版サイトを表示]にしても自動ツアーは可能となる。
 
但し、スマートフォンでは [PC版サイト..]で視聴すると、加速度センサーによる視点の追従移動(ジャイロ機能)は作動しなくなってしまう。
従って、カードボードモードに変更する意義は無くなるし、変更すると自動ツアーは停止してしまう
⇒「What is NOT supported by HTML5 player in VR mode ?」を参照
(5b) iPad mini 4
 
・Safariでは、[デスクトップ用サイトを表示]する事さえ出来ない。
・Puffinでは、[PC版サイトを見る]で閲覧すればエラー表示されるが、サムネイルからなら 360度ビューと自動ツアーが可能となる。
 
なお、Windowsの IE, Edge、Macの Operaや iPad miniの Puffinでは、動画の再生が出来なくなって(動画再生がパスされて)しまう場合がある・・・再生出来る時も出来ない時もあり、作動が一定しておらず不確実だ ?(゜_。)?チンプンかんぷん
備考:「360度動画・写真混在アルバムの自動スライドショー」について
 
(1) Windowsや Macのブラウザで視聴するだけなら、無料の Googleフォトへ投稿すれば自動スライドショーが可能(こちらを参照)。
(2) ローカルデバイスで閲覧するだけなら、Windowsと MacOSは GoPro VR Playerで、Ubuntuは VLC media player 3.0.0で、iOSは VRPlayer PROで自動スライドショーが可能(こちらを参照)。Android用に今後適格なアプリの開発されることが望まれる。
従って、Androidデバイス以外はこの高価なソフトが無くても楽しめる。

  最上段へ