🎥 OBS 連携ガイド

字幕をOBS Studioに直接送信し、背景透過の美しい字幕を表示するための設定手順です。

💡 OBS Bridge とは?
ハムハム字幕アトリエで認識・翻訳した字幕を、OBS WebSocketを経由して直接OBS上のブラウザソース(obs_overlay.html)に送信する機能です。
これにより、クロマキー(カラーキー)を使わずに、綺麗な縁取り文字をOBS上で直接レンダリングできます。

🛠️ 設定手順

1
OBS WebSocket の有効化
1. OBS Studio を起動し、上部メニューの「ツール」から「WebSocket サーバー設定」を開きます。
2. 「WebSocket サーバーを有効にする」にチェックを入れます。
3. 「サーバーポート」が 4455 であることを確認します。
4. 「認証を有効にする」にチェックを入れ、「パスワードを生成」ボタンを押すか、任意のパスワードを入力します。
    ⚠️ 重要:必ず「接続情報を表示」ボタンを押して、パスワードが見える状態にしてからコピーしてください。(伏せ字のままだと正しくコピーされません)
5. 「OK」を押して閉じます。
2
字幕アトリエ側の設定
1. ハムハム字幕アトリエの「その他」設定パネルを開きます。
2. 「OBS Bridge」の項目を見つけます。
3. 「Enable OBS WS」を Enable に変更します。
4. 「OBS WS URL」に ws://127.0.0.1:4455 を入力します。
    ※ OBSとブラウザが同じPCなら、この数字(ローカルホスト)のままでOKです。
    ※ 別のPCのOBSに繋ぐ場合のみ、そのPCのIPアドレス(例: ws://192.168.1.15:4455)に変更してください。
5. 「OBS Password」に、Step 1で設定(コピー)したパスワードを貼り付けます。
3
OBS に字幕ソースを追加する(ドラッグ&ドロップ)
OBS上で綺麗に字幕を表示するために、専用のオーバーレイファイルを使用します。

1. OBS Studioを開き、「ソース」一覧が見える状態にします。
2. 字幕アトリエの「OBS Bridge」設定パネルの最下部にある「OBSへドラッグ&ドロップ」ボタンをマウスでクリックしたまま(ドラッグ)、OBSの「ソース」一覧の領域に持っていき、マウスを離します(ドロップ)。
3. 自動的に「ブラウザ」ソースが追加されます。
4. 追加されたブラウザソースをダブルクリックしてプロパティを開き、「幅」と「高さ」を配信画面に合わせて設定します(例: 幅 800、高さ 600)。
5. 「OK」を押して完了です。字幕アトリエでマイクをオンにして話すと、OBS上に字幕が表示されます。
※ ドラッグ&ドロップが上手くいかない場合は、ボタンを右クリックして「リンクのアドレスをコピー」を選択し、OBSのソースの「+」から「ブラウザ」を追加し、「URL」欄に手動で貼り付けてください。
× 閉じる