NHKさま スマートフォン360°映像TV放送連動WEBシステム

f:id:unibainfo:20180517185842g:plain

概要

NHK BS1スペシャル : 360°ドキュメンタリー「激流に挑む 〜密着! カヌー選手 羽根田卓也〜」システム制作。 NHK BS1スペシャル : 360°ドキュメンタリー「知られざるトランプワールド」システム制作。

NHK BS1で二度に渡って放送された360°ドキュメンタリー企画の特設コンテンツを開発しました。 番組の詳細については、下記の各番組公式サイトをご覧下さい。

これらの番組では、通常の放送用カメラに加えて360°カメラでも取材中の様子を撮影しており、放送中、特定のタイミングで特設サイトにアクセスすると、テレビで放送している角度の映像に加え撮影時に周辺がどんな様子であったのかを見回せる、という新たな試みがなされました。

我々は、その企画の Web 方面の柱となる、特設サイト上での360°動画配信システムの開発を担当し、もう一方の柱である放送での内容と時間的にシンクロさせてコンテンツを提供する事で、新しい体験を作るお手伝いをさせて頂きました。

実際の放送は終了してしまいましたが、羽根田選手の番組HP では、スマートフォン限定で短い時間ながらどういったコンテンツだったのか体験できるサンプルも公開されていますので、そちらも参考までにご覧下さい。本当は、放送と連動している状態でご覧頂き、普段放送されている内容の、カメラの死角に迫れる自由度を体験頂けると良かったのですが…。また次回の企画があるかも知れませんので、そちらをぜひお待ち下さい。

開発者コメント

Rei Kawai Rei Kawai

企画を行う番組制作の皆様方と連携し、弊社内での開発物のディレクションを行いました。

番組の企画面でのチャレンジをより良い結果に繋げるために、実験的な開発からスタートし、放送連動が実現するまでにあった課題は

  • 360度にマッピングされた動画のスムーズな再生
  • 取り扱いやすいビデオフォーマットの選定
  • 画質面での向上と、ネットワーク帯域とのバランス
  • 放送とのタイミングの確実な同期
  • 360度を眺めつつ、TV放送ともバッティングしないUI
  • 万一、放送の編成が変更されても対応できる柔軟性
  • 各種環境への可能な限りの対応

と多岐に渡るものでした。

それぞれがトレードオフ的な事になる条件も多く、例えば、配信時のデータ転送のスムーズさと画質面での向上を図る部分などでは、それぞれ適切な落としどころにバランスさせていく必要があったり、あるいはUI面などどういったUI設計をすると、放送を見ながらスマートフォンの画面内で展開されるコンテンツと双方を楽しんで頂けるかという事を考えながら、各所に調整をしたり技術的な可能性を探ってもらったりした日々が思い出されます。


Ryo Murayama Ryo Murayama

動画を全天球マッピング用のモジュールに転送するための動画プレーヤーとして動作するモジュールの設計と実装を担当しました。

最も気をつかったのは、TV放送との同期を確実に行うための仕組み作りです。単に決められたタイミングで動画の再生をキックするだけでは、TVで放映されている映像とスマホ上の映像とのずれが少しずつ広がってきてしまいます。動画のロードやデコード処理の遅延に起因するずれが一定範囲内におさまるよう、再生位置をこまめにコントロールする必要がありました。

利用可能な動画形式のバリエーションが多岐に渡る点も考慮すべきポイントです。スマホで見たときの画質の向上はプロトタイピングを進める中で見えてきた大きな課題で、土壇場で利用する動画のコーデックが変更になることも予想されました。実際、第1回放送ではMPEG-1、第2回放送ではH.264形式の動画を再生しましたが、それぞれ動画のデコードに利用するライブラリは異なります。ライブラリのふるまいの差異をきちんと隠蔽して、アプリケーションから見たときに同じAPIとして利用できるよう設計・実装することで、仕様変更に耐えられるような仕組みを作る点に気をつけました。


Noriyuki Shimizu Noriyuki Shimizu

おもてなし感や見た目を整えるところを担当しました。

今回の制作では没入感を表現するために、スマートフォンでの再生と放送とに齟齬がない様なUI上の調整を行いました。 また技術的な学びが多く、特に私が担当した範囲ではiOS 11のWebViewにおいて「画面サイズの取得がうまくできない」という挙動が印象的でした。 ぜひ提案や、次回の企画などの制作で活かしたいと思います。

CREDITS

Client: NHK
Development: Rei Kawai, Guillaume Piccarreta, Noriyuki Shimizu, Sei Kataoka, Ryo Murayama, Seiya Konno, Koichiro Mori