OBSに関する情報メモブログ

OBS Studioに関する事を主にメモしてます。

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

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

記事はWindows版を使い書いています。
macOS / Linuxでは若干違う場合があるのでご了承ください。

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

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

ブラウザソースを導入する方法

1、公式サイトより OBS Studio最新版 をダウンロードする。
2、OBS Studioのインストール(導入)*1を行う。
3、OBS Studioを起動してソース一覧で「ブラウザ」を探す。
上記手段以外*2でBrowserSourceを導入した場合、問題*3があります。
一度OBS Studioをアンインストールしてからインストールする事を推奨します。

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

2018年03月19日にリリースされた OBS Studio 21.1(Windows版) / 2018年08月21日にリリースされた OBS Studio 22.0(macOS版)から「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が用意したページがOBS上で表示されない場合は、何らかの原因でブラウザソースに問題が発生しています。
下記手段を1つずつ試してみてください。

OBSを再起動させる

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

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

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

バージョン 22.0 以降の場合 (Windows限定)

環境によりOBS側の設定を変更しないと駄目な場合もあるようです。
※困ってる場合のみチェックを外して治るかお確かめ下さい。

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

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

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

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

プロパティにある「カスタム CSS」を全部削除してください。
基本的に表示は治ります。(稀に治らない事あり)

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

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

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

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

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

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

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

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

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

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

「obs-browser-page.exe」はブラウザソースのプロセスです。
CPU使用率が高い場合、表示しているページに問題があります。

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

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

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

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

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

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

バージョン27.2~27.2.4までは「カスタムCSS」以下の設定はスクロールしないと見えないです。

ローカルファイル

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

URL

ローカルファイルがオフに設定されている場合、指定したURLからWebページをロードします。
デフォルト : https://obsproject.com/browser-source

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

高さ

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

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

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

FPS

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

カスタムCSS

注 : バージョン27.2以降「カスタムCSS」部分はスクロールしないと見えません。(マウスホイールをくるくるするか、右側のスクロールバーを操作!)

デフォルトでは、背景を透明に設定し、本文の余白を削除し、スクロールバーを非表示にします。 (ページがビューポートの幅/高さよりも大きくレンダリングされる場合)
デフォルト : body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

OBSで音声を制御する

※27.2.4まで「OBSを介して音声を制御する」

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

★音声モニタリング例
もし「音声モニタリング」の音声が聞こえない場合は「設定 → 音声」で「音声モニタリング」設定を確認してみてください。(初期値 : 既定)

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

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

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

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

※27.2.4まで「表示されてないときに、ソースをシャットダウン」
ソースが表示されなくなった時にブラウザをシャットダウンします。
・有効にした場合 : 目のアイコンをクリックしたり、追加していないシーンに移動した時にシャットダウンされます。

ソースはすべてのシーンで共有の為、音のなるページの場合はチェックをつけないと目マークでソースをオフにしても音が再生され続けます。(複数追加すると音が2重になる)
検索ワード : BrowserSource / 音二重 / 音がだぶる / 音が2つ

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

※27.2.4まで「シーンがアクティブになったときにブラウザの表示を更新」
アクティブになったときにページを更新します

ページ権限

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

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

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

その他

28.1のブラウザソースに関して

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

クラッシュログ一部抜粋

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

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

28.0のブラウザソースに関して

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

27.2のブラウザソースに関して

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

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

絶対パスにしているとロードが失敗するようです。
相対パス http://absolute/ を使用すると表示が出来るようです。
動作が異なるのは、アップグレードしたCEFのバージョンに対するセキュリティ更新の増加の副作用が原因だと思われます。
この現象に関しては報告もあるので、今後修正されるかもしれません。
github.com

透過画像が透過されない現象 (外部サイト紹介)

Twitterで対応策をツイートしてる人が居たので紹介します。
カスタムCSSに追記すると消えるようです。

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

設定フォルダ内

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

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

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

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

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

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

Windowsの場合

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

ブラウザ、ブラウザドックCookieの場合 (28.0以降の場合)
1、OBSを終了する (OBSが実行されていないことを確認してください)
2、Windowsキー + Rキーを押す。
3、「ファイル名を指定して実行」に下記文字を入力して「OK」を押す。
%appdata%\obs-studio\plugin_config\obs-browser\Network
4、Cookies ファイルを削除する。
5、OBSを起動する。

ブラウザ、ブラウザドックCookieの場合 (27.2.4までの場合)
1、OBSを終了する (OBSが実行されていないことを確認してください)
2、Windowsキー + Rキーを押す。
3、「ファイル名を指定して実行」に下記文字を入力して「OK」を押す。
%appdata%\obs-studio\plugin_config\obs-browser\
4、Cookies ファイルを削除する。
5、OBSを起動する。

macOSの場合

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

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

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

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

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

Windowsの場合

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

macOSの場合

Finderからの開き方
1、OBSを終了する (OBSが実行されていないことを確認してください)
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を起動する。

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

原因

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

解決策

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

ブラウザのデバッグログに関して (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」

開発者向け

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

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

DevToolsを使用したい場合

ブラウザソースで表示してる内容を「DevTools」で見る事が出来ます。
どのようなエラーが発生しているのかを確認する事ができます。
ブラウザソースを使用して何かツールを作成されてる方には便利かもしれません。

手順
1、OBSのショートカットに下記を追加

--remote-debugging-port=9222

2、ブラウザで下記URLを開く

http://localhost:9222  

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

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

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

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