台V的多開視窗

linnil1
7 min readMar 15, 2021

--

各位 DD 們肯定知道多開程式 HoloTools ,那我們要怎麼改裝他,變成台V的多開程式呢

3/14 白色情人節 21:55 截圖 (使用 HoloTools 介面)

HoloTools 介紹

這是俗稱的 HoloTools 程式,由 dragonjet 開發

中文的使用說明(非官方,但是吹雪翻譯大大是重要的貢獻者)

https://fubukitranslate.tw/2020/holotools-introduce/

解決不能同時撥放的方法(這部分是刻意的,這是 Youbute 政策)

https://www.reddit.com/r/Hololive/comments/ixz1f4/how_do_i_get_holotools_to_play_multiple_streams/

或者是用同個作者開發的 extension: tubegrid

困難

他事實上是一個前端介面,而他會 call API 獲取目前的直播影片。

https://api.holotools.app/v1/live  # for Hololive
https://api.chooks.app/v1/live # for others

這兩個 API 是有開源的

如果使用體驗跟 hololive 一樣的話,應該要把第一個 API 導向我們自己架的 API 上,但問題是這個前端是沒有開源(open-source),所以這條路行不通。

第二個 API 倒是可以請作者幫我們加(我沒去問),可是台灣 vtuber 們不算一個 org ,所以類別應該會被放在 other ,而且台V越來越多,更新要一直麻煩人家,我覺得這樣不太OK。

解決方式1

簡單的方式是一個個手動加

Screenshot of adding link function in HoloTools

但仔細看會發現他的網址有這樣設計:

https://hololive.jetri.co/#/watch?videoId=id1,id2,id3

這也是 Holotools Portal (一個 chrome extension, source code: https://github.com/holofans/holotools-portal) 的設計原理。但有用過應該知道, Holotools Portal 的缺點是一次只能開一個。

解決方式2

能手動的東西就能自動完成,所以我想要在之前的 TaiwanV網站 中,加個按鈕可以一口氣打開所有正在直播的影片。

這件事不難,就是 call 我們的 API,從目前的 streams 中,找正在直播的,把他們的 id 用 “,” 去連起來。

"https://hololive.jetri.co/#/watch?videoId=" +
streams.filter((s) => s.status === "live")
.map((s) => s.streamId)
.join(“,”)

今天測試,有四位 vtuber 在直播,所以畫面最上方的按鈕會動態生成這個網址 https://hololive.jetri.co/#/watch?videoId=QVxPmhyz3E8,5Y8MUcZ33zk,lMLwH2obutg,gCrBvIPaRcQ

TaiwanV 網站,我在上面加個按鈕
此圖截於 2021/03/13 22:49 (使用 HoloTools 介面)

缺點是如果又有新的直播出現,沒辦法直接加進 HoloTools

我不是前端,我加這個按鈕有點破壞美感……

其實這個功能更適合在友站出現,因為我這個網站其實因技術原因收錄的 vtubers 有限,不適合超級大DD。

解決方式3: 擴充元件

後來想想剛剛的方式只是個暫時解決方案,那不然就用 extension 好了,破壞美感這件事就能推卸到擴充元件上了,而擴充元件是使用者自己安裝的。

運作原理也很簡單

  1. 我們用程式尋找頁面中的 Youtube 網址。(excuteScript)
  2. 然後做個選單,使得我們可以點選。其實可以直接放個 打勾icon 在網頁上,但很明顯我不會= =。(popup)
  3. 把有選取的 id 整理好再用 holotools 打開。(tab.create)

效果意外的好?

選單的效果

友站: 台V節目表 https://space-r.tw

我的 Add-on 跟 台V節目表 截圖

友站: The Virutal Records https://vt.cdein.cc/

我的 Add-on 跟 The Virutal Records 截圖

然後意外的發現 Chrome 跟 Firefox 的 extension 設定語法極像,我都沒有使用進階功能,所以這兩個 browser extensions API browser.*chrome.* 互換就好了

Screenshot of my extension running on Chrome

結論

程式碼放這邊,誰都可以撿去用,把介面弄得更乾淨漂亮更好,畢竟我寫的只是個簡單的玩具而已。

https://github.com/linnil1/taiwanv-holotools

然後順便玩 CI/CD ,我 push 程式碼後,Github action 自動幫我把 extension 打包好。未來有機會應該會寫一篇。打包好後,可以直接從 release 頁面下載 https://github.com/linnil1/taiwanv-holotools/releases/tag/latest

就這樣,雖然沒有上 production ,但是想玩的話,可以查查看瀏覽器要怎麼安裝開發中的 extension 吧。

話說 Holodex 在 v2.1 版會新增 multiview 功能,Holotools 說不定會退役。當然如果未來台V都能在上面的話,那是在好不過了。(目前能被收入的話,至少會有一定的條件)

最後別忘了按 clap 來鼓勵作者

--

--

linnil1

目前做生物資訊與演算法,過去做過 Machine Vision(Deep learning),維護伺服器(k8s, docker),部分IOT(rpi, arduino)