すたいるのOBS情報メモブログ

OBS Studioに関する情報を主に投稿 / 何か困ったことがあればXのDMまで連絡ください。

トップ > 解説 > 【OBS Studio】 ブラウザソース について

【OBS Studio】 ブラウザソース について

解説

OBS Studioの「ブラウザソース (BrowserSource)」に関しての記事。
2022年1月25日に記事タイトルを「【対処法】OBS Studioで BrowserSource がない場合【導入方法も紹介】」から変更しました。
記事投稿日 2018年3月29日、最終投稿更新日 2023年11月12日 09時20分頃

記事はWindows版バージョン 30.0 を使い書いています。
※mac版 / Linux版では違う部分があると思うので予めご了承ください。

ブラウザソースとは

文字通りOBS Studioに直接追加出来るWebブラウザです。
Webページをシーンに追加します。
「CEF (Chromium Embedded Framework)」が使用されています。

OBS Version CEF Branches Chromium Version
OBS 28.0.0～ CEF 5060 バージョン 103
OBS 27.2.0～27.2.4まで CEF 4638 バージョン 95
OBS 24.0？～27.1.3 まで CEF 3770 バージョン 75

ブラウザソースプロセス

obs-browser-page

Windowsでは「obs-browser-page.exe」が起動します。
1つでもブラウザソースを追加している(非表示にしていても)と起動します。
「obs-browser-page.exe」を減らしたい場合は、追加した「ブラウザ」を削除してください。

ブラウザソース関連設定

設定 → 詳細設定 → ソース

ブラウザソースのハードウェアアクセラレーションを有効にする

初期値 : ON

ハードウェアアクセラレーションはブラウザソースの処理をCPU依存にせず、グラフィックボード(GPU)にも処理を分散させることでパフォーマンスを向上してくれます。
チェックを外すとグラフィックボード(GPU)の支援が受けられなくなるので表示したページによってはブラウザソースのプロセス「obs-browser-page」のCPU使用率がかなり高くなります。
チェックを外すことを推奨する人もいますが、私はおすすめしません。

ブラウザソースが映らなくて困ってる場合のみチェックを外すのをお試し下さい。

過去にブラウザソースがリファクタリング(プログラムの内部構造を整理)された際の発表記事
OBS Studio Progress Report, August 2018 | OBS

ブラウザのプロパティ解説

ローカルファイル

URLではなくローカルマシンからWebページをロードします。

初期値 : オフ(OFF)

URL

ローカルファイルがオフに設定されている場合、指定したURLからWebページをロードします。

初期値 : https://obsproject.com/browser-source

幅

Webページの幅を設定します。

初期値 : 800

最小値 : 1
最大値(バージョン 29.0.2まで) : 4096
最大値(バージョン 29.1～) : 8192

高さ

Webページの高さを設定します。

初期値 : 600

最小値 : 1
最大値(バージョン 29.0.2まで) : 4096
最大値(バージョン 29.1～) : 8192

OBSで音声を制御する

※バージョン 27.2.4まで「OBSを介して音声を制御する」って翻訳

初期値 : オフ(OFF)

このオプションを有効にするとOBS Studio本体画面のドック「音声ミキサー」に「ブラウザ」の音量ゲージが表示されるようになります。
ブラウザ音声を聞きたい場合は「音声モニタリング」で対応してください。
※音声モニタリングは「音声ミキサー」ドックから「オーディオの詳細プロパティ」で開けます。

オプションを有効にしない場合 (Windowsの場合)
Windows側の「音声ミキサー」に表示される「obs-browser-page.exe」から音声が鳴ります。

★このオプションの不具合情報
OBSを最小化するとブラウザの音声が変になります。(Nightcoreみたいな感じ)
最小化しなければ発生しないので最小化した際は注意してください。(最小化を戻した際に音声が正常に戻るのに少し時間がかかります。)

情報元
Audio Crackle when browser source is set to "Control audio via OBS" / New: Same for Media Sources with instant sounds · Issue #406 · obsproject/obs-browser · GitHub
OBS Feature Browser "control audio via OBS" on a Browser source Bug · Issue #7588 · obsproject/obs-studio · GitHub

★音声モニタリング例
もし「音声モニタリング」の音声が聞こえない場合は「設定 → 音声」で「音声モニタリング」設定を確認してみてください。(初期値 : 既定)
※「音声モニタリング」のデバイス変更時はOBS Studioを再起動しないと音声が聞こえない場合があります。

・モニターオフ
音声は聞こえません。

・モニターのみ (出力はミュート)
音声は「設定 > 音声」で設定した「モニタリングデバイス」に出力されます。
もし「デスクトップ音声」を入力している場合はこれをお使いください。
※もし「モニタリングデバイス」と「デスクトップ音声」が異なる場合は「モニターと出力」をお使いください。

・モニターと出力
音声は「設定 > 音声」で設定した「モニタリングデバイス」と「出力(配信、録画上に)」に出力されます。
例えば「アプリケーション音声キャプチャ」「win-capture-audio」を使用して「デスクトップ音声」をミュート(無効)にしてる場合は、この設定を利用すると便利です。
逆にデスクトップ音声を入力している場合(モニタリングデバイスと同じ場合)は、音が二重になるので「モニターのみ (出力はミュート)」の方を利用してください。

カスタムフレームレートを使用する

※バージョン 27.2.4まで「カスタムフレームレートを使用」って翻訳

Webページをレンダリングするカスタムフレームレートを設定します。

初期値 : オフ(OFF)

FPS

Webページをレンダリングするカスタムフレームレートを定義します。
1～60まで設定できます。
「カスタムフレームレートを使用する」を有効にしないとこの設定は見えません。

カスタムCSS

デフォルトでは、背景を透明に設定し、本文の余白を削除し、スクロールバーを非表示にします。 (ページがビューポートの幅/高さよりも大きくレンダリングされる場合)

初期値 : body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

注 : バージョン 27.2～27.2.4 までは「カスタムCSS」部分はスクロールしないと見えません。(プロパティ画面でマウスホイールをくるくるするか、右側のスクロールバーを操作！)

Discord Streamkit OverlayのカスタムCSSが反映されない件に関しては専用項目に移動

表示されてないときに、ソースをシャットダウンする

※バージョン 27.2.4まで「表示されてないときに、ソースをシャットダウン」って翻訳

初期値 : オフ(OFF)

ソースが表示されなくなった時にブラウザをシャットダウンします。

・有効にした場合
ソース欄で目のアイコンをクリックしたり、追加していないシーンに移動した時にブラウザがシャットダウンされます。

ソースはすべてのシーンで共有の為、音声のなるページの場合はチェックをつけないと目マークでソースをオフにしても音声が再生され続けます。(複数追加すると音声が2重になる)
もし複数のシーンで同じブラウザソースが必要な場合はソース追加時に「既存を追加」で追加してください。
検索ワード : BrowserSource / 音二重 / 音がだぶる / 音が2つ / 勝手に音楽流れる / 勝手にBGM / 謎の音楽

シーンがアクティブになったときにブラウザの表示を更新する

※バージョン 27.2.4まで「シーンがアクティブになったときにブラウザの表示を更新」って翻訳

初期値 : オフ(OFF)

アクティブになったときにページを更新します。

ページ権限

設定に応じて、これによりブラウザはOBS Studioオプションを読み取ったり変更したりすることができます。

詳細に関しては こちら をクリック

初期値 : OBSのステータス情報へのアクセス

現在のページのキャッシュを更新

※バージョン 27.2.4まで「現在のページを再読込」って翻訳

これをクリックするとすぐにページが更新されコンテンツが再読み込みされます。
ソースツールバーの「再読み込み」と同じ動作をします。

こんな時は

ブラウザソースがソース一覧に表示されない場合

最近のバージョンはブラウザソースはデフォルトで導入されます。
ソース欄に「ブラウザ」が見当たらない場合は、まずOBS Studioの再インストールをお試しください。
再インストール手順は1つ下で紹介しています。

OBS Studioを再インストールしてみる

ブラウザソースが何らかの影響で消えた場合はまず再インストールをお試しください。

手順
1、公式サイトより OBS Studio最新版 をダウンロード。
2、OBS Studioのインストール(導入)*1を行う。
3、OBS Studioを起動してソース一覧で「ブラウザ」を探す。
※この時点で「ブラウザ」が見つからない場合はセキュリティソフトなどに削除されている可能性があります。

過去情報
上記以外*2でBrowserSourceを導入した場合、問題*3があります。
一度OBS Studioをアンインストールして上記手順で導入してください。

バージョン 21.1 / 22.0 以降を利用している場合

バージョン 21.1(Windows版)は2018年03月19日にリリース
バージョン 22.0(macOS版)は2018年08月21日にリリース

「BrowserSource」の名称が変更(翻訳)されて「ブラウザ」に変更されました。(プロパティ画面も翻訳)
ソース名が変更されているのでBrowserSourceが消えたと思った方は注意！(下記画像参照)
※画像を最新バージョン(26.0)に更新してます。(2020/09/30)

インストール時にチェックを外している場合 (22.0.2まで)

※バージョン 23.0(2019年02月26日リリース)以降はインストール時のチェックオプションが削除され標準でブラウザ(BrowserSource)がインストールされるようになりました。
Windows版の場合、インストール時にチェックを外すと「ブラウザ (BrowserSource)」がインストールされません。
チェックを外さずにOBS Studioのインストールをしてください。
※ブラウザなしにインストールしてしまった方は、再度インストーラーを実行してインストール！
インストーラーダウンロードは公式サイトへ : Open Broadcaster Software | OBS

ブラウザソースがそもそも含まれていない場合

旧バージョン(かなり前) または ダウンロード時に「Small」とついている場合「ブラウザ (BrowserSource)」が含まれていません！
公式サイトより最新のOBS Studioをダウンロードしてインストールしてください！
インストーラーダウンロードは公式サイトへ : Open Broadcaster Software | OBS

ブラウザソースでローカルファイルが表示されない場合

全角スペースが含まれる場合、表示されません。

ファイル名の場合例

表示される → 「コメント 表示用.html」
表示されない → 「コメント　表示用.html」

フォルダの場合例
表示される → 「D:/てすと てすと/削除されたアプリ.html」
表示されない → 「D:/てすと　てすと/削除されたアプリ.html」

ブラウザソースでWebページが表示されない場合

ブラウザソースは追加すると「このページ」を表示します。
※環境により表示まで時間がかかる場合があります。(特に低スペック、速度の遅い回線)

表示すると下記英語が表示されます。

You've just added a browser source!

Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts

Set the URL to the page you'd like to display

OBS Projectが用意したページがプロパティのプレビューで表示されない場合は、何らかの原因でブラウザソースに問題が発生しています。
下記手段を1つずつ試してみてください。

OBS Studioを再起動させる

ブラウザソースのプロセスがクラッシュしている可能性があります。
一度OBS Studioを再起動させて動作するかお試しください。

2022年8月18日 加筆
下記に記載してる不具合は、恐らくバージョン 28.0で修正されるかもしれません。
バージョン 28.0でCEF/Chromiumが4638 (95) から 5060 (103) に更新されました。

2022年7月30日 加筆
バージョン 27.2系に含まれるブラウザには、下記不具合が存在するようです。
「ソースが繰り返し更新するとレンダリングが停止する」
Visuals Stop Rendering When Source is Repeatedly Refreshed · Issue #356 · obsproject/obs-browser · GitHub

整合性の確認をする

OBSのインストールが大丈夫か確認できます。

公式版
「ヘルプ → ファイルの整合性を確認」
※OBSのアップデートが近い場合はボタンを押しても反応がなくなります。

Steam版
「ライブラリ → OBS Studio → 右クリックしてプロパティ → ローカルファイル → ソフトウェアファイルの整合性を確認...」

ブラウザソースのキャッシュを削除する

・ブラウザのキャッシュファイル削除 → ここをクリック

セキュリティソフトが原因の場合

初期設定のOBS公式サイト及び指定したWebサイトが表示されない場合、セキュリティソフトがブラウザソースのプロセスを阻害している可能性があります。
検知除外設定をするか、一度セキュリティソフトをオフにしてみてください。
※うまくいかない場合は、セキュリティソフトを一度アンインストール推奨

手順
1、インストールフォルダにある「obs-plugins」を開く
2、「64bit」フォルダを開く(古いバージョンの場合は「32bit」フォルダ)
3、開いたら「obs-browser-page.exe」を探す
※かなり古いバージョンの場合は「cef-bootstrap.exe」
※実行中のOBS Studioのbit数の方を設定して下さい。(分からない場合は両方してね)
4、上記exeファイルを許可設定にする。
5、OBS Studioを起動して「ブラウザ(BrowserSource)」が動作するか確認する。
※許可設定方法に関しては、各セキュリティソフト名で検索を行って下さい。

バージョン 22.0 以降の場合

環境によりOBS Stduio側の設定を変更しないと駄目な場合もあるようです。
※困ってる場合のみチェックを外して治るかお確かめ下さい。
※チェックを外すとGPUの支援が出来なくなるので表示したページによってはブラウザソースのプロセス「obs-browser-page」のCPU使用率がかなり高くなります。

1、「設定 → 詳細設定」を開く
2、「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェック外す。
※設定項目は少しスクロールしないと見えないので注意！
3、設定を閉じてOBS Studioを再起動する。

ブラウザソースで表示したページの内容が更新されない場合

内容、画像が更新されない場合は以下の方法をお試しください。

手順
1、変更したいブラウザソースのプロパティを開く
2、プロパティを一番下までスクロールする
3、「現在のページのキャッシュを更新」をクリックする

ソースツールバーでも同様のことが可能です。
手順
1、変更したいブラウザソースを選択する
2、ソースツールバーにある「再読み込み」を押す

ブラウザソースの音声を音声ミキサーで調節(変更)したい場合

OBSで音声を制御する をご覧ください。
ブラウザソースのプロパティを変更する事で可能です。

ブラウザソースで表示したページの表示が変な場合

プロパティにある「カスタム CSS」を全部削除してください。
基本的に表示が大丈夫になります。(大丈夫にならない場合もあり)

ブラウザソースで表示したページを操作したい場合

1、追加した「ブラウザソース」を右クリックして「対話」をクリック
※もしくは追加した「ブラウザソース」を選択して「ソースツールバー」にある「対話」ボタンをクリック！
2、表示された「相互作用」画面で操作する。
※文字入力(英語のみ)、クリック、スクロールなどのことができます。(右クリは不可)

★対話画面の注意点
■注意1
ドロップダウンメニューをクリックするとOBS Stduioがフリーズするようです。
ただしブラウザソースはそのような事に使用することを目的としていないため ドロップダウンメニューを表示したりする場合は、ウィンドウキャプチャでブラウザをキャプチャすることをおすすめします。

■注意2
「対話」したい「ブラウザソース」に「フィルタ」で「クロップ/パッド」を使いクロップをした場合「対話画面」でズレが発生する不具合があります。
※もしクロップが必要なら、プレビュー画面でのクロップをお使いください。

・クロップ方法
Windowsの場合
「Altキー」を押しながら、ソースの赤枠にある四角部分をクリックしてドラッグする
macOSの場合
「Optionキー」を押しながら、ソースの赤枠にある四角部分をクリックしてドラッグする

表示したページがスクロール出来ない場合

プロパティにある「カスタム CSS」が原因でスクロールが出来ません。
一番手っ取り早いのは「カスタム CSS」を全部削除してください。
YouTubeなどは削除しないとスクロール出来ませんでした。

厳密に言うと一部削除で大丈夫です。(CSS例)
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; }

ブラウザソースを非表示した際に音が止まらない場合

プロパティにある「表示されてないときに、ソースをシャットダウンする」を有効にしてください。
※バージョン 27.2.4まで「表示されてないときに、ソースをシャットダウン」って翻訳

初期設定の場合はソース欄の目マークでソースを非表示にしてもブラウザソースは稼働したままになるので音が鳴り続けます。

アプリケーション音声キャプチャを使用した場合

デスクトップ音声を無効にした場合にブラウザソースで追加したアラートを配信/録画などに流したい場合

ブラウザソースの音声はどうしたらいいの？

★手順
1、設定したいブラウザソースのプロパティを開く
2、「OBSで音声を制御する」にチェック
3、プロパティを閉じる。(一度ここで音声が聞こえなくなります。)
4、OBSの本体画面「音声ミキサー」を右クリックして「オーディオの詳細プロパティ」を開く
5、ブラウザソースの「音声モニタリング」を「モニターと出力」にする。
※ブラウザの音を聞きたくない場合は音声モニタリングの設定は不要です。

obs-browser-page.exeのメモリ使用率が高い場合

「obs-browser-page」はブラウザソースのプロセスです。
メモリ使用率が高い場合、表示したページが重い可能性があります。
追加した「ブラウザ」を削除してどのページが重たいか確認してください。

obs-browser-page.exeのCPU使用率が高い場合

2022年8月18日 加筆
ニコさん情報提供ありがとうございます！

「obs-browser-page」はブラウザソースのプロセスです。
CPU使用率が高い場合、3つほど原因が考えられます。

・1つ目
ブラウザソースのハードウェアアクセラレーションを無効に変更した場合
※GPUの支援が無くなるので、表示するページによってはCPU使用率がかなり高くなります。
※もしチェックを有効にしてブラウザソースが動作しない環境のみ無効にすることをおすすめします。

下記手順で再度有効をお試しください。
1、OBS Studioの「設定」を開く
2、「詳細設定」を開く
3、スクロールして「ブラウザソースのハードウェアアクセラレーションを有効にする」を探す。
4、チェックを入れる。(初期はチェックが入っています。)
5、OBS Studioの再起動をする。

・2つ目
表示しているページが重い場合

★追加した際にCPU使用率が高い事に気付いた場合
そのページに問題がある可能性があるので、追加した「ブラウザ」ソースを削除してください。

★後でCPU使用率が高い事に気付いた場合
・ブラウザソースが1つの場合
それを削除してください。

・ブラウザソースが複数ある場合
1つ1つ削除してどれが原因か探してください。

3つ目
時間経過で蓄積したファイルの影響の場合

★最初は高くなかったのに、使用していくうちに高くなった場合
ページに問題がある可能性もありますが、Cookie/キャッシュの削除で改善する可能性があります。

・ブラウザのCookieファイル削除 → ここをクリック
・ブラウザのキャッシュファイル削除 → ここをクリック

その他 (各バージョンのメモ)

バージョン 30.0 RC1

WebP画像を表示しようとした場合

ベータテスト中の30.0 RC1に含まれるブラウザには不具合があります。
テストをされている方はお気をつけください。
この不具合はバージョン 30.0 RC2で修正されました。

バージョン 28.1

クラッシュ問題

28.1.1 のブラウザソースは不具合によりOBS Studioがクラッシュする問題がありました。
修正バージョンの 28.1.2 がリリースされたので、お困りの方は更新をお試しください。

クラッシュログ一部抜粋

obs-browser.dll!BrowserClient::OnConsoleMessage+0xa1  
obs-browser.dll!`anonymous namespace'::display_handler_on_console_message+0xce

不具合報告
github.com

リリース履歴
2022年11月6日 28.1.2 リリース
2022年11月2日 28.1.1 リリース
2022年11月1日 28.1.0 リリース

バージョン 28.0

ブラウザのCEFのバージョンが変更

バージョン 28.0は内部ブラウザのバージョンが 95(4638) から 103(5060) に更新されました。

バージョン 27.2

ブラウザのCEFのバージョンが変更

バージョン 27.2は内部ブラウザのバージョンが 75(3770) から 95(4638) に更新されました。
更新の影響で一部機能が過去の動作と異なるようです。

ローカルHTMLでローカル画像が読み込めない

絶対パスにしているとロードが失敗するようです。

以下のパスにした場合は表示ができるかもです。
http://absolute/D:\Users\Admin\Videos\test.gif
file:///D:\Users\Admin\Videos\test.gif

動作が異なるのは、Chromium のセキュリティ ポリシーの更新によるものだそうです。
詳しくは下記ページをご覧ください。
github.com

バージョン 25.0

CSSで指定した日本語フォントが反映されない

原因

OBS Studio 25.0 でCSS関連の処理が変わったことで発生している不具合(バグ)です。

解決策

2020年09月末にリリースされたバージョン 26.0 で修正されています。
25.0をお使いの方は下記サイト様の回避方法をお試しください。
外部サイト : http://css4obs.starfree.jp/help.html#enable-jp-font

その他 (キャッシュ、Cookieなど)

ブラウザソースのファイルに関して

設定フォルダ内

ブラウザソースで開いたページの「cache」「Cookie」などはOBS Studioの設定フォルダにある「plugin_config」の「obs-browser」に保存されます。
場合によっては肥大化するので、必要に応じて削除してください。

ブラウザのCookieファイルに関して

OBSのwikiから引用
Wiki - Clearing OBS Browser Cookies | OBS

標準的なブラウザと同様に、OBS Studioのブラウザソースとドックは、ログインやWebサイトの設定などの情報をCookieに保存します。

場合によっては、基盤となるブラウザシステムの変更、または更新後にサードパーティプラグインとの互換性が原因でOBS StudioのCookieをクリアする必要がある場合があります。

OBS BrowserのCookie削除が必要な場合は下記手順を参考にして削除してみてください。

Windowsの場合

Twitch、YouTube、Restreamに「アカウント接続」してる場合

1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Windowsキー + Rキーを押す。
3、「ファイル名を指定して実行」に下記文字を入力して「OK」を押す。
%appdata%\obs-studio\plugin_config\obs-browser\obs_profile_cookies
4、フォルダを削除する。
5、OBS Studioを起動する。
6、「設定 → 配信」で「アカウント切断」→「アカウント接続」をする。

バージョン 30.0以降で「サービス」をYouTubeにしてる場合

「YouTube Live Control Panel」と呼ばれるドックが追加されました。
1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Windowsキー + Rキーを押す。
3、「ファイル名を指定して実行」に下記文字を入力して「OK」を押す。
%appdata%\obs-studio\plugin_config\obs-browser\obs_profile_cookies_youtube
4、フォルダを削除する。
5、OBS Studioを起動する。

ブラウザソース、ブラウザドックの場合 (バージョン 28.0以降)

1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Windowsキー + Rキーを押す。
3、「ファイル名を指定して実行」に下記文字を入力して「OK」を押す。
%appdata%\obs-studio\plugin_config\obs-browser\Network
4、Cookies ファイルを削除する。
5、OBSを起動する。

ブラウザソース、ブラウザドックの場合 (バージョン 27.2.4まで)

1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Windowsキー + Rキーを押す。
3、「ファイル名を指定して実行」に下記文字を入力して「OK」を押す。
%appdata%\obs-studio\plugin_config\obs-browser\
4、Cookies ファイルを削除する。
5、OBS Studioを起動する。

macOSの場合

Twitch、YouTube、Restreamに「アカウント接続」してる場合

Finderからの開き方
1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Finderを開く (顔のマーク)
3、Finder上で「Shift」+「Command」+「G」を押す
(またはFinder画面を開いた状態で「メニューバー > 移動 > フォルダへ移動…」をクリック)
4、出てきた「フォルダの場所を入力:」ポップアップに下記文字を入力する。
~/Library/Applecation Support/obs-studio/plugin_config/obs-browser/obs_profile_cookies
4、フォルダを削除する。
5、OBS Studioを起動する。
6、「設定 → 配信」で「アカウント切断」→「アカウント接続」をする。

バージョン 30.0以降で「サービス」をYouTubeにしてる場合

「YouTube Live Control Panel」と呼ばれるドックが追加されました。

Finderからの開き方
1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Finderを開く (顔のマーク)
3、Finder上で「Shift」+「Command」+「G」を押す
(またはFinder画面を開いた状態で「メニューバー > 移動 > フォルダへ移動…」をクリック)
4、出てきた「フォルダの場所を入力:」ポップアップに下記文字を入力する。
~/Library/Applecation Support/obs-studio/plugin_config/obs-browser/obs_profile_cookies_youtube
4、フォルダを削除する。
5、OBS Studioを起動する。

ブラウザソース、ブラウザドックの場合 (バージョン 28.0以降)

Finderからの開き方
1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Finderを開く (顔のマーク)
3、Finder上で「Shift」+「Command」+「G」を押す
(またはFinder画面を開いた状態で「メニューバー > 移動 > フォルダへ移動…」をクリック)
4、出てきた「フォルダの場所を入力:」ポップアップに下記文字を入力する。
~/Library/Applecation Support/obs-studio/plugin_config/obs-browser/Network
4、Cookies ファイルを削除する。
5、OBS Studioを起動する。

ブラウザソース、ブラウザドックの場合 (バージョン 27.2.4まで)

Finderからの開き方
1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Finderを開く (顔のマーク)
3、Finder上で「Shift」+「Command」+「G」を押す
(またはFinder画面を開いた状態で「メニューバー > 移動 > フォルダへ移動…」をクリック)
4、出てきた「フォルダの場所を入力:」ポップアップに下記文字を入力する。
~/Library/Applecation Support/obs-studio/plugin_config/obs-browser
4、Cookies ファイルを削除する。
5、OBS Studioを起動する。

ブラウザのキャッシュファイルに関して

OBS Studioの設定フォルダ内「plugin_config → obs-browser」にあります。
気になる場合は下記手順で削除してください。

Windowsの場合

1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Windowsキー + Rキーを押す。
3、「ファイル名を指定して実行」に下記文字を入力して「OK」を押す。
%appdata%\obs-studio\plugin_config\obs-browser
4、「Cache」「Code Cache」「GPUCache」フォルダを削除する。
5、OBS Studioを起動する。

macOSの場合

Finderからの開き方
1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Finderを開く (顔のマーク)
3、Finder上で「Shift」+「Command」+「G」を押す
(またはFinder画面を開いた状態で「メニューバー > 移動 > フォルダへ移動…」をクリック)
4、出てきた「フォルダの場所を入力:」ポップアップに下記文字を入力する。
~/Library/Applecation Support/obs-studio/plugin_config/obs-browser
5、「Cache」「Code Cache」「GPUCache」フォルダを削除する。
6、OBS Studioを起動する。

その他

透過画像が透過されない場合

対処法 (外部サイト紹介)

X(Twitter)で対応策をポスト(ツイート)してる人が居たので紹介します。
カスタムCSSで対処可能とのことです。

Discord

個人通話のオーバーレイを表示したい場合

Discordの個人通話(ダイレクトメッセージ/DM)をオーバーレイ表示することができます。
2つ紹介しますが、やりやすい方でお試しください。

方法1

こちらの場合はCSSで表示をカスタマイズできます。

手順
・Discord側
1、Discordの「ユーザー設定」を開く
2、「詳細設定」を開く
3、「開発者モード」を「有効(緑色)」にする
4、「設定」を閉じる
5、表示したい人のダイレクトメッセージを選択
6、選択したら右クリックをして「チャンネルIDをコピー」をする

・OBS側
1、「ブラウザ」を追加する
2、URLに下記を追加する
https://streamkit.discord.com/overlay/voice/@me/チャンネルID
3、URL最後のチャンネルIDを置き換える
4、必要に応じてCSSをカスタマイズする

方法2

以下のサイトが便利かもしれません。
Reactive by FugiTech

Discord Streamkit Overlay カスタムCSS

CSSをカスタマイズする事でオーバーレイのデザインを変更することができます。
もし使用していて動作しなくなった場合は、Discord側の仕様変更などがされてる場合もあります。
※過去には2023年03月03日頃と2022年12月16日頃に動作しないことがありました。

DicordカスタムCSS (はいしんツールキット)

ruri.info

OBSのDiscordアイコン外観変更ジェネレーター

obs-discord-icon.alfebelow.com

・立ち絵を表示したい場合
Discordのサムネを立ち絵に変更したい際には便利かもしれません。
obs-discord-picture.alfebelow.com

表示されない問題があった際の情報メモ

X(旧Twitter)で「Discord CSS」と調べた所、文字列を書き換えする事でカスタムCSSを以前のように動作させることが可能なようです。
いくつかあるので、それぞれお試しください。
お試しする際は元のCSSのバックアップをお忘れなく。

https://twitter.com/pale_zzz/status/1603755046671642624 https://twitter.com/reverinu_vtuber/status/1603941218106617856 https://twitter.com/DiscoTeiMeteo/status/1603935763065880576

Valorant

ランクオーバーレイ

VALORANTのランクをオーバーレイ表示したい場合は、下記サイトが便利かと思います。
2つほど見つけたのでメモしておきます。
Rank
Valorant Streamer Overlay

YouTube コメント欄

おすすめ

わんコメを使用して表示する。
ブラウザソースにURLとCSSを利用するより楽です。

紫の猿が表示される

YouTubeのコメント欄を表示した際に紫の猿が表示される場合はYouTube側の配信設定で「プライバシー」設定が「非公開」だと発生します。
「公開」または「限定公開」にして下さい。

Chat v2.0 Style Generator 日本語版

チャット欄が正常に表示されない場合1

チャット欄が表示されなくなった場合はCSSを新しく作成しなおしてみてください。

手順
1、下記サイトへアクセス
Chat v2.0 Style Generator 日本語版
2、カスタマイズ後、CSSをコピーをする
3、OBSでYouTubeチャット欄を表示してるブラウザソースのプロパティを開く
4、「カスタム CSS」を「手順3」でコピーした「CSS」に置き換える
5、プロパティを「OK」を押して閉じる
※うまく表示されない場合は一度「カスタム CSS」を全て削除してYouTubeのコメント欄が表示されるかお確かめください。(表示された場合はCSSに問題があります)

チャット欄が正常に表示されない場合2

・名前、本文は表示されず「：」だけが表示される
とかなどの問題がある場合は、下記サイト様が対処法を書かれてるので参考にしてみると良いかもです。
css4obs.starfree.jp

Twitch チャット欄

ログイン画面が表示される

Twitch チャット欄にログイン画面が表示される場合は確認してみてください。
ここでのログイン画面はTwitch連携(設定 → 配信)で利用可能なチャット欄(ドック → チャット)ではありません。
※ブラウザソースではログイン情報保存先が異なる。

クリエイターダッシュボードからポップアップした場合

https://dashboard.twitch.tv/popout/u/TwitchID/stream-manager/chat

ログイン画面が表示されます。
1つ下の視聴者側のチャットポップアップURLをお使いください。
※もしログインしたい場合は該当のブラウザソースを選択して右クリックをして「対話 (操作)」からログインをしてください。

視聴者側の画面からポップアップした場合

https://www.twitch.tv/popout/TwitchID/chat?popout=

一時期Twitch側に変更があり、ログインしてないブラウザでチャット欄を見るとログインしてくださいと出ることがありました。
※出る場合と出ない場合がありました。
もしログイン画面が表示された場合は、該当のブラウザソースを選択して右クリックをして「対話 (操作)」からログインをしてください。

HTML5コメントジェネレーター

表示されない (出ないなど)

プログラムファイル「C:\Program Files、C:\Program Files (x86)」に入れたりすると権限の問題で動作しません。
設定ミスしてると高確率で表示されません。
プラグインが反映されてないと表示されません。

過去だとブラウザプラグインを故意に入れ替えた場合は表示が出来ないことがあります。
※ブラウザプラグインの入れ替え作業は正直必要ないので、問題が発生したらOBS Studioを一度アンインストールしてから再度インストールを行ってください。

HTML5コメントジェネレーターのメモ

【ニコ生】とかが最初についちゃう人は、指定しているHTMLを確認！
もし「CommentGenerator_multi.html」を指定すると【】で配信サイト名が最初に出てきます。
「CommentGenerator.html」を指定してください。

ブラウザのデバッグログに関して (23.0未満)

バージョン 23.0以降はデバッグログが生成されなくなりました。
もし肥大化してる場合は手動で削除してください。

☆Windowsの場合
「bin\32bit or 64bit」フォルダに「debug.log」が生成される。
「debug.log」が生成される条件 : ブラウザソースを追加してOBS Studioを起動する。
※プログラムファイルにインストールしてる場合は、管理者権限でOBS Studioを起動した場合のみに生成されます。
「debug.log」が更新される条件 : 追加時・ページ内容が更新時
※HTML5コメジェネを使用した場合、コメント毎に更新されるので肥大化する恐れあり。
「debug.log」を更新されなくする方法 : ファイルを読み取り専用に変更する。

☆macOSの場合
HDD/Users/(ユーザー名)/ライブラリ/Logsにある「obs_debug.log」

macOS関連

macOSでの「ブラウザ(BrowserSource」の場所
OBS.app内に含まれるように変更。(22.0ぐらいで)
「HDD/Library/Application Support/obs-studio/plugins」は無効にするように変更。

過去情報 (削除予定)

現在は追加しなくてもいいと思います。
BrowserSourceでWebGLなどのサポートが必要な場合
OBS Studioのショートカットに「 --enable-GPU 」を追加する必要があります。
※18.0では不具合でこのオプションが使えなくなってるので必ず18.0.1以降に更新必須。

開発者向け

ドラッグアンドドロップで追加

ドラッグアンドドロップでブラウザソースを追加することができます。
いくつかサポートされているパラメータがあります。
ソース名、ソースの幅、ソースの高さなどが設定することができます。
Drag and Drop Demo | OBS
※OBS Studioを管理者権限として実行している場合は動作しません。

DevToolsを使用したい場合

ブラウザソースで表示してる内容を「DevTools」で見ることができます。
どのようなエラーが発生しているのかを確認することができます。
ブラウザソースを使用して何かツールを作成されてる方には便利かもしれません。
カスタムブラウザドックはバージョン 29.0 から開いたカスタムブラウザドックを右クリックをする事でDevToolsを開くことが可能になりました。

手順
1、OBS Studioのショートカットに下記を追加
※ポート番号はここでは 9222 にしていますが変更しても大丈夫です。

--remote-debugging-port=9222

2、ブラウザで下記URLを開く
※もしポート番号を変更した場合は 9222 から変更した番号にしてください。

http://localhost:9222

検索ワード : BrowserSource / ブラウザ / ない / 見当たらない / 見つからない / 出てこない / 消えた / 無くなった / インストール方法 / 導入方法 / アラート出ない 　

*1:Windowsの人はバージョン 23.0以前の場合は、インストール時「BrowserSource」のチェックを外さないように！

*2:手動でBrowserSource.zipを解凍して導入する方法

*3:BrowserSource v1.30/v1.30.1などのテスト版はパフォーマンスに問題があります。