StreamBoard

YouTubeやTwitchの配信を1画面で複数同時に視聴できるWebアプリです。

開発の背景

「複数の配信を同時に見たい」 ゲーム大会やイベント配信では、複数の視点や配信者を同時にチェックしたい場面があります。デュアルディスプレイがあれば解決できますが、誰もがそのような環境を持っているわけではありません。

また、海外配信を見ていると英語のチャットが読めないという課題も感じていました。 そこで私たちは、複数配信の同時視聴に加え、AIによる翻訳機能を備えたWebアプリを開発することにしました。

＜主な機能＞

マルチストリーム表示 URLを入力するだけで、複数の配信を1つの画面にタイル形式で表示。ドラッグ&ドロップで自由に配置を変更でき、各タイルのサイズも調整可能です。動画のコメントも表示出来ます。

音声再生の見える化 音声再生中の動画に枠線を表示する機能を実装。YouTube は赤、Twitch は紫の枠線で、音の出どころが一目でわかります。

AIによる盛り上がり検知 Twitchのチャットをリアルタイムで取得し、Amazon BedrockのClaude 3 Haikuで分析。「www」「すごい」などのポジティブな反応を検出し、盛り上がり度を0〜100%で可視化します。 複数配信を開いているときに、どの配信が今アツいのかが一目でわかります。

リアルタイムチャット翻訳 海外配信のチャットもAmazon Translateで自動翻訳。言語の壁を超えて、世界中の配信を楽しめます。

レイアウト保存・復元 アカウント登録をして、お気に入りのレイアウトをクラウドに保存すると、いつでも同じ配置で視聴を再開できます。

技術選定の背景 フロントエンドには、React + JavaScript + Tailwind CSSを採用しました。JavaScriptを選んだ理由は、チーム内に経験者が3人いることと、初学者がTypeScriptの型エラーで詰まるリスクを避けられることです。Reactはチームに経験者がいることに加え、ドラッグ&ドロップなどのライブラリが豊富で、マルチストリーム配信の配置変更という今回の開発にはほぼ必須だと考え採用しました。

バックエンドには、AWS Amplify Gen 2を採用しました。2週間のハッカソンという限られた期間でMVPを完成させるには、開発スピードが最優先だと考えたため、認証（Cognito）、データベース（DynamoDB）、API（AppSync）、ホスティングがワンストップで提供されているAmplifyを採用しました。

技術スタック

• フロントエンド: React, Vite, Tailwind CSS
• バックエンド: AWS Amplify Gen 2, Lambda, AppSync
• AI/ML: Amazon Bedrock (Claude 3 Haiku), Amazon Translate
• 認証: Amazon Cognito
• データベース: Amazon DynamoDB

システム構成図