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

OBS Studioに関する情報を主に投稿

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

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

解説

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

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

ブラウザソースとは

文字通りOBS Studioに直接追加出来るWebブラウザです。
Webページをシーンに追加します。
「CEF (Chromium Embedded Framework)」が使用されています。
※OBS側のCEFは → GitHub - obsproject/cef: Fork of CEF (Chromium Embedded Framework) with OBS-specific patches

使用されているCEFバージョンに関して

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

どうしてCEFバージョンが更新されないの？

最新情報

2024年2月10日頃 追記 (2024年3月19日地味に内容更新)
新しいCEFバージョンに対応しようとしてる動きがあります。
OBS公式Discordの#Developmentチャンネルにあるスレッド(Chromium 124+ OSR Shared Textures)で会話があります。
会話を見てる感じ Reito (Reito OvO) さんがChromium側に色々変更してるっぽい？

理由

OBS ProjectによってビルドされていないCEFビルドにはOBSが必要とする共有テクスチャのサポートが含まれていません。
CEF 103まではなんとか対応できたようですが、CEF 104+以降でハードウェアアクセラレーションを動作させるのが難しいようです。
情報元 : https://github.com/obsproject/obs-studio/issues/8657#issuecomment-1496905026

ブラウザソースプロセス

obs-browser-page

Windowsでは「obs-browser-page.exe」が起動します。

★「obs-browser-page」が起動する条件
・「ブラウザ」ソースを追加している
・「カスタムブラウザドック」にウェブページを追加している
※「設定」→「配信」で「アカウント連携」をしている場合は、追加されたドックを表示してる場合は「obs-browser-page」が起動されます。

★「obs-browser-page」を減らしたい場合
・「ブラウザ」ソースの削除
・「メニューバー」→「ドック」→「カスタムブラウザドック」の削除
※「アカウント連携」で追加されたドックを非表示にする。

★注意メモ
・カスタムブラウザドックを非表示にしていても起動パラメータ「-- minimize-to-tray」を使用して起動したり「UIをリセット/ドックをリセット」するとバックグラウンドで起動されます。(表示されないのに裏で起動してる状態。仕様か不具合か分かりませんが気をつけてください。)

ブラウザソース関連設定

設定 → 詳細設定 → ソース

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

初期値 : 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

幅

表示したページの幅を設定します。

初期値 : 800

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

高さ

表示したページの高さを設定します。

初期値 : 600

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

OBSで音声を制御する

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

初期値 : オフ(OFF)

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

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

★音声モニタリング例
音声モニタリングは「音声ミキサー」ドックから「オーディオの詳細プロパティ」を開くことで利用できます。
もし「音声モニタリング」の音声が聞こえない場合は「設定」→「音声」で「音声モニタリング」設定を確認してみてください。(初期値 : 既定)
※「音声モニタリング」のデバイス変更時はOBS Studioを再起動しないと音声が聞こえない場合があります。

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

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

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

OBSで音声を制御する の不具合情報

「OBSで音声を制御する」オプションを利用した際にOBS Studioを最小化するとブラウザの音声が変になることがあります。
検索ワード : ノイズ、ブツブツ、ビリビリ、ロボット、音飛び、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

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

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

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

初期値 : オフ(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 以降を利用している場合

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

「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」

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

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

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

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公式サイト及び指定した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、「OK」を押してOBS Studioを再起動する。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プロパティにある「カスタム CSS」が原因でスクロールが出来ません。
「カスタム CSS」にある overflow: hidden; を削除してください。
一番手っ取り早いのは「カスタム 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のメモリ使用率が高い場合

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

obs-browser-pageの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で指定した日本語フォントが反映されない

原因

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

解決策

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

その他 (設定フォルダ、キャッシュ、Cookie)

ブラウザソースの設定フォルダに関して

ブラウザソースの設定はOBS Studioの設定フォルダにある「plugin_config」の「obs-browser」に保存されます。
「obs-browser」フォルダを削除するとブラウザソースのログイン、キャッシュ、Cookieが全て消すことが可能です。
場合によっては肥大化するので、必要に応じて削除してください。
ブラウザソースで開いたページの「cache」「Cookie」などを個別に削除したい場合は下記をご覧ください。

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

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

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、「Cache」「Code Cache」フォルダを削除する。
6、OBS Studioを起動する。

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

1、OBS Studioを終了する (OBS Studioが実行されていないことを確認)
2、Windowsキー + Rキーを押す。
3、「ファイル名を指定して実行」に下記文字を入力して「OK」を押す。
%appdata%\obs-studio\plugin_config\obs-browser\obs_profile_cookies_youtube
4、フォルダを開く。
※複数アカウント連携してる場合は全てのフォルダを確認
5、「Cache」「Code Cache」「GPUCache」フォルダを削除する。
6、OBS Studioを起動する。

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

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の場合

ブラウザソース、ブラウザドックの場合 (バージョン 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
5、「Cache」「Code Cache」「GPUCache」フォルダを削除する。
6、OBS Studioを起動する。

ブラウザの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を起動する。

その他

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

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

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

* {background: transparent!important;}

半透明な素材(画像)

黒ずんでしまう場合(くすんで/グレーになって)

以下の方法をお試しください。

★手順
1、ブラウザソースを右クリック
2、ブレンド方法を「既定」から「SRGBオフ」に変更
※もし背景が透過されない場合は1つ上で紹介してる「カスタムCSS」が便利かもです。

もし「画像ソース」で同等のことをしたい場合は下記方法をお試しください。

★手順
1、画像のプロパティを開く
2、「アルファ値を線形空間に適用する」にチェック
3、プロパティを閉じる

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

以下のサイトが便利かもしれません。
毎回URLのコピー＆ペースト(コピペ)の必要がなくて非常に楽で便利です。
Reactive by FugiTech
※もし表示されない場合は、DiscordとOBSを終了して、Discord→OBSの順番に起動をしてみてください。(駄目な場合はパソコン再起動)

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

スコラボ

チャット欄やテキストが黒ずんで(くすんで)しまう場合

SRGBをオフにする必要があるようです。

★手順
1、スコラボのURL入れたブラウザソースを右クリック
2、ブレンド方法を「既定」から「SRGBオフ」に変更

Valorant

ランクオーバーレイ

VALORANTのランクをオーバーレイ表示したい場合は、下記サイトが便利です。

★おすすめ
Rank

・手順
1、ページを開く
2、「Nickname」と「ID」と「Select your region」を変更してSubmitを押す
3、OBSでブラウザソースを追加してURLを貼り付けてOKを押す
※お好みで幅と高さを調整

何故か表示出来ても更新されないやつ
Valorant Streamer Overlay

YouTube コメント欄

おすすめ

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

紫の猿が表示される

YouTubeのコメント欄を表示した際に以下の画像のような紫の猿(Something went wrong)が表示される場合

原因

1、YouTube側の配信設定で「プライバシー」設定が「非公開」
2、配信を削除したりして利用できなくなってる

解決方法

1、「公開」または「限定公開」に変更して「再読み込み」下さい。
2、URLを正しいやつに更新してください。 https://www.youtube.com/live_chat?is_popout=1&v=動画ID

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などのテスト版はパフォーマンスに問題があります。