OBSでブラウザソースが表示されないときの直し方
OBSのブラウザソースにURLを入れたのに、何も表示されない、真っ白や真っ黒のまま、といったときの直し方です。ブラウザソースは、OBSの中に入っている小さなブラウザでページを開き、その画面を配信に重ねる仕組みです。ふつうのブラウザとは別に動いているため、見る場所も少し違います。30秒でできる確認から、原因の多い順に見ていきます。
このページで扱う症状
- ブラウザソースにURLを入れても、プレビューに何も表示されない
- ブラウザソースが真っ白、または真っ黒になる
- コメント欄や、フォロー・投げ銭の通知（アラート）が表示されない
- 表示はされるが、一部が切れる、小さすぎる
- ページを直したのに、OBSの表示が古いまま変わらない
- 前は表示されていたのに、急に出なくなった
まず確かめること（30秒でできる確認）
設定を変える前に、次の4つを見てください。
- URLをふつうのブラウザで開くと表示されるか。URLをコピーして、ChromeやEdgeなどで開きます。ここで表示されなければ、URLそのものか、配信サービス側の問題です。コピーしたときに、前後に空白や改行が入っていないかも見ます。
- ソースが表示になっているか、ほかのソースの下に隠れていないか。画面下の「ソース」の欄で、目のアイコンが付いているか、ブラウザソースがゲーム画面などより上にあるかを見ます。上にあるものほど手前に重なります。
- 何も起きていないだけではないか。通知（アラート）のページは、フォローや投げ銭があったときだけ表示され、ふだんは透明なのがふつうです。配信サービスの管理画面にある「テスト通知」などの機能で、表示を確かめます。
- 中で何が表示されているか。ブラウザソースを右クリックして「対話 (操作)」を選ぶと、ブラウザソースの中身を別の画面で見て、クリックや入力ができます。エラーやログイン画面が出ていないかを確かめられます。
原因の多い順の直し方
1. 幅と高さが、ページの大きさと合っていない
ブラウザソースのプロパティにある「幅」と「高さ」は、ページを開くブラウザの画面の大きさです。初期の設定は幅800、高さ600です。1920x1080で作られたページを800x600で開くと、表示が端に寄ったり、肝心の部分が枠の外に出て見えなかったりします。
配信サービスの案内に推奨の大きさが書いてあれば、その数字に合わせます。書いていなければ、まず1920と1080を入れて表示を確かめ、プレビューの上で大きさを調整します。プレビューでソースを引き伸ばすだけでは、ページの中の配置は変わりません。
2. 古い表示が残っている（キャッシュの更新）
配信サービス側で設定を変えたのに、OBSの表示が変わらないときは、古いページが残っています。プロパティの下のほうにある「現在のページのキャッシュを更新」を押すと、すぐに読み込み直します。ソースを右クリックしたメニューの「再読み込み」でも読み込み直せます。
シーンを切り替えるたびに読み込み直したいときは、「シーンがアクティブになったときにブラウザの表示を更新する」にチェックを入れます。
3. 「表示されていないときにソースをシャットダウンする」がオンになっている
この設定がオンだと、ソースを非表示にしたときや、そのソースがないシーンにいるあいだ、ページが閉じられます。シーンを戻すと読み込み直すため、少しのあいだ何も出ません。ページが閉じているあいだに届いた通知も表示されません。
コメント欄や通知のように、ずっと動いていてほしいページでは、チェックを外しておきます。初期の設定ではオフです。
4. ログインが必要なページを開いている
ブラウザソースは、ふつうに使っているブラウザとは別に動いています。ふつうのブラウザでログインしていても、ブラウザソースの中ではログインしていない扱いになり、ログイン画面や空白が出ることがあります。
コメント欄や通知を表示するときは、配信サービスの管理画面に出ている、OBSなどの配信ソフト向けのURLを使います。そのURLには、ログインしなくても表示できる情報が入っていることが多いです。このURLは人に見せないようにしてください。
5. ハードウェアアクセラレーションの設定
パソコンによっては、ブラウザソースがGPUを使って描画する設定のせいで、真っ黒になったり、ちらついたりすることがあります。設定 → 詳細設定 の「ソース」の欄にある「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェックを切り替えて試します。変えたあとは、OBSを起動し直します。
この設定はOBS全体のブラウザソースに効きます。直らなければ、元に戻しておきます。この項目は、OSや版によって表示されないことがあります。
6. カスタムCSSを書き換えている
プロパティの「カスタム CSS」には、初期の状態で、背景を透明にし、余白とスクロールバーを消す指定が入っています。ここを書き換えたり、配信サービスから渡されたCSSを貼ったりしたあとに表示が消えたときは、いったん初期の内容に戻して試します。初期の内容は、OBSの公式の案内にも載っています。
反対に、ページの背景が白く出てしまうときは、この欄で背景が透明になっているかを見ます。
7. ページを読み込めていない（エラー・ローカルファイル）
「対話 (操作)」で開いたときに「そのページを読み込めませんでした！」と出る場合は、URLの打ち間違いか、ネットワークの問題です。セキュリティソフトやファイアウォールが、OBSの通信を止めていることもあります。OBSを許可の一覧に入れて試します。
パソコンの中にあるHTMLファイルを表示したいときは、「ローカルファイル」にチェックを入れて、ファイルを選びます。
確かめる順番
ふつうのブラウザで表示できるかどうかで、OBSの外の問題か、OBSの中の問題かが分かれます。次の図の順に見てください。
それでも直らないとき
- ブラウザソースを作り直す。新しいシーンに、新しいブラウザソースを1つだけ置き、URLを入れ直して試します。
- OBSを最新の版にする。ブラウザソースは、OBSに入っているブラウザの部品で動いています。古い版では、新しいページを正しく表示できないことがあります。
- Linuxでは入手方法を確かめる。OBSの公式の案内では、Linuxでブラウザソースが使えるのは公式のパッケージで入れた場合とされています。
- ログを見る。メニューの ヘルプ → ログファイル から、ログの表示やアップロードができます。OBSの公式フォーラムで相談するときは、このログを添えます。
よくある質問
ブラウザソースの音が鳴りません。または二重に聞こえます。
プロパティの「OBSで音声を制御する」にチェックを入れると、ブラウザソースの音がOBSの音声ミキサーに並び、音量を調整できます。チェックがないと、音はパソコンのスピーカーに出るため、デスクトップ音声の設定によっては配信に入らなかったり、二重に入ったりします。二重になるときは、音が二重になるときのページを見てください。
ブラウザソースと、カスタムブラウザドックは何が違いますか。
ブラウザソースは、配信の画面にページを重ねて映すためのものです。メニューの「ドック」にあるカスタムブラウザドックは、OBSの画面の中にページを開いて、自分だけが見るためのものです。コメントを読むだけならドック、配信に映すならブラウザソースを使います。
ブラウザソースを増やしたら、OBSが重くなりました。
ブラウザソースは、1つずつがブラウザのページとして動くため、数が増えるとパソコンの負荷も増えます。使っていないブラウザソースは削除するか、ふだん使わないものだけ「表示されていないときにソースをシャットダウンする」をオンにします。