OBS Studio 虛擬攝影棚開講:如何在 OBS 視窗中互動操作網頁內容或教材?

image

在 OBS Studio 中可以透過「BrowserSource」與「視窗擷取」這兩種方式,將網頁的內容呈現在 OBS 中,做為您教學或是錄製影片的內容!

如果您已經擁有雙螢幕,下面這兩種方式可以讓您針對單一個網頁或是多個網頁,進行互動操作!

image

一、單一網頁請用「BrowserSource」

1.請在「來源」面板選按「BrowserSource」,設定來源名稱或是使用預設值都OK。

image

2.請輸入要顯示的網址及視窗的寬度、高度

image

3.在剛才加入的「BrwoserSource」來源上,按「滑鼠右鍵 / 互動」

image

此時會出現「與「BrowserSource」互動」的小視窗,它就是 OBS 內建的基本功能瀏覽器!您只要將此視窗移到另一個螢幕上,在上面進行網頁的操作,OBS 上的「BrowserSource」視窗就會同步顯示。
image

※ 20200324 更新:

將此「瀏覽器視窗的 overfollow-hidde CSS 屬性刪除,就可以用滑鼠捲動的方式顯示超過一個網頁頁面的內容!




二、多個網頁請用「視窗擷取」

如果您需要同時開啟多個網頁操作時,可以使用「視窗擷取」來源的方式,將瀏覽器視窗加入 OBS 中,若無法正常擷取時,可以參考之前分享的文章「OBS Studio 虛擬攝影棚開講:為什麼無法擷取來自網頁的教材視窗,都是漆黑一片?Google Chrome、Firefox、Edge 都一樣?


image
image

如果您只有一個螢幕,其實也可以透過先前介紹的方式「OBS Studio 虛擬攝影棚開講:最牛畫面擷取方式「顯示器擷取」,不論任何內容,通通全都錄!」,就能將所有螢幕上的操作都錄製下來!

以下畫面就是在進行資策會「台東晨光學苑 Webduino 遠距直播課程」的實際使用 OBS 的情形!
在 OBS 軟體中操作的 Webduino Blockly 網頁畫面,其實是來自左邊的 Chrome 視窗。

OBS雙螢幕畫面


20180120_210437

※ 延伸閱讀:

留言

這個網誌中的熱門文章

免費影片剪輯「威力導演 365 基礎版」,不用輸入序號,只要註冊會員即可下載使用!

剪映好用的字幕「簡體轉繁體」工具在這裏,別再找錯了!

教學百寶箱:🎡 Wheel of Names 命運轉盤,決定同學抽籤尖叫時刻的課堂互動線上工具!

教學百寶箱:Sizer 幫您記住視窗大小與位置,以後不用每次都辛苦慢慢拖拉滑鼠調整!

讓 Slido 成為您教學現場或遠距上課、線上會議的互動應答好幫手!