「現場の負担を軽減しなければ……」 実現したのは、ブラウザでの映像編集 ~TIPSTARの開発の裏側 #3~

「現場の負担を軽減しなければ……」 実現したのは、ブラウザでの映像編集 ~TIPSTARの開発の裏側 #3~

ミクシィでは2020年6月末に、新感覚スポーツベッティングサービス『TIPSTAR(ティップスター)』をリリースしました。『TIPSTAR』は365日配信されるライブ動画と、現在は競輪(KEIRIN)を友達と一緒に楽しむことができるサービスです。

 

サービスには、レース映像をシンプルに見るのではなく、サービスユーザーがより楽しめるように、映像にテロップやBGMなどが付いています。通常であれば、専用の機材が用意された環境で映像編集を行いますが、Webベース、つまりブラウザで映像編集ができるツール『BreezeCast(ブリーズキャスト)』を独自に開発。それによって、ネット環境さえあれば、どこでも映像編集ができるようになっています。ツール開発に携わった馬淵と橋口に話を聞きました。

♯1 低コストで高品質って両立できるの? 『TIPSTAR』の“映像伝送システム”の仕組みとは
♯2 AIが勝手に映像を編集? 映像自動編集の仕組みに迫る

 

コロナ発生がツール開発を後押し

━━━━まず、Webブラウザで映像編集ができる『BreezeCast』について教えてください。

馬淵 簡潔に言いますと、ブラウザ上で映像の編集ができるツールです。

『ブリーズキャスト』の技術構成
技術環境:Vuejs / Golang / C++ / Blackmagic decklink / WebRTC
○インフラはGKE + オンプレミスサーバー
┗オンプレミスも含め、全てコンテナベースで構成
○編集のためのアプリロジックの実装はGolang
┗レースや選手の情報 ※レースのテロップ素材/BGM等
┗演者用テロップやレース結果を表示するための画像生成等
○映像編集のためのUIはVueJS
○実際に編集するための描画処理はC++で管理
┗同軸ポートのSDK描画処理
┗各素材の座標管理やレイヤーの管理

ネット環境さえあれば、どこでも誰でも(もちろんアクセス権があるアカウントのみ)映像編集ができるわけです。本来なら、編集用の機材が揃っている環境でしか映像編集ができなかったのですが、Webベースにすることでそれを可能としたわけです。

━━━━素朴な疑問なんですが、名前の由来は何なのでしょう。

馬淵 放送する」を英単語にしたら「ブロードキャスト」。それとは別に「a breeze(ア ブリーズ)」という単語に「簡単にする、楽にする」という意味があります。「簡単に放送する」という意図を込めて、造語から命名しました。

━━━━特長をあげるとすれば何でしょうか。

馬淵 従来だと同軸映像のため、物理機器が必要になり、制約が大きい。TV局の編集室とかでモニターがたくさん並んでいる様子をイメージしてもらうととわかりやすいかもしれません。あのモニターには基本的に物理配線を通して繋いでいるはずです。動画配信サイトで見る映像の形式のように、インターネットですぐ閲覧できる状態ではないですね。『TIPSTAR』では、同軸映像をWeb上でリアルタイムに閲覧できるようにする必要がありました。また、テロップ合成するための素材を、Webから同軸でリアルタイムに流せる必要もありました。そこにWebRTCの仕組みを使用すれば、同軸を脱却できるのではないかと。Webの技術に寄せて作ったんですけどね。


物理ボタンを操作し編集していた当時

 


実際の『BreezeCast』の画面

 

BreezeCast』画面のキャプチャ

 

━━━━仕組みについてもう少し詳しく教えてください。

馬淵 具体的には、同軸の映像をサーバーで吸い上げ、その映像と音声をWebRTCに乗せてリアルタイムで表示しています。その際、テロップ素材を同軸に乗せるために、合成する素材のレイヤーを管理する必要があるので、C++で映像素材の管理ライブラリを構成しています。(C++のライブラリをcgoによってgoから利用して、レースロジックはgoで記述)

━━━━なるほど。このツール開発の経緯は何だったのでしょうか。

馬淵 前回でも少し触れている通り、サービスの将来的なスケールを実現していくためには、運用における人的・機器コストを抑えることが重要です。ではどうやって課題を解決していくかという観点で、一つは映像編集における現場での負担を軽減していくことでした。物理スイッチ運用からの脱却や、遠隔でも操作可能なインターフェースを整えることなどです。そこで、編集をするための基盤をソフトウェア化/API化する必要があったんです。

━━━━確かに、映像の編集の環境をWeb化することのメリットは大きそうです。

馬淵 あとは新型コロナの発生で、物理的に編集スタジオに籠って作業というのが難しくなったのもありますね。編集作業をするにも、室内のスタッフの密を回避しなければならない。そうなると、従来通りの編集スタジオで作業をするという制約をとっぱらって、自宅でもできるような形を実現したかったわけです。

橋口 場所の制約が無くなったのは大きいですよね。専用の編集スタジオに行かなくても、タブレット端末から操作できるのは、映像編集における大きな前進だと思います。テロップやBGMなどを、ブラウザ上からタップ一つで映像に反映できるようになった操作性も魅力かと。

馬淵 例えば物理機器だと、あるデザインされたテロップをカスタマイズしたい、変更したいとなった場合、機器ごとに調整しなければなりませんが、ソフトウェアで制御できるようになったため、比較的楽に対応できるようになったのも利点ですね。◯◯の会場では『ご当地テロップを使用する』『BGMを変更する』なんてカスタマイズがクイックにできるようになれば、サービスのクオリティ向上につながるはずですから。

 

現場のみなさんの協力があってこそ完成した

━━━━このツール開発は難易度が高いものだったのでしょうか。

馬淵 ツール自体の開発が大変だったというよりも、大変だったのは私の業務理解ですね。

━━━━どういうことでしょうか。

馬淵 真に「運用負荷を軽減する」というツールを作ることの難しさを実感したプロジェクトでもありました。そもそも開発者である私自身が、生放送の映像制作や編集に対する現場感が皆無(苦笑)。実際、編集を理解していない頃に開発したツールは全くと言っていいほど運用負荷軽減に貢献できていませんでした。

━━━━どのように理解に努めたのですか。

馬淵 本当に役立つツールなのか、まず自分の感覚を掴むために現場で作業をしました。実際に机を1つ空けてもらって、編集業務を体に叩き込むところから始めました。現在の映像制作の手法を編集スタジオで何回も見ては、担当者にヒアリングを繰り返す。その後もさらに毎週ヒアリングをして、映像制作側の声や要望を取り入れ続けました。

━━━━地道な努力というか。

馬淵 はい。このフェーズを経たことで、ようやく運用負荷を軽減するツールになったと感じています。映像編集担当の方によって、Webの技術はこれまでと異なる分野や文化だったかもしれませんが、適合させるためのポイントを探り、もっとも価値が最大化できるようアジャストしていく。一番の高難度でしたが、同時に一番面白いところだったと思います。最終的には、映像制作チームとの会話や議論などコミュニケーションを適切にとりつつ、信頼関係を構築できたのがツール完成の要因だと思っています。

━━━━そのおかげもあって、自動編集の仕組みやこのブラウザ編集のツールが生まれ、映像編集作業がとても楽になりますね。

橋口 そうですね。現場の編集担当の方からも反響をいただいています。『仕事が無くなる(笑)』という冗談交じりの嬉しい声もあるようです。単調な仕事はとにかく無くして、映像そのもののクオリティ向上にパフォーマンスを発揮していただきたいですね。

馬淵 繰り返しになりますが、ソフトウェアベースなので、BGM管理/テロップ切り替えタイミング/リアルタイム画像生成など生放送の映像編集上の細かなルールをソフトウェアに任せる。細かいステート管理をソフトウェアに任せることで、運用負荷を削減できますし、編集者は「面白いテロップを考える」ことにより集中できる。それが映像のクオリティ向上につながり、サービス価値向上に繋がる。

━━━━ちなみにですが、ツールの完成度はどれくらいでしょうか。

馬淵 細かい調整や修正はありますが、一通り完成していると考えています。『TIPSTAR』の映像編集に携わる担当の皆さんの負担を可能な限り軽減する。これが実現できたのは、現場の編集のみなさんとの協力体制のおかげだと思っています。とはいえ、まだ物理制約があるので、インターネットの技術だけで完結するのが最終的な理想です。その基盤を完成させ、ゆくゆくはミクシィが今後展開していくサービスに汎用的に活用できれば、本望ですね。

橋口 昂矢
2012年にミクシィへ新卒入社。SNSの検索エンジンの開発・運用を担当した。2013年、社内ベンチャー制度によって株式会社ノハナの立ち上げに参画・創業。ノハナ、ノハナ年賀状アプリの新規開発や機械学習による画像認識やGCPへのバックエンド移行に従事。みてねでは、1秒動画における画像認識エンジンを開発。2017年、株式会社スマートヘルスの立ち上げに参画・創業。姿勢推定を用いたプロダクト開発や京都大学医学部との共同研究に参画。現在は『TIPSTAR』で、AI映像編集システムの開発・運用に従事。
馬淵 俊弥
国内ISPにネットワークエンジニアとして新卒で入社した後、2018年にミクシィへ中途入社。入社以降、『モンスターストライク』のインフラネットワークの、運用・開発に従事。XDP/DPDKを用いたネットワーク機能開発や、ホワイトボックス機器等の導入検証や設計を実施。現在は『TIPSTAR』で、AI映像編集システムの開発・運用に従事。
PAGE TOP