OBS Studio プラグイン「SRC-Link ver0.7.0」WebSocket ポータル for OBS の使い方

1. SRC-Link ver0.7.0

この度、SRC-Link では新機能 WebSocket ポータル for OBS をリリースしました。 新しい SLC-Link プラグインとともにアップデートすることで、お手持ちの OBS Studio 環境で使用可能になります。

また、スロット/レシーバーメンバー/チームオペレーターの枠を増やすための追加プラン メンバー・ブースター をリリースしました。

2. 変更点リスト

  • 新機能: 「WebSocket ポータル for OBS」を実装しました。

    WebSocket ポータルは、WebSocket 通信で OBS Studio をリモートコントロールできる機能で、 obs-websocket プロトコルを採用し、互換性があります。

    ポート開放や、トンネリング、VPN 等の導入は不要です。TLS による暗号化通信も有効です。

    フリープランから使用可能です(プランによって最大接続数に違いがあります)

    詳細は、使い方 の項目で説明します。

  • 新プラン: 「メンバー・ブースター」を実装しました。

    サポータープランとスタンダードプランで利用可能で、複数個購読可能であり、 1つにつき 50 メンバー、2 スロット、2 チームオペレータを追加します。

    サポーターは 5 つまで購読可能です(5 を超える場合はスタンダードプランにアップグレードした方が安くなるため)

    スタンダードは 99 まで購読可能です。

    ※アップグレードは差額分の支払いで即座に反映されます。ダウングレードは次の更新時に反映されます。

  • 改良: アップリンクのステータス表示を、より状態が理解しやすいように修正。 スロットなしでも緑の「準備OK」ならスタンバイ状態になれます (スロットは後からオペレーターが割り当てる事ができ、割り当てられれば勝手に送信が開始されます)

3. 「メンバー・ブースター」の購読方法

「メンバー・ブースター」は、 基本プランとなる「サポーター」または「スタンダード」サブスクリプションプランが提供するメンバー最大数、スロット数、チームオペレーター最大数に 更なる容量を追加するプランです。

ブースターを利用するには、SRC-Link コントロールパネルで「設定」→「サブスクリプション」を開き、 「プラン変更」ボタンをクリックして、 プラン表で該当プラン列のメンバー・ブースター数量欄に入力して「アップグレード」ボタンをクリックしてください。

次のサブスクリプション更新日までの差額が表示されるので「支払い」ボタンをクリックすれば、即座にメンバー・ブースターのアップグレードが完了します (支払いはサブスクリプション購読時に登録した支払方法に請求されます)

4. 「WebSocket (WS) ポータル」の使い方

「WebSocket ポータル(以下、WS ポータル)」を使うことで、インターネット越しに OBS Studio をリモートコントロールできます。

通信プロトコルとして obs-websocket を採用しているため、 OBS-web、OBS Blade や Deckboard といった obs-websocket プロトコルに対応しているサードパーティークライアントを使用可能です。

ルーターのポートを開放したり、トンネリングや VPN を用意する必要はありません。 また、自宅のパブリック IP アドレスを知らせる必要もありません。

SRC-Link コントールパネルで WS ポータルを作成し、 SRC-Link プラグインをインストールした OBS Studio からリンクするだけで、インターネットから接続可能な URL が発行されます。

開発のモチベーション

配信中の OBS Studio を、不特定多数からアクセスを受ける可能性がある Web サーバーにはしたくないという要件があり開発に至りました。 パスワード保護されているとはいえ、ポートをインターネットに露出させることを避けたいということです。

また、TLS 通信にも対応したかった。 OBS だけでなく vMix も SRT MiniServer も Web コントローラーを搭載している物はほとんど TLS 非対応だったりします。

公式のドキュメント で案内されている SSL トンネリングも 結局はポートを露出していることと同じですね。

更に SRC-Link コントロールパネルで OBS Studio をコントロールする場合、 obs-websocket プロトコルを採用するのが合理的であるというのもあります。 WS ポータルは開発過程で生まれた副産物とも言えます。

4.1. フィーチャー

  • インターネット経由で OBS Studio をリモート操作できる obs-websocket プロトコル互換のサーバー
  • OBS Studio のポートを開放せず、安全にインターネット経由でリモートコントロール可能
  • TLS 通信対応
  • obs-websocket プロトコルと互換性があるので、 既存の obs-websocket クライアント で接続可能
  • obs-websocket JSON(テキスト)プロトコルの他 MessagePack(バイナリ)プロトコルにも対応
  • WS ポータル専用のログインパスワードを設定
  • 運営チーム で WS ポータルを共有可能。スタッフの OBS Studio をリモート操作可能
  • SRC-Link コントロールパネルで、クライアントの接続を管理可能
  • スクリーンショット・キャッシュ(実装予定)

Q. WS ポータルはリレーサーバーですか?

A. WS ポータルは obs-websocket プロトコル互換のサーバーです。リクエストを解釈して OBS Studio に送信し、 OBS Studio からのレスポンスとイベントを obs-websocket プロトコルでクライアントに返します。 従って、100% の同じ動作にはならず、一部のクライアントで動作しない事があります。

4.2. ユースケース

  • リモートイベントや野外配信で、スマホやタブレットで OBS Studio をリモート操作する 配信開始や終了などの基本操作、簡単なスイッチング、モニタリングが可能。
  • イベントでオンラインボランティアに OBS Studio をリモート操作させるワークフロー
  • 操作対象の OBS Studio がその時々で変わるようなワークフロー(クライアント側の接続先を変えなくてもよい運用が可能)
  • OBS Studio と直接連携するようなウェブアプリやサービスを開発する
  • IoT 機器との連携(タリーや、リモートスイッチ等)
  • 配信の自動制御

今のところ WS ポータルで出来る事は obs-websocket プロトコルに準拠しますが、SRC-Link 自体の機能追加でより高度な制御を実現する見込みです。

obs-websocket 対応のクライアント一覧は obs-websocket GitHub リポジトリ に掲載されています。

開発者は主に OBS-web と OBS blade で動作を確認しています。

4.3. ポータルの作成

まず、obs-websocket 互換サーバーとなるポータルを SRC-Link コントロールパネル上で作成します。

  1. SRC-Link コントロールパネルにログインし、「WS ポータル」を開いてください。

  2. 「ポータルの作成」をクリック

  3. 各入力フィールドを以下の様に設定してください。

    • ポータル名: ポータルに名前を付けて入力

    • 説明: (任意)ポータルの説明を入力してください。詳細で表示されるのでメモとしてご使用いただけます。

    • 画像: (任意)ポータルの画像をアップロードしてください。詳細で表示される、ワークスペースにちょっとした彩を与える装飾です。

    • パスワード: obs-websocket クライアントが WS ポータルへ接続する際に使用するパスワードを決めて入力してください。 OBS Studio の、WebSocket サーバー設定のパスワードではありません。 WS ポータルは、OBS 標準搭載の WebSocket サーバーを使用しないので、本パスワードは全く別物となります。

      尚、パスワードは後からサイト上で確認できないので、入力したものを覚えておくか、メモしておく必要があります。

    • ロケーション: サーバーのロケーション選択ですが、現在は「北アメリカ」のみ選択可能です。

    • イベント購読: OBS Studio が送信するイベントの中で、WS ポータルが受信するイベントを選択します。

      obs-websocket クライアント製品によって必要なものが変わりますが、「*」がついているイベントは「大量発生イベント(High-volume events)」 です。デフォルトでは選択されていません。OBS に負荷がかかるものなので、これらのイベントが必要な場合にチェックを入れてください。

    • スクリーンショットリクエストをブロックする: チェックすると、 このポータルに接続する obs-websocket クライアントに「スクリーンショット撮影リクエスト」を禁止します。

      スクリーンショットリクエストをブロックすると、クライアントにプレビュー画像が表示されなくなります。

    • 権限保有チーム: (任意)WS ポータルにアクセスできる運営チームを選択します。 ポータルを運営チームと共有することで、オペレーターの OBS Studio をポータルにリンクできます (obs-websocket クライアントはアドレスとパスワードを知っていれば誰でも接続できます)

      役割毎に出来ることは下記のとおりです。

      • 管理者の役割: 接続を管理でき、かつポータルを編集できます。 自身の OBS Studio をポータルとリンクでき、リモートから操作できます。
      • スタッフの役割: ポータルを閲覧できます。 自身の OBS Studio をポータルとリンクでき、リモートから操作できます。
  4. 「保存」をクリック

以上で、WS ポータルが作成され OBS Studio からリンクする準備、および obs-websocket クライアントを接続する準備が整いました。

WS ポータルはそれ自体で、obs-websocket クライアントの接続を受け入れますが、 使用には OBS Studio がリンクされていることが前提であるため、まず先に OBS Studio をリンクしてください。

4.4. OBS Studio を WS ポータルへリンク

OBS Studio を WS ポータルにリンクして、obs-websocket クライアントから操作可能な状態にします。

リンクしなければ WS ポータルには接続しないため、使わない時はリンクを切っておくとよいでしょう。

以下、OBS Studio には SRC-Link プラグインがインストール済みで、ログインしていると仮定します (SRC-Link の導入方法は 以前の記事 を参照してください)

  1. メニューの「ドック」から「WebSocket ポータル」をクリック

  2. 「WebSocket ポータル」ドックが表示されるので、「OBS WebSocket ポータル」コンボからリンクしたい WS ポータルを選択してください。 コンボには、自分が所有するポータルと、チームで共有されたポータルの両方が表示されます。

  3. 選択すると接続が行われ、緑の「リンク済」にステータス表示が変わります。

以上で WS ポータルへのリンクが完了です。

OBS 標準の WebSocket サーバーは使用しないので、有効・無効関係なく WS ポータルは動作します。 従ってこれを無効化しておいても問題ありません。

※API は使用するので obs-websocket 自体は必要です。

4.5. obs-websocket クライアントを接続

任意の obs-websocket クライアントでWS ポータルに接続して、リンクされた OBS Studio を操作します。

OBS-web の場合

OBS-web はブラウザで簡易的に OBS Studio を操作できる obs-websocket クライアントです (GitHub リポジトリ

  1. SRC-Link コントロールパネルにログインし、「WS ポータル」を開いてください。

  2. ポータルの一覧から、接続したいポータルを選択してください。1つしかない場合は選択された状態になります。

  3. 右上の「接続情報」ボタンをクリック

  4. ダイアログに接続情報が表示されます。

    • アドレス: 接続先の DNS 名です
    • ポート: ポート番号です(通常 443 です)
    • URL: wss:// で始まる URL 形式です。OBS-web ではこの URL をコピー&ペースします
    • パスワード: パスワードは表示されませんので、ポータル作成時に記憶またはメモしたものを使用してください。

    以上は TLS 接続が可能なクライアントの場合の情報です。OBS-web は TLS 接続が可能です。

    TLS 接続に対応していないクライアントの場合は、 更に下の「非 TLS コネクション情報 (非推奨)」をクリックして、非 TLS 専用の接続情報を参照してください。 非 TLS 接続では通信が暗号化されないため、非推奨としています。

  5. OBS-web を開き、上段の入力欄に先ほどコピーした wss:// で始まる URL をペーストしてください。

  6. 下段にパスワードを入力してください。

  7. 「Connect」ボタンをクリック

接続が正常に行われれば、プレビューに画像が表示されます。 シーン毎に用意されたボタンや「カット」や「フェード」ボタンをクリックすればスイッチングも可能です。

プレビューがコマ送りなのは 1 秒程度の間隔で撮影されたスクリーンショットを逐次表示しているからで、不具合ではありません。 お使いの OBS Studio は正常です。

obs-websocket プロトコルはあくまでもリモートコントロール用の物なので、 映像プレビューが OBS Studio そのものと同じ品質にはならない点はご了承ください。

元々 obs-websocket クライアントは、殆どが LAN から接続することを前提としているため、製品によっては思う様に動作しない場合があります。 特に後述する制限に起因して動作が安定しない物もあるかもしれません。

OBS Blade の場合

OBS Blade はスマホやタブレットで動作するリモートコントロールアプリです。 (GitHub リポジトリ)

  1. まず OBS-web のケース と同様に、SRC-Link コントロールパネルにログインし、「WS ポータル」を開いて接続情報を入手してください。

  2. OBS Blade をスマートフォン、タブレットにインストールしてください。

  3. OBS Blade を起動し、「Aa」ボタンをタップ後、「Domain」をタップ

  4. 「Hostname」で左端のコンボで wss:// を選択し、右隣の入力欄に SRC-Link コントロールパネルで入手したアドレスを入力

  5. 「Port」に SRC-Link コントロールパネルで入手したポートを入力(通常は 443 です)

  6. 「Password」に WS ポータル作成時に決めたパスワードを入力

  7. 「Connect」ボタンをタップ

接続が正常に行われれば、OBS Blade のダッシュボードが表示されます。 「Current OBS scene preview」をタップすれば、プログラムアウトをプレビューできます。

4.6. クライアント接続を管理

クライアント接続は SRC-Link コントロールパネルで一覧・削除できます(チーム共有の場合、管理者のみが削除可能です)

クライアント接続の削除手順は下記のとおりです。

  1. SRC-Link コントロールパネルにログインし、「WS ポータル」を開いてください。

  2. 一覧からポータルを選択してください。1つしかない場合は選択された状態になります。

  3. リストの「ゴミ箱」アイコンをクリックして、不要な接続を削除してください。

4.7. 仕様・制限事項

WS ポータルはインターネット越しにアクセスする事を想定しているため、 OBS 標準の WebSocket サーバーと比較して以下の様な制限があります。

  • スクリーンショットリクエスト:

    同じソースに対して、1 秒以下に連続するリクエストはブロックされます。1 秒間隔に間引かれて(スロットリングして)OBS Studio に到達します。

  • 大量発生イベント:

    大量発生イベント(High-volume events)に該当するイベントは所定の時間に間引かれて送信されます。 例としては InputVolumeMeters イベントで、各インプットのレベルメーター情報を数十ミリ秒単位で送信しますが、 WS ポータルは 0.25 秒程度に間引き(スロットリング)を行います。

  • 接続タイムアウト

    2 時間なにもデータが送受信されない場合、タイムアウトして切断されます。 これを防止する為に、クライアントは一定の間隔ごとに ping を送信する必要があります。

  • 接続数制限

    ポータルごとにフリープランで 1 本、サポータープランで 2 本、スタンダードプランで 4 本の同時接続数制限があります。 1 つのポータルに複数のクライアントを繋いでも問題なく動作しますが、同時接続数制限に注意してください。同時接続数を超えて接続することはできません。

    尚、SRC-Link コントロールパネルから、強制切断することも可能です(後述するトラブルシュートを参照)

  • 帯域制限

    WS ポータルからのインターネット送信帯域は、通常使用に問題ない程度で制限が行われています。

  • レイテンシ

    今のところサーバーが北米にあるため、日本からの接続は 200ms 前後のレイテンシがあります。

  • obs-websocket とのコンパチビリティ

    100% 互換性が保証されるものではなく、あらゆるクライアントが動作する保証はありません。 動作しないクライアントも存在すると思います。

スロットリングの仕様(開発者向け情報)

リクエスト・イベントスロットリング間隔(ms)ウェイト(ms)備考
GetSourceScreenshot10000ソース毎
InputVolumeMeters2500
InputActiveStateChanged2500
InputShowStateChanged2500
SceneItemTransformChanged2500

※スロットリング中は最初のリクエスト・イベントと、最後のリクエスト・イベントが出力され、その間が無視されます。

メッセージ・イベントサイズ: 1 メッセージ・イベントにつき最大 2MB に制限されています。

リクエスト・イベントの詳細は obs-websocket のプロトコルドキュメント を参照のこと。

4.8. トラブルシュート

クライアントで接続しても何も表示されない

OBS Studio がポータルにリンクされていない可能性があります。 リンクが無くてもクライアントはログインできる仕様です。

まず先に OBS Studio をポータルにリンクしてから、クライアントでポータルに接続または再接続してください。

何もしてないのに 2 時間で定期的に切断される

前述した通り、2 時間なにもデータが送受信されないとタイムアウトして切断されます。 これは、クライアントがハートビート(ping)を送る事をしていない事を意味します(Deckboard 等が該当)

少なくとも 2 時間に 1 回は、なんらかの操作をする運用が必要です。

アドレスとパスワードがあっているのに接続できない

接続数上限に達している可能性があります。 こちらの手順 で不要な接続を削除できます。

接続が残る原因:

何らかの不具合でクライアントが接続を開放していない可能性があります。 または、1 つのクライアントで複数の接続を使用している場合も、接続数が足りなくなる原因となります。

クライアントを終了すると接続も解放されます。

ローカル接続ではスムーズに再生される OBS Blade のプレビューが紙芝居、スイッチングしても遅延して画像が表示される

1 秒毎にスクリーンショットを撮影し表示しているので、仕様です。

ローカル接続では OBS Blade が高い頻度でスクリーンショットをリクエストして表示しています。

OBS Blade のオーディオボリュームメーターがカクカクしている

WS ポータルが InputVolumeMeters イベントを 0.25 秒間隔になるよう間引いているので、カクカクしている様に見えます。仕様です。

音が鳴らない

WS ポータル(obs-websocket プロトコル)に音声の受信機能はありません。仕様です。

スクリーンショットプレビューが表示されない

ポータルの設定でスクリーンショットリクエストをブロックしている可能性があります。

WS ポータル経由で動かないクライアントがある

調査できるものは調査するので GitHub の Issue 等でお知らせください

※有料のクライアントだと当方で確認ができない場合があります。

OBS 標準の WebSocket サーバーで問題なく動作していて、WS ポータル経由で動作しない場合は、 WS ポータルの互換性の問題と考えられます。

予期せず切断された

OBS-web の様なブラウザベースクライアントの場合、ブラウザの最適化機能によってタブが一定時間非表示になるとページの動作を一時停止する事があります。 従って WebSocket の動作も一時停止するので、クライアントがサーバーから切断される事となります。

こちらはブラウザの最適化機能に伴う正常な動作ですので、クライアントの再接続を行ってください。

WS ポータルのサーバーが再起動すると、クライアントの接続も切断されます(WS ポータルのサーバーはメンテナンス等で再起動が実施される場合があります) 切断時、クライアントが自動で再接続する様に設計されているものもあります(OBS web は再接続しない仕様)

また、クライアントによっては OBS Studio が終了すると、 その終了イベントを拾って自身も接続を終了する様に実装された物があります(OBS Blade が該当) ポータルにリンク中の OBS Studio が何らかの理由で終了、または再起動した可能性もあります。

5. SRC-Link プレミアムプランのご案内

SRC-Link コントロールパネルはより多くのメンバーや、スロットを使えるようになる、有償サブスクリプションプランを用意しています。 WS ポータル数と最大接続数も増加します。

基本的な機能が提供される安価なサポータープラン、通常のスタンダードプランから選べます。 プロプランは近日登場予定です。

プラグイン開発をサポートしていただける方は是非サポータープランにご加入ください!

詳しくは プラン一覧 をご参照ください。