この記事は TSKaigi Advent Calendar 2024 の記事です。

こんにちは

こんにちは、先日京都で行われたTSKaigi Kansai 2024にて配信チームをしていたmagchoです。

当日の会場の映像周りとリアルタイムの配信を行なっていました。

配信の様子

当日の配信のレイアウトとしては配信スライドと登壇者のカメラ映像に加えて、トーク中のセッション名や登壇者情報・スポンサー様のロゴなどを掲載していました。

TSKaigi 2024に参加いただいた方にはピンとくるかもしれませんが、このレイアウトは2024年5月に東京中野で開催したものをforkして利用しています。その時の技術面の解説記事を当時ken7253さんがブログにまとめていただいているので興味のある方はそちらもご覧ください。

TSKaigi 2024のレイアウトがReactコンポーネントとして実装されており 1920 x 1080pxのDIV要素が描画できるようになっています。

今回はそのレイアウトをforkし、Kansai2024版にいくつか作り替えた上で利用しています。

前回のTSKaigi2024ではこのレイアウトをNodeCGというブラウザベースの描画を伴うOSSを利用してレイアウトの描画を行っていました。これには描画用のPCを必要とする構成になります。Kansaiでは事前の準備時間が短いなど前提が異なっているため別のアプローチを実施しました。

利用機材の内容

TSkaigi 2024では準備時間が十分あり、当日は字幕・翻訳などリアルタイム性の高い要件があったためリアルタイムにReactコンポーネントを描画するためのPCを専用に用意していました。Kansai2024では準備時間と配信要件から専用のPCを設置しない方向で調整をしています。

メインスイッチャーにはRoland社の VR-6HDを利用しそれぞれinput/outputを設定しています。

レイアウト描画用PCを幕間CM再生PCと兼任させることでPCの台数を減らしています。

配信レイアウトの構造

レイアウトは３つのパーツに分かれていて枠・スライド・カメラ映像を現地のVR-6HDで合成します。以前はこの合成を行うためにPinPを利用していましたが、Kansaiでは素材については事前に動画としてレンダリングをしてRoland社からリリースされているGraphics Presenterを利用し当日はDSKレイヤーとして利用する方針をとりました。

Reactコンポーネントから配信枠動画を生成する

Reactコンポーネントを利用して動画ファイルを生成するフレームワークとしてremotionを採用しました。

remotionにはStorybookのようなカタログ機能と、レンダリングの操作をGUIから行えるstudio機能がついています。

Root.tsxにてフレームワークが提供する<Composition>コンポーネントでwrapする形にReactコンポーネントを記述するとStudioの中央に描画されます。

フレームワークの特性でCSSアニメーションやsetTimeoutを用いるような操作は想定とは異なった挙動をします。そのため、時間経過を元にするアニメーションを作成するにはremotionが持つカスタムフックであるuseCurrentFrameから今再生中のフレーム数が取得できるのでその数値からアニメーションの計算・描画を行います。これはcanvas要素でアニメーションを作る際はrequestAnimatonFrameを元にフレーム数を計算しアニメーションを行うアプローチが取られることがありますがそれに近い概念です。

DSKレイヤーであれば配信のスライドとカメラ映像の部分を穴あきにしておきたいのですが、remotionでは出力の動画を透過させることができません。幸い今回の要件では透過はopacity0% or 100%のどちらかでありグラデーションが存在しないためremotonで透過部分をgreenで出力し、後処理としてgreen部分を透過させます。

Graphics Presenterはwebm形式であれば透過を含む動画を読み込む事ができます。

まとめ

以上の構成で当日のオペレートはGraphics Presenterとビデオスイッチャーの操作のみに集約でき、準備時間の圧縮をする事ができました。

簡単な配置をするだけのレイアウトではあるもののセッション名やスポンサー様のロゴなどパターン数が多いようなテックカンファレンスにおいて宣言的に配信のレイアウトを生成できるようにしておくのは便利です。今回はReactコンポーネントをベースとしたことで異なったアプローチでも流用ができるためおすすめです。