Try   HackMD

BABANANA Chat 浪Play(金剛直播)聊天室截取工具

這裡是浪Play直播(舊名:金剛kingkong直播)聊天室截取工具 :banana: BABANANA Chat :banana: 的說明文件。
這個聊天室頁面可使用OBS擷取或是網頁瀏覽器直接觀看，細節請觀看下方說明。

如果有更新改版，更新訊息都會寫在這個說明頁面。
使用上只要重新整理網頁就能更新。
註: OBS的網頁暫存檔(cache)有時候會卡比較久，要多重新整理幾次才會正常更新。

:fries: 說明文件 / 教學

使用網址:

  • 背景黑底版: https://banana.eotones.net/
    適合使用瀏覽器直接觀看，有暫停捲動功能，手機和桌機瀏覽器都支援
    3/8新增Google語音讀聊天室功能
    語音功能請認明Google Chrome瀏覽器才有Google小姐語音喔!
    一定要用Chrome開才有,桌機或手機的Chrome都可以
  • 透明去背版: https://banana.eotones.net/t/ (OBS專用版)
    OBS專用,無暫停捲動功能,OBS請儘量用這個版本

使用畫面:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

示範影片:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

:ramen: 使用方法

  1. 在首頁的輸入框中輸入你的浪Play直播編號
  2. 或是直接在網址的#後面加上你的浪Play直播編號
    (桌機的話請用最新版本的Chrome或是Firefox來開，以確保功能有完整支援到)

例如這是你的實況網址:
https://play.lang.live/2426076
只要把網址後的數字2426076加到#後面就可以直接觀看浪Play直播的聊天室了
https://banana.eotones.net/#2426076 (瀏覽器直接觀看用)
https://banana.eotones.net/t/#2426076 (OBS專用)

每次實況開播或重開後聊天室的房號都會改變，請重新整理聊天室網頁以進入新的聊天室

[可以使用的場合]

  1. OBS 的 Browser Source - 嵌入顯示在實況畫面上 (建議使用去背透明版)
  2. 直接使用瀏覽器觀看聊天室(電腦桌機或是手機都可使用) (建議使用黑底版)
    • 這可以給電腦沒雙螢幕的人直接用手機看聊天室
      • Android開發人員選項裡有個充電中螢幕就不會休眠的選項能開(開法請自行Google喔)
    • 使用Chrome瀏覽器可以到右上角設定開啟語音讀聊天室功能,這樣就不用一直盯著聊天室看
      • 語音功能只有黑底版有,目前語音只支援Chrome瀏覽器(Android上的Chrome也可以)
    • 戶外使用
      • 戶外使用語音功能時建議搭配耳機使用比較不會吵到人
  3. 嵌入支援網頁圖層的手機直播軟體 (建議使用去背透明版)

:sushi: 修改OBS裡的CSS

[更改背景顏色]

  • 透明:
body { background-color: rgba(0,0,0,0); }
  • 黑底半透明:
body { background-color: rgba(0,0,0,0.7); }
  • 全黑:
body { background-color: rgba(0,0,0,1); }

[隱藏禮物或聊天室訊息]

(看需求自行選用)

  • 隱藏所有禮物訊息:
.kk_gift { display: none; }
  • 顯示觀眾進入聊天室的訊息: (OBS版預設為隱藏)
.kk_come { display: block; }
  • 隱藏時間顯示:
.kk_time { display: none; }
  • 隱藏所有連線訊息: (連線成功,連線失敗,斷線重連這些會全部隱藏)
.kk_conn { display: none; }
  • 顯示重新連線訊息: (預設為隱藏)
.kk_reconn { display: block; }
  • 隱藏畫面右上的熱度和觀眾數
#tool_bar { display: none !important; }

[顯示數字編號ID在名字後面]

加CSS之前為: 名稱
加完後變成: 名稱(2426076)




.name_title::after{
  content: "(" attr(title) ")";
}

音量和語速調整指令

在Chrome按下F12,分頁調整到Console,然後輸出以下指令
(語音功能一樣只有黑底版有,還有調整功能要在進入聊天室之後再打)
(這個功能是所有人的留言都會有語音,和浪Play(金剛)官方版的浪花語音功能不同)

音量: (預設值: 0.5)




// (範圍: 0 ~ 1)
// 例: 0.5 = 50%音量; 1 = 100%音量
tts.volume(1);

語速: (預設值: 1.2)




// (範圍: 0.5 ~ 2)
// 例: 1 = 正常語速; 1.2 = 1.2倍速
tts.rate(1.5);

語調: (預設值: 1)




// (範圍: 0.1 ~ 2)
// 例: 1 = 正常語調; 大於1=語調變高; 小於1=語調變低
tts.pitch(1.1);

清除音量,語速和語調設定(改回預設值)



tts.reset();
// 輸入完後重新整理網頁

:pizza: 更新

  • 2020/05/22
    • 修正語音會重複跳針的Bug
  • 2019/06/02
    • 樣式更新,移除紅藍綠邊線.kk_border
    • 原本的顏色分類功能合併到.kk_time
  • 2019/05/05
    • 新增觀眾專屬顏色
    • 大概顏色算法: "#" + (16777215 - 浪Play帳號).toString(16)
    • 如果算出例外結果則用紅色取代
  • 2019/03/21
    • 瀏覽器版新增設定選項(點擊右上齒輪可以開關選單)
  • 2019/03/12
    • OBS版加入聊天室訊息預設值改成隱藏
    • (要改回顯示的話請參考上方CSS說明)
  • 2019/01/16
    • 完全移除jQuery,現在全部原生Javascript
    • 更改OBS版的顯示方式,現在改成固定顯示最新的30行留言
    • 修正有些台會抓不到資料的問題
  • 2018/11/26
    • 畫面右上角增加觀眾人數顯示: 熱度 (觀眾數)
  • 2018/06/10
    • 修正斷線不能重連的問題
    • 簡化一開始的連線訊息
    • 隱藏斷線重連訊息(可以用改CSS的方式顯示回來)
  • 2018/04/22
    • 新增音量,語速和語調調整指令 (請參考上方說明)
  • 2018/04/09
    • 修正假冒主播(同名帳號)顯示出[主播]標籤的問題
    • 新增隱藏香蕉禮物的CSS (請參考上方CSS說明)
  • 2018/03/28
  • 2018/03/22
    • 修正win10 chrome不能正常用google中文語音的問題(之前會讀到微軟中文語音)
  • 2018/03/17
    • 新增隱藏連線訊息的CSS (請參考上方CSS說明)
  • 2018/03/15
    • 新增時間顯示
    • 增加設定選單 (點擊右上設定可以開出選單,再點一次可以關閉)
  • 2018/03/11
    • 把一些比較常用的洗屏數字給縮短 (例如777,666,888那些)
    • 現在取消語音可以馬上停止了
  • 2018/03/08
    • 新增Google語音讀聊天室功能 (注意這是Chrome專用,一定要用Chrome開)
  • 2018/03/07
    • 新增斷線重連功能 (目前設定每15秒重連1次，最多嘗試10次，成功連上後次數重置)
    • 滑鼠停在名字上可以顯示數字編號的ID
    • 數字ID可以用CSS顯示在名字後面 (請參考上方的CSS)
  • 2018/03/04
    • 修正載入流程和一些小細節
    • 拔掉OBS版的暫停捲動功能
  • 2018/02/24
    • 新增上捲時暫停捲動機制和下捲按鈕
    • 新增熱度顯示和追蹤顯示
  • 2018/02/23 - 2
    • 新增禮物效果 (測試中，可能會有小bug)
  • 2018/02/23 - 1
    • 區分出首頁頁面，在首頁新增說明及頻道編號輸入框
    • 成功進入頻道聊天頁面時自動隱藏標題和輸入框
    • 新增瀏覽器未開啟Javascript的提示
  • 2018/02/21
    • 測試版上線

:banana: 所有BABANANA Chat版本

:hamburger: 建議 & Bug回報

:doughnut: 聲明

  • 這個網頁聊天室是做給喜歡Twitch直播文字聊天室風格的實況主，截取聊天室的另一個好處是方便把聊天內容給錄進實況影片裡。
  • 本站和金剛直播官方( https://www.kingkong.com.tw/ )無任何關係。
    • 金剛直播在2020/4/30已改名成浪Play直播
  • 本站和浪Play直播官方( https://play.lang.live/ )無任何關係。
  • 這個聊天室只會使用匿名連接，不用登入任何東西。
  • 聊天室會顯示**星號的字是官方那邊就被過濾掉，不是我這邊過濾的。
  • 建議使用最新版本的Google Chrome瀏覽器(推薦)或是Firefox火狐瀏覽器。

如果要分享的話盡量以這個說明頁面的網址來分享，
這樣可以方便觀看最新的更新內容和說明：

[ https://hackmd.io/s/B183d6iwG ]

tags: web,js, OBS
Last changed by 
 
Eotones
59664

Read more

nginx rtmp server

手機推流 --> nginx rtmp server --> OBS拉流 --> OBS推到實況平台 nginx.conf worker_processes 1; error_log logs/rtmp_error.log debug; events { worker_connections 1024; }

Sep 14, 2022
Javascript AJAX

jQuery 3.* http://api.jquery.com/jquery.ajax/ $.ajax({ method: 'GET', // "GET", "POST", "PUT" dataType: 'json', url: 'https://example.com/', headers: {}, cache: false

Nov 12, 2021
Content Security Policy (CSP) 筆記

Content Security Policy (CSP) 內容安全政策 Content Security Policy是寫給瀏覽器看的 他寫在從伺服端回應給使用者瀏覽器端網頁的HTTP Header裡 主要用來限制網頁中對外部的請求來源(例如:css,js(ajax,ws),webfont,img,video,iframe等等) 還有一部份是禁止HTML行內的JS或CSS運作 以及限制<form>表單的指向網址 過濾XSS語法是伺服器端語言的工作(例如PHP) 如果不幸過濾失敗的話CSP的功能可以阻止惡意語法在瀏覽器端運作

Nov 3, 2021
線上電子地圖整理

綜合 全球 Google Maps OpenStreetMap - 開源開放編輯的地圖 Bing Maps (Microsoft) 台灣 gov

Jul 1, 2021
Read more from Eotones
Published on HackMD