線上課程心路歷程以及最愛用的OBS軟體介紹

發布日期:2022/02/25

緣起與歷程

記得在去年四到五月的時候,突然之間當日確診人數飆高,後來緊急之下疫情就進入三級警戒,過沒多久以後補習班就被正式要求要開始線上課程。

對於線上課程其實我一直都是非常期待的,畢竟教書十多年以來都是用傳統的白板上課,在現在線上資源這麼發達的情況下,其實線上課程也是一個新的趨勢,但一直沒有機會可以嘗試(一方面也是因為我很懶...沒有什麼外在驅動力實在很難想去做成這件事情XD),總算等到這個機會了,還不磨刀霍霍一下?結果因為線上課程的各種嘗試,也造成了我5月到9月原本準備國家考試的計畫,直接整個放爛…這又是另外一個故事了XD。

正式決定要採用什麼方法以前,觀摩了一些學校老師,或是其他補習班老師的上課方式。部分老師的作法是依然採用黑板的板書上課,並且搭配手機或平板做直播,也就是傳統的補習班錄影課程的方式,同時也是絕大多數的方式。而有少部分的老師則是直接開啟空白的畫布像是小畫家等等,利用繪圖板直接手寫上課的內容。

思考了一下我自己的情況,因為當時還沒有打到任何一劑的疫苗,所以壓根兒不想出門,家裡也算小沒有辦法再放下一個白板,那當然就沒有辦法使用板書來上課。而採用空白畫布搭配繪圖板的作法,我自己有因為想要學電繪而買了繪圖板,只是手寫出來的字跟我用滑鼠寫出來是差不多的,慘不忍睹到了一個連補教圈朋朋都忍不住說:「呃…怎麼會長這樣…」

這是筆者用AREY PF1061壓感筆的字跡,慘不忍睹到如果真的全程這樣上課學生一定會吵著要退費的=口=

測試了許久,覺得還是採用Power point的方式來上課好了。把講義絕大多數的內容打在ppt的上面,這樣就能夠大幅減少寫板書字醜的問題,只有在必要時才搭配繪圖板的手寫字,偶然的字醜就全當作是節目效果了(淚),於是就誕生了下面這個最初版的線上課程投影片。

所有的公式都使用Mathtype而非內建的方程式編輯器,整體看起來是相當不錯的(自己講)

初步嘗試oCam軟體以及其限制

而因為所有的內容都是採用預先打在ppt上面的方式,所以上課時間可以大幅減少寫板書的時間,只是學生還是需要時間抄筆記,這個是絕對沒有辦法省的。如果採用直播的方式,可能會造成有很多時間會乾在那邊等學生抄筆記,效率十分低落。於是就想到,那乾脆採用預先錄好課程的方式,再上傳到YT讓學生自行選擇時間觀看,就可以自己去調控要不要按暫停還有看的時間長短的問題,我真是天才RRR。

所以現下的問題就是錄製電腦螢幕畫面的選擇,並且同時在錄製的時候外接收音麥克風以及繪圖板感應,首選就是入門款,操作也相對簡單、設定也不繁複的軟體oCam,錄製出來的檔案也不大、整體的解析度調為1080x1920也是非常OK的,也因此誕生了我第一個世代(?)的線上課程。

第一梯的線上課程,因為當時手上有3個班,加上有另外一個進度不同的班,等於每個禮拜要錄4堂課,真的是快發瘋欸那段時間XD

當時教學圈子裡面,所有的老師都在拿出看家本領找到最適合的線上課程上課方式,不免俗的也會互相交流一下。嘗試了一兩個禮拜以後將影片傳給補教圈的前輩看了一下,前輩的感想是:

「沒有人臉、太少手寫字跡,沒有溫度。」

溫度??我後來想想也是,確實,約莫3個小時的課程都只有投影片的畫面,有時候想要比一個安培右手定則也完全無法展現感學生看,感覺就是個催眠曲,也沒有平常我自己上課的感覺,於是便開始思考怎麼樣能夠讓自己的影像畫面也同時出現在畫面上方。

最一開始當然先嘗試了oCam能不能做到這件事情,其實是可以的,但是錄影的畫面沒有辦法自在地調整,如果真的要為了這個付費的話,感覺也捏不下去花錢,所以為了這個教學上的溫度感,我就捨棄oCam這個軟體了。當然,你可能會說,反正只是一個暫時性的線上課程嘛,幹嘛這麼講究?

「要做一件事情,我們就要做到最好,才能夠進步。」這是一直以來我的堅持。

當然另外一方面也是,學生聽完課之後對於音質不是十分的滿意。oCam沒有音質相關的濾鏡,為了確保上課的品質,似乎也是一定要更換這個軟體不可了。

與OBS軟體的初遇

就在我真的想不到可以怎麼解決這個同時在畫面上有PPT以及影像的問題,然後無聊打開了Twitch來看看實況時,突然發現…

「欸?實況主不就是同時有遊戲畫面跟自己的攝影畫面還有聊天室嗎???」

依照「實況、軟體」兩個關鍵字下去搜尋的時候,就找到了Open Broadcaster Software(下簡稱OBS)這一套軟體,主要都是用於實況的直播,那拿來當作是線上課程的輔助軟體,也沒有不行吧?燈愣,結果就開啟新世界惹。後來線上課程告一段落以後,就憑藉著學到的軟體技術跑去Twitch開台,這也是另外一個故事了…XD

OBS軟體的下載與安裝

OBS本身是一個免費的軟體,直接google OBS,基本上來說搜尋結果第一個就可以找到了。在OBS的官方網站裡面直接按照你的系統是Windows或是Mac的,選擇下載即可,只要點進去他就會自動下載,下載好了以後點開安裝檔一步一步安裝。

為了證實他真的很好找,就順手搜尋了一下XD
官方網站的畫面以及點擊後自動下載
筆者自己是安裝在D槽比較省空間,大家可以自己斟酌

OBS軟體的畫面與場景設定

下圖是打開OBS軟體的時候會先看到的最基本的畫面。最後希望呈現出來的結果,則是以筆者平常線上課程較為簡單設定為例。這樣也比較符合我們這一篇文章的標題,如果想要研究OBS軟體在其他的用途,筆者有機會再寫幾篇文章進一步地說明。

在場景的部分,由於筆者自己會用來上課跟開實況,在寫這篇文章之前也測試了一下,所以有另外三個場景,如果是一開始下載的話是看不到這三個的

如果一開始看到的不是中文介面,可以在左上角的File(依照每個人的語言不同而有所不同)→Settings裡面,General的Language裡面做設定,筆者這邊已經是調整過語言的版本,所以就以繁體中文來呈現圖片了。

筆者線上課程呈現出來的最後成果樣貌,雖然現在經營的品牌名稱是「若芽」,但之前經營好幾十年的物理品牌是「馮馮」,就還是先暫用一下啦反正都自家品牌XD

我們會把整個畫面稱之為場景,而在上圖筆者線上課程呈現的最後結果中,可以看到有右上角的「視訊畫面擷取」、左邊主畫面的「電腦螢幕畫面擷取」,而整體的其餘畫面則包含LOGO的呈現、貼心小語以及上課標題,荷葉下背對的貓貓則是與LOGO和淺色畫面一同呈現來源的「背板」。所以我們現在的設置,就是要告訴OBS軟體,我們要分別從哪邊去擷取需要的東西放到這個畫面上面來,而這個設定就是在「來源」中處理。

按照前面的敘述標示如上,不同張照片其實都是同一人,只是有沒有化妝而已歐XD
圖為OBS中的來源視窗

首先是先擷取電腦的畫面來作為左上角的主要授課畫面來源,因此我們先將想要呈現的PPT檔案先開啟,並且在OBS軟體中的「來源」按左下角的「+」的符號且選擇「顯示器擷取」。

這邊先說明一下,筆者使用的硬體設備為雙螢幕,如果使用單螢幕的話就比較難在線上課程錄製時同時監控設定錄影的畫面,以及授課時要看的PPT畫面,所以會滿建議如果有志想要弄線上課程的朋朋,雙螢幕絕對是一個很讚的使用電腦環境。筆者後來都在學生問問題時,一邊回答學生的問題一邊打遊戲,十分愜意啊!

在「來源」視窗按下「+」以後會出現來源的選擇
可以在這邊key上自己希望的來源名稱,後面比較好辨識
顯示器的擷取因為目前是擷取主螢幕,然後又開著OBS的關係所以會有這種無窮無盡的畫面發生,這是正常現象不要擔心XD

筆者的習慣是用主螢幕來監控錄影的畫面跟品質,利用副螢幕來做為授課時看畫面的依據,所以PPT的全螢幕畫面是在顯示器2的位置。而同時作為視訊擷取的攝影機也是架在副螢幕的上面,這樣錄製畫面的時候看起來也像是在看著電腦畫面授課。這是參考實況主「Section」的視訊影像角度,喜歡呈現盯著學生看的朋朋也可以考慮把攝影機放在自己面前,或是挑一個自己喜歡的角度。

這邊說明一下為什麼不使用「視窗擷取」而是使用「顯示器擷取」,因為我們的最後的成果是希望可以在畫面上只有顯現PPT的畫面,而不希望包含視窗、工具列等等內容,如果採用「視窗擷取」的話,就算讓PPT全螢幕播放,也無法呈現像是筆者前面那一張圖的畫面歐。

上圖即是,即便右邊的畫面已經是PPT的全螢幕,左邊的OBS錄影畫面還是擷取到完整的視窗畫面的情況(請無視筆者凌亂的桌面…)
選擇顯示器擷取,就能得到想要的視窗擷取效果了喔,上面的畫面就是呈現出來的結果

再來我們要擷取的是視訊的畫面,這邊一樣是從來源的部分,選擇「視訊擷取裝置」,在新來源的地方命名一個自己可以辨識的名稱,並且按確定。如果視訊裝置有正確運作的話,就可以在裝置的地方選到正確的來源,並且在畫面上看到自己的樣子,如果沒有看到自己的畫面還請檢查一下是不是設備或軟體有問題歐: D。

筆者使用的是Logi的C922,因此這邊選擇的就是該裝置,如果有順利的話在OBS軟體的畫面上就能看到自己的影像

按確定之後,OBS軟體場景上面就會有兩個來源,分別是電腦螢幕的擷取以及攝影機的畫面。我們用滑鼠是可以自由自在的移動不管是螢幕擷取的畫面,或是攝影機的來源畫面,這都是OK的。而一般實況主其實設定到這樣就差不多了,只是實況主擷取的是遊戲主機的畫面(需要仰賴擷取卡)或是電腦的其他畫面,而且必要的話還會擷取聊天室的畫面,關於實況主的設定我們之後再另開一篇文章進一步說明。

兩個來源都成功設定的結果呈現

但是這樣其實是還不夠的,因為我們最後的結果還要加上可愛的LOGO、貓貓背板,以及每一堂課的上課進度及貼心小語(非常堅持貼心小語的部分!)。因此筆者事先用illustrator繪製了一張背板的圖,因為之後影片輸出的大小是1080*1920的大小,所以在繪製的時候也是直接先設定對應的大小來做圖,並預先保留PPT視窗以及視訊視窗的大小,並匯出為.png檔案。

筆者線上課程慣用的背板圖,以.png的方式儲存與匯出

現在我們要插入背板,同樣是在來源的地方選擇「+」以及圖片。並且在圖片檔案的部分選擇我們已經做好的背板圖檔的路徑,並按確定。

在圖片來源的地方選擇背板的檔案路徑
插入圖片以後的結果,如果插入的時候發現大小不合,可以再做調整直到符合整個場景的畫面大小

插入後會發現,圖片是順利插入了,但是相較之下我本來螢幕擷取的畫面跟攝影機的畫面都不見了。這個問題是在於OBS軟體的圖層排列順序問題,可以注意一下在來源的地方,目前因為圖片是最新插入的,所以是在最上層也就是最優先的權重,此時只要將顯示器還有視訊擷取的畫面往上移動,並且調整成我們原先背板預留的空間大小就好。

上圖是調整過後的結果,可以發現與最終想要呈現的結果並無二致了

而針對貼心小語還有課程進度的內容,一樣是要從來源做插入。在來源的地方按「+」的符號,並且選擇「文字」,就可以在文字的設定視窗之中輸入想要的文字內容,亦可以調整字型、對齊等等的設定。將文字插入以後,調整大小並且放到想要的位子,那就算是大功告成了歐!課程的進度內容也是相同的做法。

圖為插入來源的文字屬性與內容的設定框
設定好的最終成果,整體看起來是很讚的質感

可能有人會問說,那為什麼不直接把貼心小語還有課程進度都直接弄在背板上就好,還要另外使用OBS來做插入。是這樣的,因為一位老師一個禮拜,像我這種比較混的只有上一科高中物理的老師XD,也還有3個年級不同的進度要寫。而貼心小語的部分也會隨著學生的組成而有所不同,如果都要弄在背板上的話,每錄一個班級就要重新到illustrator裡面重新更改重新匯出,其實是一件非常麻煩的事情,所以才會選擇用OBS裡面直接做更改,會比較方便且快速歐。

OBS軟體的聲音來源與聲音的濾鏡

接著我們來聊聊關於最重要的,也就是線上課程音質的問題。像是筆者使用的是MSI的筆電,其實都有內建收音的功能,而額外購買的攝影機其實也有收音的功能,但有鑑於學生對於聽課音質的要求,因此筆者另外購買了hyperx quadcast的電容式麥克風,除了他有好看的RGB(這是重點!),更重要的是他有內建防噴罩,有時候常常講課講一講會太激動=口=就會爆音,這個是非常重要的功能沒有之一。

因此在設定上,我的OBS軟體設定就必須要收錄特定麥克風的聲音,而不是電腦內建的收音設備或是攝影機的收音。這個部分我們會在上方工具列的位置,選擇檔案→設定,並且在音效視窗的地方做設定。

音效設定視窗的畫面

在全域音效的「麥克風/輔助音效」中,選擇目前想要擷取音效的麥克風。而因為筆者在授課的時候沒有收電腦音效的需求,所以桌面音效的部分就直接停用,避免有時候不小心按到輸入法會有「燈燈燈」的聲音被錄進去=口=。如果朋朋有需要錄製桌面音效的話,可以考慮打開並選擇電腦的喇叭。

設定完成以後,如果要確認是否真的有收到麥克風的音效,可以觀察「來源視窗」隔壁的「音效混音器」中的「麥克風」是否有收音成功,如果有複數麥克風的話,可能要確認一下是不是收到其他麥克風的音,而不是你本來想要收的那個麥克風設備。另外提醒一下,設定的時候可以自己按照平常講課的方式說一些話,建議是落在綠色或是黃色的區域較佳,如果是到紅色的地方就表示音質可能會爆音,看影片的人耳朵會不太舒服,或是時不時需要去調整音量。

音量條有作用的話就是代表麥克風有收到音

而關於設定麥克風音質的濾鏡,要按音量鍵旁邊的小齒輪符號,並選擇濾鏡,在濾鏡視窗中可以於左下角的「+」符號,看想要添置什麼樣的音質濾鏡。筆者自己的習慣會加上「雜訊抑制」、「限制器」,前者是避免收到環境中的雜音、後者則是在產生爆音的時候可以自動不收錄。這個部分就依照朋朋的需求去做調整囉!

調整音質濾鏡的設定位置

線上課程OBS軟體錄影的影像設置

影像設置的部分就是最看電腦效能的部分了,而這一個部分也是要看每一位朋朋自己的電腦能不能吃得消同時運作OBS、PPT、收音設備、繪圖板、攝影設備等軟體,如果線上課程的過程可能還有開網頁、影片播放等等,那又會再更吃效能。筆者自己的建議是,在正式錄製課程之前可以先錄幾個不同的版本,來看看整個畫面的畫質怎麼樣,會不會卡頓來決定要怎麼做調整。而當然這個部分也會影響到錄製出來的檔案大小,也會影響到上傳Youtube的時間,所以就請讀者自行斟酌這個部分囉。

關於影像設置的地方,都是在OBS軟體工具列中的「檔案」→「設置」中調整,主要會有兩個地方,分別為「影像」以及「輸出」。筆者這邊提供的數值是目前測試起來錄製感覺是OK的,學生接受度也不錯沒有太多抱怨的XDDD。不過,如果是別的需求像是錄影遊戲的畫面,那可能使用筆者這邊提供的數值與設定,就不這麼合宜了。

影像的部分,由於學生的要求希望上傳的是1920x1080的解析度,因此這個部分我比較沒有選擇XD。而FPS則是影格率(單位時間的影格數),整個畫面看起來會不會頓頓或畫面移動時有糊糊的感覺,基本上就是在影格率這邊的調整。因為我們的線上課程是採用PPT的螢幕畫面或是視訊畫面,就算有動畫也不會如同遊戲畫面有太大幅度的畫面移動,因此測試之下覺得30FPS的數值是可以接受的,在錄製的時候也是相對來說整體電腦承受得住的設定。

筆者的線上課程影像設定

而在輸出的部分,必須要做輸出模式的進階設定。又因為我們是錄影,並非線上直播,因此設定的部分是「錄影」而不是「串流」。錄影路徑是設定你錄影的時候最後檔案存放的地方,筆者這邊會建議選空間大一點的地方來放置,避免錄到一半結果空間不夠大直接被斷掉重錄的慘劇…(嘿丟,筆者就有這樣的慘劇過)。當然為了避免這樣的情況,朋朋可以考慮錄成MKV的檔案在做轉檔避免這個問題,不過筆者因為課程有點多錄完馬上要上傳,所以就直接錄MP4的檔案,才造就了之前重錄的悲劇(泣)

而在編碼器的選擇上,如果是比較高階的顯卡,是可以選擇使用顯卡的編碼器,畫面的卡頓會有顯著的改善。但因為筆者的電腦顯卡過舊因而不支援OBS軟體的顯卡運算,所以就無法以身經歷跟大家說顯著的改善大概是多顯著了…。

而錄製課程最重要的其實就是在於寫板書的時候不要卡、有PPT動畫的時候不要卡,並且還是能夠保留足夠的CPU資源避免電腦直接當掉。因此在CPU使用率上我自己的設定是very fast,也就是較少的CPU使用率,這個部分就是端看讀者的電腦設備做調整,筆者對於這個部分的設定並沒有很好的研究,僅是測一個覺得還OK的數值、檔案大小也OK加上參考網路上的建議設定就使用了。

筆者線上課程的輸出設定,這邊提供給讀者參考

開始錄製線上課程

以上的設定都調整好後,就可以直接按下最右側的「開始錄製」開始錄線上課程了歐!

錄製的時候需要特別注意的畫面

而下方的REC則是會通知目前錄製了多長的時間,提醒自己是不是應該要視情況休息XDDDD,需要特別注意的是CPU的使用率,太高的話電腦就會明顯的開始發生卡頓,甚至可能會有當機的問題。如果發現CPU使用率太高的話,建議可以從設定的地方去調整錄影的參數,在保留畫質的情況下適當降低CPU使用率避免過度操勞電腦。

結語

自從oCam跳到OBS軟體以後,陸陸續續也弄了快半年的線上課程,OBS軟體可以說一直都是筆者的心頭好沒有之一,設置場景的時候操作起來非常直觀而且方便,加上可以搭配Twitch、YT的串流直播,不外乎OBS軟體也同時都是實況主愛用的軟體沒有之一。雖然一開始打開介面的時候一片黑,感覺很手足無措,但相信在筆者這樣的介紹下,讀者也可以逐漸上手這個非常好用的直播、錄製課程的軟體。

線上課程對於OBS軟體的需求並不高,即便沒有背板的設計,只是單純匯入影像的來源以及電腦畫面的截圖,也可以呈現出非常高質感的線上課程影片,而且搭配PPT的使用,也能讓老師可以避免上課一定要有一間教室、一個白板的初期高成本問題。不過筆者認為,其實線上課程最花時間的應該還是在投影片的製作、教材的編制,而最花錢的部分則是攝影機和麥克風的採購XD。相較之下OBS的學習反倒是比較輕鬆也不用花錢的,CP值真的是很高啊!

非常感謝您閱讀我的文章!您的支持和鼓勵是我不斷創作的動力。如果我的文章為您帶來了一些啟發或幫助,希望您可以透過以上贊助連結來支持我,讓我能夠繼續分享更多有價值的內容。不管金額大小,我都非常感激。謝謝您的支持和陪伴,期待和您繼續分享更多美好或實用的故事和經驗: )。