NodeCGの初めの一歩

ドク

NodeCG導入編

インストール(参考)
https://nodecg.com/docs/installing

sudo npm install -g npm
sudo npm install --global nodecg-cli
mkdir nodecg
cd nodecg
nodecg setup

nodecg start
http://localhost:9090 が立ち上がります。
npm init -y

package.json

{
 "nodecg": {
   "compatibleRange": "^1.0.0",
   "dashboardPanels": [
     {
       "name": "sample-panel",
       "title": "Sample Panel",
       "file": "sample-panel.html"
     }
   ],
   "graphics": [
     {
       "file": "index.html",
       "width": 1280,
       "height": 720
     }
   ]
 }
}

ダッシュボード作成
mkdir dashboard
cd dashboard

/nodecg/bundles/hoge/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>

graphicsを設定
mkdir graphics
cd graphics

/nodecg/bundles/hoge/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>

実行
/hoge/
node .

参考
https://qiita.com/Hoishin/items/36dcea6818b0aa9bf1cd


ライブ配信サービス
WEBRTC
ピクシブとさくらインターネットが2019年2月にリリースした、高品質なライブ配信を手軽に実現するリアルタイム動画変換サービス。
WebRTC と HLS を採用しています。
https://www.sakura.ad.jp/services/imageflux/livestreaming/

Apple HLS（HTTPストリーミング）
https://dev.classmethod.jp/articles/http-live-streaming/

PCの画面をリアルタイム配信
https://qiita.com/kotazuck/items/7ad1672c71aa38d6af6d

ImageFlux meetup
https://knowledge.sakura.ad.jp/19363/


この記事が気に入ったらサポートをしてみませんか？