Streaming Studio
使い方ガイド

下記のダウンロードリンクから index.html と sprite.png を取得します。同じフォルダに配置してください。

index.html をダブルクリック、またはブラウザにドラッグ＆ドロップして開きます。Chrome / Edge 推奨です。

左側のコントロールパネルに各機能のアコーディオンが並んでいます。使いたい機能を展開して設定を始めましょう。

OBS Studio などのソフトで「ウィンドウキャプチャー」または「ブラウザソース」でこのページを取り込めば配信に使えます。

テキストボックスに YouTube の動画URL（例：https://www.youtube.com/watch?v=XXXXX）または動画ID（11文字）を入力します。

プレイリストに動画が追加されます。複数の動画を追加してプレイリストを作成できます。

プレビュー上にYouTubeプレイヤーが表示され、再生が始まります。

「ファイルを選択」ボタンからJPEG・PNG・GIF・WebPなどの画像ファイルを選びます。

透明度スライダーで0〜100%の間で調整できます。他のソースと合成する場合に便利です。

ブラウザの画面共有ダイアログが表示されます。キャプチャーしたい「タブ」「ウィンドウ」「画面全体」を選択してください。

ダイアログで共有する対象を選んで「共有」を押すと、プレビューにキャプチャー映像が表示されます。

パネル内のスライダー、またはプレビュー上でドラッグ＆リサイズして配置します。

デフォルトの sprite.png（同梱）が自動的に読み込まれます。カスタムスプライトを使う場合はファイルを選択してください。

プレビュー上にキャラクターが追加されます。複数追加可能です。

各キャラクターのサイズ・動きの速度・アニメーションパターンを個別に設定できます。

「フォルダ選択」ボタンを押して、画像が入ったローカルフォルダを選択します。PNG・JPG・GIFに対応しています。

次の画像に切り替わる時間（秒）を設定します。

幅・位置（左・上）を数値で設定するか、プレビュー上でドラッグします。

テキストフィールドにURLを入力（例：https://example.com）し、「追加」ボタンを押します。

幅・高さを数値で入力するか、プレビュー上の右下ハンドルをドラッグしてリサイズします。

ツールバーの 「操作」ボタン：ページ内をクリック・スクロール可能。「ロック」ボタン：誤クリック防止でドラッグ移動のみ有効になります。

シーンバー下部の「＋」ボタンをクリックしてシーン名を入力します。

シーンを選択した状態でソースや配置を設定します。設定はシーンごとに保存されます。

シーンバーのサムネイルをクリックして切り替えます。トランジションエフェクト付きで切り替わります。