329.360度 画像表示、動画表示
初回：2023/9/13
最近、個人的に興味がある、360度画像というのを取り上げたいと思います。ただし、完全にまとめた訳ではないので、現時点で理解できている範囲でのみ書きたいと思います。
P子「中途半端な記事になってないの？」※1
中途半端というより、前半というか、第一期というか、『序』『破』『Ｑ』というか‥‥
P子「評判が悪かったら、第一期で打ち切りね」
1.なにがしたいのか？
まずは、360度の画像表示を、Web上で、無償で、ローカル環境で行いたいというところから来ています。
P子「なんで、そんな事がしたくなったの？」
一つは、工場内にカメラを設置し、遠隔操作で見られるようにしてみたいなと考えました。そうすると、動画を見られるようにしたくなるし、最終的にはストリーミングで表示したくなってきました。
P子「今回は、ストリーミングまで手が回っていないわね」
まあ、360度撮影できるカメラそのものが手元にないので、ストリーミング配信はもう少し後にします。
二つ目は、趣味でやってるテニスを動画で撮影したいなと思ってるのですが、その場合は、コートの真ん中に、360度カメラを設置なんてできないので、180度カメラを、2台用意して、コートの左右から撮って合成できないかなというのが、最終的な目的です。
P子「個人で2台もカメラを買うの？」
工場内360度ストリーミング配信ができるようになったときに、180度カメラの提案をしてみて購入を打診してみる予定です。
P子「そんなに都合よく行くかしら？」
2.360度画像をWebサイトに埋め込む方法
まずは、ほとんど、下記の記事を『パクパクの実』の能力で再編集しました。
≪参考1≫
https://b-risk.jp/blog/2020/10/360-photo/
360度画像をWebサイトに埋め込む方法6選を徹底解説！【360度ビュー・手順・デモ付き】
更新日：2021/11/08
この記事で一番のおすすめというのがあるのですが、それが『Pannellum』というものです。私の希望にもぴったりです。
手順も丁寧に書かれていますので、そちらを参考にしてください。
bottle.py で動かしていたので、views フォルダにダウンロードで入手した pannellum.htm を置いて、static フォルダに今回表示したかった test.jpg ファイルを置きました。autoLoad=true で、読込と同時に、表示するようにできます。
先の例は、iframe で埋め込む方法ですが、API を使用する方法もあります。
≪参考2≫
https://pannellum.org/documentation/examples/simple-example/
Pannellum → Documentation → examples → API
更新日：2021/11/08
3.360度動画を表示
≪参考2≫ のexample ページの左メニューの一番下の『Video』に、360度動画を表示するサンプルがあります。
https://pannellum.org/documentation/examples/video/
Video
Equirectangular video can be displayed in conjunction with Video.js. For this functionality, Pannellum's API must be used.
(訳：Video.jsと連携して正距円筒図法ビデオを表示できます。 この機能には、Pannellum の API を使用する必要があります。)
API サンプルのソース内で、videojs-pannellum-plugin.js や、jfk-poster.jpg が src="/js/videojs-pannellum-plugin.js"の様に書かれているので、HTMLをローカルに持ってきても、そのままでは動きません。https://pannellum.org を先頭に付ければ、サンプルをローカルサーバー上で動かすことができます。
色々とパラメータを設定すれば、いろんなことができるみたいです。
4.360度YouTube動画をダウンロードする方法
さて、最初に言ったように、まだ、カメラを購入していません。とりあえず、適当に、360度動画を見つけてテストしてみたいと思います。
P子「さっきのサンプルでいいんじゃないの？」
まあ、いざというときのために、色々なサンプルが使えれば要と思います。ここでは、360度YouTube動画をダウンロードする方法 をご紹介したいと思います。
≪参考3≫
https://www.4kdownload.com/ja/howto/howto-download-360-degrees-youtube-videos
360度YouTube動画をダウンロードする方法
4K Video Downloader+
一応、何でもかんでも取得しても良いというものではありませんし、あくまでダウンロードして利用可能な動画のみを対象にしてください。
ついでに、ダウンロードしてきた動画を、とりあえず Windows上で手軽に再生したくなるでしょう。
一番簡単なのは、動画をダブルクリックして、『映画 ＆ テレビ』アプリで再生します。すると、そのままの動画が表示されますので、その後、右下の ... から『360度 ビデオとして再生』を選ぶと、きちんと、再生できますし、マウスで回転もできます。
5.まとめ
とりあえず、画像と動画の表示までは出来ました。後はカメラを購入してストリーミングができるかどうかを試してみたいところです。
P子「180度動画の合成は？」
まあ、そちらは更に先になると思いますが、おいおいという事で。
ほな、さいなら
======= <<注釈>>=======
※1 P子「中途半端な記事になってないの？」
P子とは、私があこがれているツンデレPythonの仮想女性の心の声です。