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

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

トップ > 解説 > 【OBS Studio】 カスタムブラウザドック について

【OBS Studio】 カスタムブラウザドック について

解説

OBS Studioの「カスタムブラウザドック」に関しての記事。
記事投稿日 2022年02月08日、最終投稿更新日 2023年05月17日 21時00分頃

カスタムブラウザドックとは？

バージョン 24.0から実装されたOBSの本体画面にドッキング可能なドックを表示してその中にウェブページを開くことが出来る機能です。
github.com

カスタムブラウザドックの開き方

※バージョン 27.2 以降
「ドック」→「カスタムブラウザドック」
cbd1

何らかの理由で過去バージョンを使用してる場合
バージョン 27.1.3 までは
「表示」→「ドック」→「カスタムブラウザドック」

カスタムブラウザドックの使い方

「カスタムブラウザドック」ウィンドウを開いたら「ドック名」と「URL」を入力して「適用」を押す
「適用」を押すと「URL」で指定したウェブページが表示されます
開いた「カスタムブラウザドック」を削除したい場合は、URL右側にあるボタンを押すと削除することができます

cbd2

表示したページが真っ白で表示されない場合

一度「カスタムブラウザドック」画面でURL入力欄の右側にあるアイコンを押して「適用」を押して一度ドックを閉じてから再度追加をお試しください。
再度追加で駄目だった場合は、OBSを再起動してみてください。

OBS本体画面にドッキングする方法

ドックが表示された後にOBS本体画面にドッキングする場合は表示されたドックをOBS本体画面にドラッグします。
※ドッキングされない場合は「ドックをロック」にチェックが入ってないか確認してください。
※古いバージョンだとUIをロックです。

動作風景 (画像クリックで拡大表示可)

※もしgifが見えにくい場合は動画版 (YouTube)をご覧ください。

カスタムブラウザドックで出来る事

表示したページの音声をミュートしたい場合

2023年1月8日にリリースされたバージョン 29.0以降

右クリックして「ミュート」

表示したページの検証をしたい場合

2023年1月8日にリリースされたバージョン 29.0以降

右クリックして「検証」

表示したページを拡大/縮小したい場合

2023年5月3日にリリースされたバージョン 29.1以降

Ctrl - と + または右クリックメニューでブラウザドックのページを拡大/縮小出来ます。

※動作風景は下記ページで見れます。
Add ability to zoom browser docks with Ctrl - and + by WizardCM · Pull Request #399 · obsproject/obs-browser · GitHub

表示したページのアドレスをコピーしたい場合

2023年5月3日にリリースされたバージョン 29.1以降

右クリックして「現在のアドレス」をコピー

※実装の様子は下記ページで見れます。
Add "Copy page link" option to browser dock context menu by WizardCM · Pull Request #400 · obsproject/obs-browser · GitHub

活用術

注意点

指定したURLと違うページになってしまう場合
ログインが必要なページを使用した場合、ログイン後に別画面に飛ばされることがあります。
もし別画面になってしまった場合は一度「カスタムブラウザドック」画面でURL右側にあるアイコンを押した後に「適用」を押して一度ドックを閉じてから再度追加をお試しください。

X (Twitter)

ポスト(ツイート)画面を表示したい場合
※ログインをする必要があります。

https://twitter.com/compose/tweet
https://mobile.twitter.com/compose/tweet
どちらかをお試しください。

XPro (TweetDeck)

https://tweetdeck.twitter.com/

効果音ポン出し

soundeffect-lab.info

「ポン出しを使う」で開かれたページを使う。

YouTube

YouTubeのチャット欄を表示したい場合
https://www.youtube.com/live_chat?is_popout=1&v=動画ID

Twitch

Twitchのダッシュボードを開きたい場合

アカウント連携(設定 → 配信でアカウント接続)を使わずストリームキーで配信をしていて開きたい場合に便利です。
※もしアカウント連携をしている場合にドックが消えた場合は「設定」→「配信」で一度アカウント接続を切断して再度接続してみてください。

カスタムブラウザドックで開くにはログインをする必要があります。
URLの「お使いのTwitch ID」と書いてる所をご自身のTwitchIDに変更してお使いください。

例 : Twitch IDが「style1925」の場合
https://dashboard.twitch.tv/popout/u/style1925/stream-manager/edit-stream-info

クイックアクション
https://dashboard.twitch.tv/popout/u/お使いのTwitch ID/stream-manager/quick-actions

配信情報の編集
https://dashboard.twitch.tv/popout/u/お使いのTwitch ID/stream-manager/edit-stream-info

アクティビティフィード
https://dashboard.twitch.tv/popout/u/お使いのTwitch ID/stream-manager/activity-feed

チャット欄
https://dashboard.twitch.tv/popout/u/お使いのTwitch ID/stream-manager/chat

ステータス (データ)
https://www.twitch.tv/popout/お使いのTwitch ID/dashboard/live/stats

StreamElements

アクティビティフィードを表示したい場合
※ログインをする必要があります。
https://yoink.streamelements.com/activity-feed?activitiesToolbar=false&popout=true&theme=dark&withSetupWizard=false

2024年3月10日 情報をとりあえず加筆
今は以下の方法で日本語にするのは無理なようです。
(軽く調べると去年10月頃に利用できなくなったようです。)
StreamElementsのアクティビティフィードを日本語化したい場合
1、下記URLを「カスタムブラウザドック」で開く
https://streamelements.com/dashboard
2、右上のアイコンをクリック
3、English から 日本語 に変更する
4、変更が終わったら追加したパネルは「カスタムブラウザドック」でURL右側にあるアイコンを押して閉じる。
5、表示したアクティビティフィードページを右クリックして再読み込みする。
※上手くいかない場合はOBSを再起動してみてください。

Streamlabs

Recent Events (最近のイベント) を表示したい場合
※ログインをする必要があります。
https://streamlabs.com/dashboard/recent-events

検索ワード : ブラウザドック / パネル /

こんな時は

日本語入力が画面左上に出る

バージョン 28.0以降に発生するようです。
1度パネルを x で閉じて開き直せば一時的には解消します。
解決方法ではないですが、メモとして。

★発生条件
・OBSウィンドウをAlt + Tabで切り替え
・OBS本体画面にブラウザドックをドッキング

ページに奇妙な線が入る場合

下記みたいな感じ

NVIDIAの設定が問題だそうです。


「3D 設定の管理」にある「画像のシャープ化」を「オフ」にしてください。
もし解決しない場合は右上にある「初期設定に戻す」または「復元」で3D 設定を初期値に戻してください。
※変更後はパソコン再起動をおすすめします。
※最近のドライバーではこの設定自体が無いようです。

情報元
https://www.reddit.com/r/obs/comments/f8wsyz/weird_chat_browser_dock_glitching/

ページがぼやけてる場合

別ページに書いてましたが、当記事にも。
表示したページがボヤける(滲んでる)場合の対処法

NVIDIAグラフィックボードをお使いの場合

※最近知恵袋で同様の回答をしたので、ほぼそのままで加筆。
「NVIDIA コントロール パネル」で「3D 設定の管理」を変更したことが原因の可能性があります。
下記設定を確認してみて修正されるかお試しください。

手順
1、OBSを終了する。
2、デスクトップの何もない所で右クリックして「NVIDIA コントロール パネル」をクリック。
※Windows 11の場合はデスクトップの何もない所で右クリックして「その他のオプションを表示」を押して「NVIDIA コントロール パネル」をクリック。
3、「NVIDIA コントロール パネル」が開かれる。
4、「3D 設定」にある「3D 設定の管理」を押す。
5、「アンチエイリアシング - FXAA」を「オフ」にする。
※既に「オフ」の場合は、右上にある「初期設定に戻す」または「復元」で3D 設定を初期値に戻してください。
6、右下の「適用」を押して「NVIDIA コントロール パネル」を閉じる。
7、OBSを起動して文字のにじみを確認する。

★上の方法が駄目な場合

手順
1、OBSを起動する。
2、「設定」を開き「詳細設定」を押す。
3、スクロールして「ソース」にある「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェックを外す。
(※チェックを外すとGPUの支援が出来なくなるので表示したページによってはブラウザソースのプロセス「obs-browser-page」のCPU使用率がかなり高くなるので注意してください。)
4、「OK」を押すとOBSの再起動が求められるので「はい」を押す。
5、OBSが起動するので文字のにじみを確認する。

情報元 (英語ページ)
Text in Chat/Stream Information Dock is Blurry | OBS Forums

OBS Docks Are Blurry and illegible after i extended my main monitor to use obs on its own display. I Absolutely can not figure out how to fix this. Pl | OBS Forums

https://www.reddit.com/r/obs/comments/wbnui1/why_is_the_chat_on_my_obs_look_so_blurry_and_how/

検索文字列 : 滲む / にじむ / ぼやける / ボヤける / 文字が変