現地向け幕間(Web 版)を作成する

[Gaku-Kunimi]

• url パラメータで talk_id を指定し、 幕間を表示する
• CM が流せる

脱 AE して Web でレンダリングする形のものを作る

• ロビーに常設するトラック横断の幕間
  • 各部屋でどんなトラックがおこなわれているか
  • マップ
  • Grafana
  • Kibana
• 部屋ごとに表示する幕間
  • その部屋で次にどんなトラックが行われるか
  • Grafana
  • Kibana
  • マップ
• 配信向けに表示する幕間
  • マップの代わりに現地の盛り上がりが分かる何か

開発方針

• 技術スタック
  • React (Next.js)
  • TypeScript
    • ts 向け dk のクライアントライブラリ https://github.com/cloudnativedaysjp/dreamkast-ui/blob/main/src/generated/dreamkast-api.generated.ts
  • アニメーションできるライブラリ何か
  • 参考:
    • https://github.com/cloudnativedaysjp/broadcast-ivs-monitor ( ts 向けライブラリは使っていないが他は大体同じ )
    • チュートリアル https://zenn.dev/takanassyi/articles/27a7cfb61ce37d55a4a8
• デプロイ先
  • Vercel
• 既知の課題
  • CORS 制限で API がたたけない
    • 今 dk チーム側で api-gateway を使った解決を目指しているので、それまでは以下の方法で回避
      • dk をローカルで動かす
      • json を配置して読み込む 参考: https://github.com/cloudnativedaysjp/broadcast-ivs-monitor/blob/main/src/data.ts
• 認証
  • Open ID の 認証フローを全部実装すれば、 dk 同様に Auth0 の認証画面で認証できるけど、 python スクリプト同様の 1 日有効なトークンを持たせて認証する方法で良い気がする

など

[Gaku-Kunimi]

プレイべに間に合ってくれると 休憩が埋められるので、まずはそこを締め切り効果として

[TakumaNakagame]

Web幕間について、現地のモニタには任意のデータを表示することができないとのこと。
もし表示したい場合は、別途モニタを用意する必要がある。

[Gaku-Kunimi]

/talk_id にアクセスするとそのトラックの幕間が出る [id].tsx を錬成できたので、あとは クライアントライブラリとAPI 対応とアニメーションとマップなどのコンテンツを足していけばなんとかなるかも
(CNSec なのは画像背景どーん なので許してください)
OBS の設定投入スクリプト側で 空気を読みながら適切な talk_id をパスに加えた url でブラウザソースを追加できればなんとかなりそう ( {makuai-no-fqdn}/talk_id を指定する)

[TakumaNakagame]

CMとBGMとの整合性が厳しいため、一旦従来型の動画での対応を先んじて行う。
これが終わった後、時間があればWeb幕間側の対応を検討する。

なお、これの実装が終わったら、obsbuilder側での対応も必要なので、 @TakumaNakagame に連絡する

[MasayaAoyama]

幕間動画用のスライドはこちら
スタンプラリーからアンケートくらいの５枚を使う想定
https://docs.google.com/presentation/d/1M-9ByZkVjnU6PAXcpUCijw_TqALSvKzeVbqd-PSgGVA/edit