NodeCG
https://gyazo.com/188d6af77b15d2fc53b74d0752d67315
前端部份亦可使用各種相關框架
可透過後台的儀表板管理畫面資訊
可透過API取得外部資訊
使用例
https://www.youtube.com/watch?v=hQU1PlAh5_k
@shu33333: 249匹、なんとか無事走り終わりました！初代をやったあとの金銀、もう最高でした！名前付けで協力してくれた人、見てもらったみなさんありがとうございましたー！ https://pbs.twimg.com/media/FlzD8GyaMAEjYpy.jpg
安裝
1. 使用nodecg-clip
code:bash
npm install --global nodecg-cli@latest
mkdir nodecg
cd nodecg
nodecg setup
2. 從GitHub clone
code:bash
cd nodecg
npm install
npm run build
執行
1. node index.js
2. nodecg start
預設儀表板網址為 http://localhost:9090
架構
Bundle
包含整個前端與後端的套組
Graphics
實際顯示在直播畫面的頁面
Dashboard
操作顯示畫面用的儀表板頁面
Extension
伺服器端用的控制畫面功能
傳遞資料
Messages
進行暫時性的資料存取，主要用於事件觸發
除了字串和數值之外，也能存取物件等JavaScript的資料型別
使用nodecg.sendMessage()傳送、nodecg.listenFor()接收
Replicants
進行永續性的資料存取，資料會以JSON實際儲存於.rep檔案內
使用nodecg.Replicant(name, *namespace, *opts)取值
可使用options賦予預設值
可藉由namespace取得其他bundle的Replicant
使用.value屬性更新
nodecg.Replicant('title').value = 'New Title';
亦可使用nodecg.readReplicant(name)取值
nodecg.readReplicant(name, (callback) => { ... })
實作
初始化Bundle
code:bash
cd bundles
mkdir counter
cd counter
git init
echo /module_modules/ > .gitignore
npm init -y
簡易計數器範例
code:bundles/new-layout/package.json
{
"name": "new-layout",
"version": "0.0.1",
"nodecg": {
"compatibleRange": "^2.0.0",
Bundle對應的NodeCG版本
code:bundles/new-layout/package.json
"dashboardPanels": [
顯示於Dashboard的控制面板
可用width指定面板寬度
code:bundles/new-layout/package.json
{
"name": "sample-panel",
"title": "Sample Panel",
"file": "sample-panel.html"
}
],
"graphics": [
顯示於Graphics上的頁面
code:bundles/new-layout/package.json
{
"file": "index.html",
"width": 1280,
"height": 720
}
]
}
}
控制面板
code:bundles/new-layout/dashboard/sample-panel.html
<!DOCTYPE html>
<html>
<body>
<button id="increment">+1</button>
<script>
const incrementEl = document.getElementById('increment')
const countReplicant = nodecg.Replicant('count')
incrementEl.addEventListener('click', () => {
countReplicant.value += 1
})
</script>
</body>
</html>
顯示頁面
code:bundles/new-layout/graphics/index.html
<!DOCTYPE html>
<html>
<body>
<div id="count"></div>
<script>
const countEl = document.getElementById('count')
const countReplicant = nodecg.Replicant('count', {defaultValue: 0})
countReplicant.on('change', newValue => {
countEl.innerText = newValue
})
</script>
</body>
</html>
Bundle
提供串接各個社群網站的API
相關連結