Event Flow用のメディアファイル

最適な方法を選ぶ

選択肢1：組み込みのアップロードを使う

1. Event Flowで選択する項目： 音声クリップを再生（Play Audio Clip） または メディアオーバーレイを表示（Display Media Overlay）.
2. クリックする項目： アップロード（Upload）を選び、ファイルを指定して、開いたページでアップロードを完了します。
3. 返された次のURLを確認してください： https://fileuploads.socialstream.ninja/media/... のURLがアクションに表示されることを確認してください。
4. フローを保存し、次を開いたままにします： actions.html?session=YOUR_SESSION をOBSで開いたままにします。

アップロード先のアカウント容量が1GBと表示され、ライブラリがそれを超える場合、以下のローカルフォルダーまたはクラウドストレージを使用してください。

選択肢2：OBSのコンピューターにライブラリを置く

単体デスクトップアプリには、ローカルメディアライブラリと、このコンピューターだけで待ち受けるループバックサーバーが含まれます。Event Flowは、ディスク上のパスをフローに含めず、安定したメディアIDを保存します。

1. Social Streamの単体アプリを起動し、Event Flowを開きます。
2. 選択する項目： 音声クリップを再生（Play Audio Clip） または メディアオーバーレイを表示（Display Media Overlay）.
3. クリックする項目： ローカルファイルを選択（Choose Local File） を選び、音声、画像、GIF、動画ファイルを指定します。
4. アクションでファイルが利用可能と表示され、ローカルサーバーが動作していることを確認します。
5. クリックする項目： OBS用のローカルFlow Actions URLをコピー（Copy Local Flow Actions URL for OBS）.
6. そのURLをOBSのブラウザーソースに貼り付け、フローを保存してアクションをテストします。

• 使う項目： プレビュー（Preview） で選択したファイルを確認します。
• ファイルを移動または改名すると、Event Flowでは見つからないと表示されます。次をクリックしてください： 再リンク（Relink） で新しい場所を選択してください。既存のフローは引き続き動作します。
• 使う項目： フォルダーで表示（Reveal in Folder） を、元のファイルの場所を確認したい場合に使用します。
• OBSでLocal Flow Actions URLを使用している間は、SSAppを起動したままにしてください。
• 生成されたURLを共有しないでください。ローカルサーバーを保護する、非公開のランダムなアクセス権限情報が含まれています。

高度な代替方法：自分でローカルサーバーを動かす

SSAppの管理型ローカルメディアライブラリを使わない場合は、以下の手動設定も引き続き利用できます。

ダウンロードして展開するもの： Social Stream Ninjaのソースフォルダーを展開し、次のフォルダーを作成します： user-media フォルダーをその中に作成します。

C:\SSN\social_stream\
  actions.html
  user-media\
    audio\booty.mp3
    images\reward.png
    video\celebration.mp4

手動のローカルHTTPサーバーを起動する

1. Pythonが未インストールの場合は、インストールします。
2. PowerShellまたはコマンドプロンプトを開き、このコマンドを実行します。配信中はウィンドウを開いたままにしてください。

Windowsのコマンド

py -m http.server 8765 --bind 127.0.0.1 --directory "C:\SSN\social_stream"

macOSまたはLinuxのコマンド

python3 -m http.server 8765 --bind 127.0.0.1 --directory "/path/to/social_stream"

OBSブラウザーソース用のFlow Actions URL

http://127.0.0.1:8765/actions.html?session=YOUR_SESSION_ID

Event Flowに貼り付けるメディアURL

http://127.0.0.1:8765/user-media/audio/booty.mp3
http://127.0.0.1:8765/user-media/images/reward.png
http://127.0.0.1:8765/user-media/video/celebration.mp4

設定項目： --bind 127.0.0.1 を使うと、サーバーへの接続をこのコンピューター内に限定できます。この簡易サーバーはローカルでの配信用であり、インターネット上での公開用ではありません。

file://：動作しますが、問題が起きやすい方法です

ローカルサーバーを動かしたくない場合は、OBSにローカルのFlow Actionsページを指定し、メディアURLもローカルのものを使います：

file:///C:/SSN/social_stream/actions.html?session=YOUR_SESSION_ID
file:///C:/SSN/social_stream/user-media/audio/booty.mp3

• スラッシュを使用し、フォルダー名とファイル名には空白や特殊文字を避けてください。
• Flow Actionsページとメディアの両方が、ローカルにある必要があります。ホストされた actions.html ページからは、そのパスを読み取れません。
• OBSがローカルファイルを受け付けない場合は、上記のローカルHTTPサーバーの方法を使用してください。

Chrome拡張機能の場合は？

拡張機能も同じEvent Flow形式を使うため、デスクトップで作ったフローとの互換性は維持されます。ローカルアクションは、Windows、macOS、Linuxのパスではなく、内容を直接示さないメディアIDを保存します。

拡張機能だけでは、ディスク上の任意のファイルをOBSに公開できません。対応する連携ブリッジがない場合は、次を使用してください： アップロード（Upload） または通常のホストされたURLを使用します。取り込んだフローがローカルメディアを参照する場合、拡張機能は黙って失敗せず、デスクトップアプリまたはブリッジが必要だと案内します。

選択肢3：大きなライブラリをオンラインでホストする

プロバイダー	適した用途	注意点
Cloudflare R2	公開アラートライブラリの一般的な選択肢として最適です。	Standardストレージには現在、月あたり10GB月と無料のインターネット向け転送が含まれています。本番ではカスタムドメインを使用してください。 r2.dev は開発用で、レート制限があります。
Backblaze B2	公開ファイルURLを使える、低価格のS3互換ストレージ。	最初の10GBは現在無料です。含まれる枠を超えたストレージと転送量は有料になります。
Amazon S3または他のS3互換ホスト	既存のクラウドアカウントと高度なアクセス制御。	メディアの公開読み取りを有効にし、正しいコンテンツタイプを設定してください。ブラウザーのリクエストで必要な場合は、読み取り専用のCORSルールを追加します。
GitHub	少数の小さな公開ファイルや、時々ダウンロードするリリース用ファイル。	通常のリポジトリでは100MiBを超えるファイルが拒否され、GitHub Pagesの公開サイトには1GBの上限があります。Releasesでは大きなアセットを置けますが、管理するアラート用メディアライブラリとしては扱いにくい方法です。

Cloudflare R2の設定

1. 次のストレージクラスでR2バケットを作成します： 標準（Standard） ストレージクラス。
2. 次のような分かりやすいフォルダー名でメディアをアップロードします： audio/, images/、および video/.
3. バケットのSettingsで公開アクセスを有効にします。公開開発用URLはテストだけに使い、通常の配信にはカスタムドメインを接続してください。
4. オブジェクトのURLを、プライベート／シークレットウィンドウで開きます。ログインや共有ページを経由せず、ファイルが直接読み込まれることを確認してください。
5. そのHTTPSの直接URLを、Event Flowのアクションに貼り付けます。

通常の画像と音声は、カスタムCORS設定なしで読み込めます。カスタムオーバーレイ、フォント、動画プレーヤー、ブラウザーのfetchでCORSエラーが出る場合、次を開いてください： Bucket → Settings → CORS Policy を開き、読み取り専用ポリシーを追加します：

[
  {
    "AllowedOrigins": [
      "https://socialstream.ninja",
      "http://127.0.0.1:8765"
    ],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedHeaders": ["Range"],
    "ExposeHeaders": [
      "Content-Length",
      "Content-Range",
      "Accept-Ranges"
    ],
    "MaxAgeSeconds": 3600
  }
]

ファイルを取得する他のページがある場合、その正確なオリジンを追加してください。オリジンにはパスや末尾のスラッシュを含めません。CORSの追加前にカスタムドメインがキャッシュされていた場合、そのホスト名のキャッシュを削除してください。

公式リファレンス： 公開R2バケット, R2のCORS、および R2の料金.

Backblaze B2のCORS設定例

バケットを公開し、ファイルへの直接URLを使用します。ブラウザーがCORSエラーを表示する場合、ダウンロード専用ルールを適用します：

[
  {
    "corsRuleName": "allowSSNMedia",
    "allowedOrigins": ["https://socialstream.ninja"],
    "allowedHeaders": ["range"],
    "allowedOperations": ["b2_download_file_by_name"],
    "exposeHeaders": [
      "content-length",
      "content-range",
      "accept-ranges"
    ],
    "maxAgeSeconds": 3600
  }
]

Backblazeの次の資料を参照してください： 公式CORSルールリファレンス.

配信前に

1. 実際のメディアURLをプライベート／シークレットウィンドウで開きます。ファイルが直接読み込まれる必要があります。
2. 使う項目： 画像（Image） をPNG、JPG、WebP、GIFのメディアに使います。次を使用します： 動画／埋め込み（Video/Embed） を動画や埋め込みURLに使用します。
3. 互換性のため、音声にはMP3、画像にはPNG／WebP／GIF、動画にはH.264／AACのMP4を優先してください。
4. Event Flowと同じセッションIDを使って、OBSでFlow Actionsページを開きます。
5. Event Flowのテストパネルで確認した後、本番配信の前にOBSのブラウザーソースを一度再読み込みしてください。

• URLを開くと再生せずダウンロードされる場合： ホストが誤ったコンテンツタイプ、またはダウンロード専用の応答を送っています。
• クラウドのファイルがブロックされる場合： 公開に設定し、CORSのオリジン、メソッド、ヘッダーを確認してください。
• ローカルファイルが見つからない場合： SSAppでアクションを開き、次を使用します： 再リンク（Relink）.
• ローカルサーバーがオフラインの場合： SSAppを起動し、ポートやセキュリティトークンが変わった場合は、Local Flow Actions URLをコピーし直してください。
• ホストされたFlow Actionsでローカル項目を再生できない場合： OBSのURLを、SSAppが生成したURLに置き換えてください。
• OBSに何も届かない場合： Flow ActionsのURLとEvent Flowで、同じセッションIDを使用していることを確認してください。