OBSライブ配信
自分の言語で配信しながら、視聴者には翻訳字幕を映像の上に表示できます。Whisperrのウェブアプリがトークをリアルタイムで文字起こし・翻訳し、透過オーバーレイページがOBSのブラウザソースとして字幕を描画します。プラグインもダウンロードも、エンコーダー設定の変更も不要です。オーバーレイの隅には小さなQRコードが表示され、別の言語で読みたい視聴者はスキャンするだけで、Whisperrが対応するどの言語でもスマホで読めます。
仕組み
- ウェブアプリで共有リンクを有効にして配信を開始 — セッションのライブルームが作成されます
- オーバーレイURLを生成してOBSにブラウザソースとして追加 — 話すそばから翻訳字幕が配信画面に表示されます
- 視聴者は隅のQRコードをスキャン — スマホでルームを開き、自分の言語を選べます
必要なもの
- Whisperrアカウント（Chromeでウェブアプリにサインイン）
- OBS Studio（またはStreamlabsなど、ブラウザソースに対応した配信ソフト）
- 普段の配信環境 — Twitch、YouTube Live、KickなどOBSで配信できるところならどこでも
ステップ1 — 共有リンクを有効にして配信を開始
ウェブアプリを開き、新しい録音を開始します。
- 話す言語と、配信画面に焼き込む翻訳言語を選びます
- 音声ソースを選択 — トークだけならマイク音声、ゲーム音やタブの音声も文字起こししたい場合はマイク+画面
- 共有リンクをオンにして、録音を開始します
録音が始まると共有パネルが表示されます。タブは2つ — ルーム（リスナーが直接参加できるリンクとQRコード）と OBS（配信用オーバーレイの設定リンク）です。
ステップ2 — オーバーレイ設定ページを開く
共有パネルでOBSタブをクリックし、設定リンクの隣にある開くアイコンをクリックします。どちらも下の画像で赤枠で示しています。
オーバーレイ設定リンクは次のような形です。
https://whisperr.co/app/overlay/<ルームID>/choose
設定ページでは、URLを手で編集しなくても、配信に表示する字幕の内容を選べます。
ステップ3 — 表示内容を選んでURLを生成
- 翻訳 — 翻訳された字幕のみ（通常はこれ）
- 文字起こし — 話した内容をそのままライブ字幕として表示
- 両方 — 元の発話の下に翻訳を重ねた、バイリンガル字幕
同時に表示する字幕の行数を選んで生成を押し、URLをコピーします。
OBSに貼るのは生成されたURLです。設定ページ自体のURLではありません。設定ページは設定画面なので、OBSに追加すると設定カードがそのまま配信に映ってしまいます。
ステップ4 — OBSにブラウザソースとして追加
OBSでの手順:
- ソースで + をクリックし、ブラウザを選択
- 生成したURLをURL欄に貼り付け
- 幅と高さをキャンバスに合わせる — 通常は 1920 × 1080
- OKを押し、ゲーム画面やカメラより上のレイヤーに配置
オーバーレイの背景は完全に透過なので、誰も話していないときソースは見えません。読み込み後の最初の1分間だけ、動作確認用の薄いステータス表示（「Whisperr overlay connected — waiting for captions…」）が出ます。最初の字幕が届いた時点で消え、配信の途中に現れることはありません。
ステップ5 — 配信開始
あとは普通に話すだけです。字幕はリアルタイムで配信画面に表示されます。発話中の部分はやや薄く表示され、確定すると通常の濃さになり、話し終えた行は数秒後にフェードアウトします。
隅のQRコード
焼き込み字幕は全員に届きますが、言語は1つだけです。隅のQRコードは視聴者のスマホでライブルームを開き、視聴者自身の言語を選んで読めるようにします。読み上げ（テキスト読み上げ）も使えます。デフォルトで表示され、キャプションは「Scan to read in your language」です。下記のURLパラメータでカスタマイズできます（例: 視聴者の言語に合わせた文言を?qrlabel=で指定、?qr=0で非表示）。
オーバーレイのカスタマイズ
OBSのブラウザソースはクリック操作ができないため、すべてのオプションはURLパラメータです。生成したURLに&でつなげて追加します。
| パラメータ | デフォルト | 内容 |
|---|---|---|
mode | translation | translation（翻訳）・transcription（文字起こし）・both（両方） |
lines | 2 | 同時に表示する字幕の行数（1〜6） |
size | 42 | フォントサイズ px（12〜120） |
color | ffffff | 文字色 — #なしの16進、またはCSSカラー名 |
bg | 0 | 各行の背景の不透明度 0〜1（0は影のみ） |
hold | 8 | 確定した行が画面に残る秒数（1〜60） |
align | bottom | 字幕の位置 — bottom（下）またはtop（上） |
lang | (すべて) | 特定の翻訳先言語だけ表示（例: lang=es） |
qr | 表示 | qr=0で隅のQRコードを非表示 |
qrsize | 132 | QRコードのサイズ px（64〜400） |
qrpos | br | QRコードの位置: br・bl・tr・tl |
qrlabel | Scan to read in your language | QRコード下のキャプション。qrlabel=（空）でコードのみ表示 |
例: 大きめの黄色い字幕を上部に、QRコードなしで表示する場合:
https://whisperr.co/app/overlay/<ルームID>?size=56&color=ffcc00&align=top&qr=0
ヒントとトラブルシューティング
- OBSでソースに何も表示されない — ブラウザソースを右クリックして現在のページのキャッシュを更新を選びます。ステータス表示が「connecting…」のまま変わらない場合はネットワークを確認してください。「waiting for captions」と出ていればオーバーレイは正常で、Whisperr側のセッションがまだ音声を送っていないだけです。
- 配信ごとにルームは新しくなります — 録音セッションごとに新しいルームIDが発行されるため、新しい配信を始めたらオーバーレイURLも生成し直すか、配信中は同じWhisperrセッションを維持してください。
- 無料プランのセッションは2分まで — 実際の配信では、配信時間いっぱいセッションを維持できる有料プランが必要になります。
- 複数の言語に翻訳したい場合 —
lang=で1言語だけを配信画面に焼き込み、他の視聴者にはQRコードを使ってもらいましょう。QRコードはまさにそのためにあります。