RICOH THETA SCで撮影した動画をA-Frameに埋め込む

RICOH THETA SC関連の記事その2です。 静止画の埋め込みは案外あっさり成功した(細かい部分を除けば)のですが、動画はいくつか躓きまして。

躓いたポイント

  1. RICOH THETA SCで撮影した動画が、そのままでは魚眼レンズ的な撮影をした球状の映像が左右に2つ並んだ動画として保存・再生される(フォーマットはmp4)
  2. サンプルの全天球動画を埋め込んだページをChrome(PC, Oculus Go)で表示すると、再生できずに静止画状態になるという現象が発生
    • Vivaldiは可

対処

まず1.について。そもそも動画の映像の形が意図していたものと異なるので、これをどうにかしなければいけません。 RICOH THETA SC本体やスマホアアプリ(RICOH THETA)にそのような設定はなく。 公式サイトの「ダウンロード」に「パソコン用アプリケーション」がありました。 そこで、
  1. Win10マシンに上記ソフトをインストール
  2. ファイル→開く、でPCに取り込んだ動画を選択
  3. 「天頂補正書き出し」にチェックを付けて変換をかける
とすることで、意図していた映像の方式に変換をかけることができました。 次に躓いた点の2つ目ですが、こちらはA-Frame公式サイトから360° Video – A-Frameへ移動し、サンプルのソースコードを表示してその内容通りにHTMLとJavaScriptを用意したらクリアできました。 最終的にはiPhone Safari, iPhone Firefox, Android Chrome, Oculus Goで動画が再生でき、動作したことを確認しました。 また、サンプルコードのA-Frameのバージョンが0.7.1と古かったのですが、0.9.0まで上げても動作に問題はなかったです。

課題

  • サンプルコードをそのまま流用したので、中身をあまり理解できていないこと
  • 静止画の時と同様にスフィアによる移動は可能か?
    • 動画でスフィアを設けるとその部分の映像が抜けてしまうので、そもそも採用するかどうかというのも課題ですが

参考

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。