Discourseビデオストリーム 🎥

プラグイン
1

Discourse Video Stream は、高品質で長尺の動画コンテンツのアップロードと埋め込み、そしてサイトでのライブストリーミングのために、シームレスな Cloudflare Stream 統合を追加します。

概要

このプラグインは、アダプティブビットレートストリーミングによる大規模な動画ファイルの処理のための完全なワークフローを提供します。これにより、ユーザーはコンポーザーから直接動画をアップロードし、ネットワーク状況に基づいて自動的に品質が調整される再生を体験できます。また、RTMPSブロードキャストによるライブストリームの作成もサポートしています。

主な機能

  • :clapper_board: コンポーザー統合: コンポーザーからの直接動画アップロードのためのオプションのツールバーボタン
  • :outbox_tray: 自動アップロードインターセプト: 設定可能なサイズしきい値を超える動画は、ローカルストレージではなく Cloudflare Stream に自動的にアップロードされます
  • :high_voltage: 再開可能なアップロード: 接続の問題が発生した場合でも、200 MB を超えるファイルを確実にアップロードするために tus-js-client をベースに自動再開機能を実装
  • :locked: セキュアプロキシ: サーバーサイドのエンドポイントが短命の Cloudflare Stream アップロード URL を生成し、API 認証情報を安全に保ちます
  • :satellite_antenna: ライブストリーミング: コンポーザーから直接 RTMPS ブロードキャストでライブストリームを作成
  • :movie_camera: カスタム BBCode: 動画を埋め込むためのシンプルな [video-stream id="..."] 構文
  • :television: アダプティブストリーミング: Shaka Player を DASH マニフェストと統合し、ネットワーク速度が変化してもスムーズな再生を実現
  • :gear: 再生コントロール: 解像度選択と再生速度制御のための組み込み UI

インストール

app.yml にプラグインを追加します。

hooks:
    after_code:
      - exec:
          cd: $home/plugins
          cmd:
            - git clone https://github.com/xfalcox/discourse-video-stream.git

次に、コンテナを再構築します。

./launcher rebuild app

設定

管理者 → 設定 → 動画ストリーミングに移動し、以下を設定します。

設定 説明 デフォルト
video_stream_enabled 動画ストリーミングプラグインを有効にする false
video_stream_account_id Cloudflare アカウント識別子 -
video_stream_api_token Stream:Edit 権限を持つ API トークン -
video_stream_customer_subdomain Cloudflare Stream ドメイン (例: customer-xxxxx.cloudflarestream.com) -
video_stream_allowed_extensions 許可された動画フォーマットのカンマ区切りリスト mp4,webm,mov
video_stream_max_file_size 最大ファイルサイズ (MB 単位、1-2000) 500
video_stream_intercept_native_uploads 大容量動画アップロードを自動的にインターセプトする true
video_stream_intercept_threshold_mb 自動インターセプトのサイズしきい値 (MB 単位、1-2000) 10
video_stream_enable_live_streams ライブストリーミング機能を有効にする false

Cloudflare Stream 認証情報の取得方法

  1. Cloudflare ダッシュボードにログインします
  2. アカウント内の Stream に移動します
  3. Stream の概要からアカウント ID をコピーします
  4. Stream:Edit 権限を持つ API トークンを作成します
  5. Stream の設定からカスタマーサブドメインをメモします

使用方法

設定後、ユーザーには動画をアップロードする方法が 2 つあります。

自動インターセプト

ユーザーが video_stream_intercept_threshold_mb 設定を超える動画ファイルをドラッグ＆ドロップまたは選択した場合、プラグインはローカルストレージの代わりに Cloudflare Stream を介して自動的に処理します。これが機能するためには、許可された拡張機能設定で動画ファイル拡張子を許可する必要があります。

手動アップロード

ユーザーは、コンポーザーツールバーのポップアップメニュー（:plus:）をクリックし、動画アップロードオプションを選択して、明示的に Cloudflare Stream にアップロードできます。

どちらの方法でも、アダプティブストリーミングプレーヤー（解像度と速度制御付き）としてレンダリングされる [video-stream id=“video_id”] BBCode タグが挿入されます。

ライブストリーミング

video_stream_enable_live_streams が有効な場合、ユーザーはライブストリームを作成できます。

  1. コンポーザーツールバーのポップアップメニュー（:plus:）をクリックし、「ライブストリームを作成」を選択します
  2. モーダルが Cloudflare Stream API 経由で RTMPS 認証情報を生成します
  3. 便利なコピーボタンを使用して、RTMPS URL とストリームキーをコピーします
  4. OBS、Streamlabs、または RTMPS 互換のブロードキャストソフトウェアで認証情報を使用します
  5. 「埋め込みを挿入」をクリックして、投稿に [video-stream id=“…”] BBCode を追加します
  6. すぐにブロードキャストを開始します

ライブストリームの機能:

  • 自動録画がデフォルトで有効（ストリームは後で再生するために保存されます）
  • ライブコンテンツと録画コンテンツの両方に同じアダプティブプレーヤーが機能します
  • ストリーミング中はユーザーはライブコンテンツを確認でき、その後録画を視聴できます
  • 警告メッセージ付きの安全な認証情報処理

なぜ Cloudflare Stream なのか？

AWS を使用して同じことを行うサポートはコード内にあり、Mux については GitHub - discourse/discourse-video でサポートされているため、より安価な代替案が良いと考えられました。

要件

  • Stream が有効になっているアクティブな Cloudflare アカウント

ソースとサポート

スクリーンショット

image
image776×544 53.6 KB

image
image1953×1231 121 KB

image
image629×536 80.1 KB

デモ

テストサイトにアクセスして動画をアップロードしてみてください
https://discourse-on-a-pi5.falco.dev/t/test-video-upload-plugin/20?u=falco

注: これは #公式 プラグインではありません。

「いいね！」 15
2

アップデート: ライブストリーミングサポートが利用可能になりました！:satellite_antenna:

プラグインがRTMPSブロードキャストによるライブストリーミングをサポートするようになりました！

image
image629×536 80.1 KB

新機能:

  • コンポーザーのツールバーメニューから直接ライブストリームを作成
  • Cloudflare Stream APIを介してRTMPS認証情報を即座に取得
  • OBS、Streamlabs、またはRTMPS互換のソフトウェアでストリーミング
  • 自動録画が有効化 - ブロードキャスト終了後にストリームが再生用に保存されます
  • ライブコンテンツと録画コンテンツの両方で、同じ[video-stream id="..."]のBBCodeとアダプティブプレーヤーを使用

有効にする方法:
管理者 → 設定 → ビデオストリーミング で video_stream_enable_live_streams を true に設定してください。

ライブストリーミングのワークフローの詳細については、更新されたOPを参照してください。

「いいね！」 6