OBSブラウザソースの設定＆操作方法｜映らないときの対処法についても解説
目次
WebページをOBSに映せる機能
OBSのブラウザソースとは、OBSに特定のWebページのURLを入力することで、OBS内に直接Webページを取り込み、ソースとして利用することができる機能です。
ブラウザソースは使い道が非常に多く、単にOBS内にWebページを表示するだけではなく、OBSと外部ツールを連携する際や、コメント欄を表示させる際にも必要になる場合があります。
本記事ではブラウザソースの設定から、OBS内でブラウザを操作する方法、映らないときの対処法についても解説します。
画像も交えながら初心者の方も分かりやすいように解説していますので、ブラウザソースの基礎的な使い方を知りたい方はぜひご覧ください。
ブラウザソースの設定方法
ブラウザソースの追加手順
手順1：「+」ボタンをクリック
まずはOBSを起動し、画面左下に表示されている「ソース」ドックの「+」ボタンをクリックします。
画面に「ソース」ドックが表示されていない場合は、画面上部のメニューバーから選択して追加してください。
手順2：「ブラウザ」を選択
次に、表示されているソースの一覧から「ブラウザ」を選択し、クリックします。
手順3：名前を入力
すると、「ソースを作成/選択」が表示されるため、「新規作成」に名前を入力して「OK」をクリックします。
この時、複数のブラウザをソースとして読み込む予定がある場合は、分かりやすい名前に変更しておきましょう。
後から変更することもできますが、先に決めておくことで複数のソースの管理がしやすくなります。
手順4：URLを入力
「（ソース名）のプロパティ」が開くため、開きたいWebページのURLをコピーし、「URL」に貼り付けます。
これでブラウザソースの追加は完了です。
ブラウザのプロパティ概要
次に、「ブラウザのプロパティ」の各項目について解説します。
ローカルファイル
インターネット上のWebページのURLではなく、PCに保存されているhtmlなどのファイルを読み込んで、ブラウザソースとして利用します。
URL
WebページのURLを指定することで、そのWebページを読み込んでOBS上に表示します。
幅
WebページをOBS上に表示する際の幅を設定します。
最小値は1、最大値は8192です。
高さ
WebページをOBS上に表示する際の高さを設定します。
最小値は1、最大値は8192です。
OBSで音声を制御する
有効にすることで、OBSの「音声ミキサー」ドッグにブラウザソースが表示され、音声を調節できるようになります。
カスタムフレームレートを使用する
OBS上にWebページを表示する際のフレームレートをカスタムすることができます。
FPS
カスタムフレームレートの値を1から60までの間で設定することができます。
「カスタムフレームレートを使用する」を有効にしていない場合、このオプションは表示されません。
カスタム CSS
表示されるWebページにカスタムCSSを適応することができます。
表示されていない時にソースをシャットダウンする
「ソース」ドックでブラウザソースを非表示にした時など、表示されていないブラウザを自動的にシャットダウンします。
シーンがアクティブになったときにブラウザの表示を更新する
シーンがアクティブになった時に、自動的にWebページを更新して最新のものに切り替えます。
ページ権限
OBS上で開いているWebページに与えられる権限の設定を変更することができます。
現在のページのキャッシュを更新
OBS上で開いているWebページを直ちに更新し、読み込み直すことができます。
OBSでブラウザを操作する方法
上記の操作ではOBS内でWebページを表示することができますが、そのままではクリックやスクロールなどの操作をすることができません。
Webページを表示するだけであれば問題ありませんが、ログインなどの操作を行う場合は「対話」という操作を行う必要があります。
「対話」を行う場合は、「ソース」ドックから新規に追加したブラウザソースを右クリックし、「対話（操作）」を選択します。
「（シーン名）との相互作用」が表示されるため、ここからブラウザソースを操作することができるようになります。
OBS上でブラウザソースが非表示の状態でも操作は可能なため、配信などで操作を映したくない場合は非表示のまま操作すると良いでしょう。
ただし、この機能で表示されるブラウザはあくまでも補助的なもので、URLバーなどが表示されていないため、通常のブラウザと同じように使うことはできません。
ブラウザソース内でのログインの際にのみ使用するなど、OBS内で行う操作は最小限に留めておいた方が良いでしょう。
頻繁に操作するWebページをキャプチャしてOBSに表示したい、という場合は別の方法でブラウザをキャプチャすることをおすすめします。
別の方法でブラウザをキャプチャ
ブラウザソース以外でブラウザをキャプチャする方法として、「ウィンドウキャプチャ」ソースで直接キャプチャする方法があります。
配信中にブラウザを操作しながら視聴者に見せたい場合、こちらの方法の方が一般的かもしれません。
手順1：「+」ボタンをクリック
まずは、OBSの画面左下に表示されている「ソース」ドックの「+」ボタンをクリックします。
手順2：「ウィンドウキャプチャ」を選択
次に、表示されているソースの一覧から「ウィンドウキャプチャ」を選択し、クリックします。
手順3：名前を入力
すると、「ソースを作成/選択」が表示されるため、「新規作成」に名前を入力して「OK」をクリックします。
ブラウザソースと同様に、複数のソースを使用する予定がある場合は、分かりやすい名前に変更しておくと良いでしょう。
手順4：URLを入力
「（ソース名）のプロパティ」が開くため、「ウィンドウキャプチャ」で表示したいブラウザを選択します。
音声も取り込みたい場合は「音声をキャプチャ(ベータ版)」、操作するカーソルもキャプチャしたい場合は「カーソルをキャプチャする」にもチェックを入れましょう。
ブラウザが映らない原因と対処法
ブラウザが映らない場合は、「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェックを外すことで解決する場合があります。
まずはOBS左上の「ファイル」をクリックし、「設定」を選択。
すると「設定」が表示されるため、「詳細設定」を選択して移動します。
下までスクロールし、「ソース」に表示されている「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェックを外します。
注意）ハードウェアアクセラレーションはCPUとGPUで処理を分担する機能であるため、オフにするとCPU使用率が高くなる場合があり、普段からチェックを外しておくのはおすすめできません。低負荷のWebページのみを表示する場合や、ブラウザソースが映らない場合にのみチェックを外すようにしましょう。
OBS配信でブラウザを映そう！
ブラウザソースの使い方を理解していると、OBS配信でブラウザを映すことができるだけでなく、htmlで保存されているオブジェクトの表示や、ブラウザソースを利用したOBSと外部ツールの連携なども簡単に行うことができます。ただし、ブラウザソースはOBS上に少ない手順でWebページを表示することができますが、頻繁に操作を行うブラウザを表示する用途には向いていないため、ウィンドウキャプチャとの使い分けも重要です。当記事で解説したブラウザソースの操作を活用し、配信画面を整えましょう。
配信をより面白くするために
配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。
大きく分けて、
- 視聴者を覚えるYouTube/Twitchコメビュ
- 配信画面演出のScreen
- 収益化のための機能
の三つの機能があり、それぞれ下記のような目的があります。
| 機能 | 目的 |
|---|---|
| YouTube/Twitchコメビュ | 視聴者が配信に馴染めるようなやり取りをサポート |
| Screen | 視聴者とのやり取りを視覚的に楽しくする |
| 収益化 | 視聴者を大事にする形で収益化する |
CastCraftのYouTube/Twitchコメビュで視聴者ごとにコメントを蓄積することで視聴者全員を覚えて、配信中のダッシュボードで分かりやすく情報を表示することで、視聴者が常連化していくためのやり取りをサポートします。
特定の条件に当てはまった視聴者やコメントに対して、Chatbotやリッチな画面演出で視聴者をインタラクティブに楽しませる仕組みも作ることができます。
さらに、視聴者を大事に定着させながらも配信活動のための収益を上げる仕組みも提供しています。
CastCraftは上記のような機能により、配信者（ゲーム配信者やVtuber）が視聴者との関係を深めることを手助けします。
導入している配信者さんの事例としては、
等がいらっしゃいます。
導入されたチャンネルの総登録者数は5,000万人を超えており、これまで70万回以上の配信で使われています。
CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。