©TIPSTAR TIPSTARの ライブ・プロダクションシステムの裏側 2021/04/13 Toshiya Mabuchi

©TIPSTAR ⾃⼰紹介 株式会社ミクシィ 開発本部 インフラ室 映像技術グープ @raibo Toshiya MABUCHI @Mabuchin ・ネットワークアーキテクチャ設計/運⽤ ・ネットワーク機能開発 ・映像伝送&映像編集システムの設計/開発

©TIPSTAR About TIPSTAR •競輪（公営） • 全国43会場 • 6〜10会場/⽇（朝・昼・晩・深夜） • 365⽇ • AM08:30 〜 PM23:30 •TIPSTAR • 365⽇すべての競輪レースをライブ中継 • AM10:30 〜 PM23:30の間で実施 • 演者の予想にのっかって賭けられる • iOS, Androidアプリ,Web版で提供

©TIPSTAR TIPSTARの映像編集

©TIPSTAR TIPSTARのライブ・プロダクションで⾏うこと • 1⽇中並列で開催される競輪映像への演出追加 • 状況をわかりやすくするためのテロップ • 盛り上げるためのBGM • 競輪を実際に観戦しながら応援する演者チームへの演出 • 吹き出しテロップ • 状況をわかりやすくするテロップ • 背景のクロマキー合成 • レース結果や的中⾦額のアニメーションのリアルタイム⽣成 6~10会場 /⽇ * 365d 3チーム/⽇*365d (2万レース↑ / 年) (1095番組 / 年)

©TIPSTAR 映像伝送~編集まで概要

©TIPSTAR 現状の映像の伝送と編集 競輪場 競輪場 競輪場 競輪場 43会場 東京スタジオ データセンタ Cloud配信 User 編集操作 光伝送 AI レース編集 光伝送 今⽇はここの話

©TIPSTAR 当初からの課題

©TIPSTAR 当初の課題 • 映像編集の運⽤負荷が⾼い︕︕ • 映像/⾳声を操作するために多数の機器を操作 • 繰り返して⾏うと、オペミスの発⽣率が⾼くなる • 品質が⼈依存 • 動的なテロップ⽣成/再⽣が必要 • 映像素材を複雑に組み合わせて使うケースもある • 既存の製品だけでは運⽤的負荷が軽減しにくい ロジックや制御をソフトウェア内に閉じて 「簡潔に操作可能」にすることで運⽤負荷を下げ、品質を維持する仕組みが必要

©TIPSTAR サービスイン前の映像編集の⾵景

©TIPSTAR 新型コロナウィルスの流⾏

©TIPSTAR さらにソフトウェアベースでの編集が急務に 「3密」を避けながら撮影/編集を⾏うことが必要に 全ての操作を直接編集機材を操作することによって実施 リモートでも従来と変わらない編集を可能にする システム開発が必要 新型コロナウィルス 当時のスタジオ

©TIPSTAR これら2つの課題に対応したい

©TIPSTAR リモート編集システム「BreezeCast」 • BreezeCast : ⾃社製統合映像編集システム • 完全Webブラウザベース • SPAによるインタラクティブな編集 • 映像の編集ロジックを内部に組み込んでボタン⼀個で複雑な編集をこなす • WebRTCによるリアルタイムなモニタリング • 同軸映像 -> Webブラウザへのリアルタイムモニタリングを低コストで実現 • ロジック周り : Go • 同軸へのレンダリング : C++

©TIPSTAR おおまかな構成 • Logic API • ML Scheduler • 各種データバッチ • 録画ステート管理 • スイッチャー管理 • 遅延実⾏キュー（編集予約） • OpenGL based render • Production Switcher • Video Switcher • ML Server • SDI Monitoring Front(Vue.js) GCP On-Premise grpc-gateway CloudSQL BatchJobs BatchJobs BatchJobs BatchJobs WebRTC SFU Redis OpenGL Decklink grpc api OpenGL Decklink grpc api OpenGL Decklink grpc api ProducOon Switcher ML Server ML Server SDI Monitoring grpc UDP rtp AI server rtp grpc Logic API Delay queue

©TIPSTAR 編集をリモートで⾏うための対応

©TIPSTAR そもそもライブ編集をするには • 編集前のリアルタイム映像が必要 • 編集前の映像と⾳声を聞きながら編集ポイントを掴む • 配信上の映像がBGMのみ/フタのみのケースでも状況を知る • 編集後のリアルタイム映像が必要 • 編集後のテロップやBGMが正常に流れているか確認が常に必要 編集前 編集後

©TIPSTAR 実現させる⽅法 編集前 編集後 リアルタイムな映像伝送 既存のWebシステムで利⽤可能 && ↓ WebRTCの利⽤

©TIPSTAR WebRTC? Web Real-time Communication ① 低遅延なデータ送受信(⾳声/映像/その他データ) ② Webで利⽤可能 ③ 双⽅向でのやり取りが可能 WebRTCスタックは株式会社時⾬堂の「WebRTC SFU Sora」及び「momo」を利⽤ →実質2-3営業⽇程度で同軸映像をWeb上に低遅延で表⽰可能に︕

©TIPSTAR WebRTCの同軸モニタリング構成 Cloud • SFU Sever(Sora) • Client js On-Premise • SDI映像取得 • リサイズ • エンコード • WebRTC Client(momo) 同軸映像 ffmpeg SDI->v4l2 ffmpeg SDI->alsa Decklink alsa v4l2 Momo Encode video and send RTP SORA SFU Server Vue.js UI …. …. GCP On-Premise

©TIPSTAR 同軸映像の簡易モニタ完成 先程の映像も編集前編集後での時間のズレなし ここでは確認できないが、 実際の同軸フレームと⽐べて 3フレーム程度の差(約0.1秒)で現在も運⽤中 問題なくリモートでライブ編集が可能に

©TIPSTAR さらなる編集の品質改善 & 運⽤負荷削減

©TIPSTAR 編集品質を上げるために • 編集ロジックのAPI内に定義 • 1ボタンを押すだけで編集が完結 • ステート遷移に応じて演出が実⾏ • レースの情報や選⼿情報の ⾃動取得 • 緊急時にも操作可能なUI • アプリ情報と連係した⼯数削減 UIの同じ箇所をタップする だけでステート遷移

©TIPSTAR AIによるレース映像編集 • GCP AutoMLで学習 • 詳細は 5/26のこちらのセッションで話されます • Edge TPUをオンプレミスサーバーに配備し、低コストでの編集推論 • WebRTCのRTPを取得して推論 • 状況を判断して、AIが映像編集のAPIを叩くことで⾃動編集を実現 • Edge TPU1個あたり35$！ EdgeTPU 編集API Scheduler ML API Infer process BreezeCast ML Server EdgeTPU

©TIPSTAR 苦労していること • 映像の演出は「1度きり」 演出タイミングはリトライできない • Exactly Onceにどれだけ近づけていけるか • API命令からいかに素早くレンダリングまで完了させるか • １サーバーで複数番組のレンダリングを⾏う • CPUキャッシュ / リソースをシビアに考えながら割当が必要 • レンダリング割り込みは最も新しい命令を優先 • 描画の完全性より今の命令 • Web上でストレス無く編集できるための試⾏錯誤 • ひたすら現地スタッフとのトライエラーの繰り返し • 現場でいかに「ストレス無く」操作できるかが最重要 • 便利なはずの機能が現場では⾜⼿まといになるケースも

©TIPSTAR まとめ • TIPSTAR映像編集の概要紹介 • TIPSTARのライブプロダクションシステム「BreezeCast」 • フルリモートでスタジオと同等な編集環境 • WebRTC / SPA UIによるストレスフリーな映像編集 • 運⽤負荷削減映像編集を統合管理 • スイッチング • テロップ載せ • 録画・再⽣ • AIによる編集のによる運⽤負荷の⼤幅削減

©TIPSTAR 今後⽬指していきたいこと • より盛り上がる映像演出が可能な仕組みの実現 • 既存システムのメリットを活かしつつ • より⾼度な演出管理が可能なUnity/UE4等のレンダリングエンジン導⼊ 膨⼤なケーブル管理から脱出し、 ソフトウェアベースの管理でインフラ運⽤負荷も⼤幅削減へ ユーザがより夢中になれる要素を⼊れることによるサービス価値向上 • IPベースの編集システムへの進化 • 既存はあくまで編集は同軸ケーブルを利⽤したSDIが中⼼ • SMPTE ST2110等をサーバーでも活⽤し、IPで全ての映像を送受信

©TIPSTAR 参考リンク • AIが勝⼿に映像を編集︖ 映像⾃動編集の仕組みに迫る〜TIPSTARの開発の裏側＃2〜 • h1ps://mixil.mixi.co.jp/product/9328 • 「現場の負担を軽減しなければ……」 実現したのは、ブラウザでの映像編集 〜TIPSTARの開発の裏側 ＃3〜 • h1ps://mixil.mixi.co.jp/product/9364 • ライブ映像のシステムをIPベースで作ってみた • h1ps://www.janog.gr.jp/meeKng/janog47/live/

©TIPSTAR