WFU WFU

2014/01/25

CLR Browser Source Plugin 聊天室擷取

請安裝或更新 Microsoft .NET Framework 4.5.2 和 Microsoft Visual C++ 2013 才能使用在新版的 OBS 和 CLR Browser Source Plugin
如果您的作業系統沒有內建「微軟正黑體」字型，請自行更改適合的字型。


由於 OBS 的來源使用 "遊戲擷取" 有很好的擷取效能 (使用 "螢幕擷取" 較差)
但使用單台螢幕全螢幕遊戲時，螢幕畫面沒有其他位置可以截取聊天室在同一個畫面。

所幸 OBS 有一個插件可以幫我們在同一個螢幕能同時全螢幕遊戲並擷取聊天室。
OBS 插件 CLR Browser Source Plugin 所擷取的聊天室效果是目前最好的。




使用步驟:
[一]、到 OBS 論壇下載 CLR Browser Source Plugin 插件
https://obsproject.com/forum/resources/clr-browser-source-plugin.22/
分32位元和64位元，下載相對版本安裝到 OBS 的 plugins 目錄中。


[二]、安裝好打開 OBS 設定 CLR Browser Source Plugin



[三]、由於 Twitch 的聊天室 popout 網址無法在 CLR Browser  中使用，我們可以用 nightdev 提供的聊天室 http://www.nightdev.com/obschat/
這裡我就直接在 CLR Browser  設定他的聊天室網址和 CSS，並加以修改自己的頻道 ID 和適合中文字型的 CSS。

CLR Browser Configuration 設定:
(1). General:
  • URL
    http://www.nightdev.com/hosted/obschat/?channel=bigcode
    (bigcode 請改成自己的 ID 字串)
  • Dimensions
    聊天室預設 寬:600 高:300
請用 CLR Browser Configuration 調整 Chat 寬高，不要用 OBS 的編輯場景，以免比例不正確而導致 Chat 的字體 "縮小導致變小看不到" 或者 "放大導致模糊"。



(2). CSS:
  • 將下面框架中的 CSS 程式碼複製到到 CSS 頁面中
  • 放大縮小文字&字型，請更改這兩行
    font-size: 18px
    font-family: 微軟正黑體
    如果您的作業系統沒有內建「微軟正黑體」字型，請自己修改適合的字型。



      ::-webkit-scrollbar {
        visibility: hidden;
      }

      body {
          background-color: rgba(0,0,0,0.0) !important; /*背景，rgba(紅,藍,綠,透明度:0為完全透明)*/
          margin: 0px auto;
      }

      .chat_line {
          font-size: 18px !important; /*聊天室文字大小*/
          font-family: 微軟正黑體 !important; /*聊天室文字字型*/
          font-weight: 900 !important; /*聊天室文字粗細，900為最粗*/
          line-height: 1.30em !important; /*聊天室文字行高，1.05倍行高*/
          padding: .05em .05em !important; /*聊天室文字與前後段距離，0.05倍行高*/
      }

      .chat_line .nick {
          font-weight: bold;
          text-transform: capitalize;
          color: #fff;
          text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /*聊天室 ID 邊框顏色，可以把這段移除不加邊框*/
      }

      .chat_line .message {
          color: #fff;
          text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /*聊天室文字邊框顏色，可以把這段移除不加邊框*/
      }






      [四]、OK. 完成



      註:
      1. 使用 Hitbox.tv 可以參考 PTT 網友 Append  所發表的文章 http://www.ptt.cc/bbs/Live/M.1389226741.A.2A6.html
      2. 由於我不懂 CSS 只會改這樣...請見諒!