Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VCborn夏祭り with NodeCG
Search
wamo
August 20, 2022
Technology
0
1.1k
VCborn夏祭り with NodeCG
wamo
August 20, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
3
130
【ログ分析勉強会#5】Elasticsearch/Kibana のパイプ型クエリー言語ES|QLの紹介 ~ Pandasと一緒にログ分析してみた
nobuhikosekiya
0
160
PREEMPT_RT over the years
ennael
PRO
0
290
入門 バックアップ
ryuichi1208
3
370
k6を活用した再現性・拡張性の高い負荷試験基盤の構築
biwashi
11
2.8k
How CERN serves 1EB of data via FUSE
ennael
PRO
0
15k
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
310
山手線一周のパフォーマンス改善
suzukahr
0
110
低コストで実現する社内文書RAG機能を搭載したAIチャットボット開発
takapy
3
560
Valuable Software Engineering
avandeursen
0
250
【shownet.conf_】ネットワークテストの最適化と利便性の追求
shownet
PRO
0
230
Hazard pointers with reference counter
ennael
PRO
0
100
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
403
65k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
550
RailsConf 2023
tenderlove
28
830
YesSQL, Process and Tooling at Scale
rocio
167
14k
Practical Orchestrator
shlominoach
185
10k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Web development in the modern age
philhawksworth
205
10k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Transcript
VCborn夏祭り with NodeCG NodeCGで作る配信レイアウト 1 1
そもそものきっかけ 2 2
TwitterのタイムラインとYouTubeの チャットを融合したい 3 3
OBS単体では無理 4 4
ただ一からシステムを作るのは面倒くさい 5 5
RTA in JapanやGDQではNodeCGなるもの を使っているらしい 6 6
って何だ? 7 7
8 8
9 9
NodeCGは 動的な配信レイアウトの作成ツール 10 10
値をリアルタイムで配信に 反映できる便利な奴 11 11
詳しいことは自分で調べてね 12 12
VCborn夏祭り向けに作る 13 13
記事を参考にReactやwebpackを導入 https://blog.livewing.net/nodecg-react 14 14
操作側の見た目をイイ感じにするためMUIを導入 15 15
配信側はカスタマイズ性を高めるため Tailwind CSSを入れた 16 16
チャットを作る 17 17
Twitter-liteでやろうとしたが... 更新されていない Stream APIが1.1のみ 18 18
Twitterにはtwitter-api-v2のStream APIを使う https://github.com/PLhery/node-twitter-api-v2 19 19
YouTubeにはyoutube-chatを使う googleapisでYouTubeチャットを拾う方法が分からなかった レート制限がないのでありがたい 20 20
メッセージを配列に追加する関数 21 21
何となくで作って完成 22 22
とここで問題発生 23 23
チャットデータは更新されているが 自動で反映されない 24 24
1秒ごとにStateを更新することで強引に対処 25 25
完成! 26 26
今あなたが見ている画面が完成物です 27 27
詳しい解説は後日ブログに投稿します 28 28
wamo https://wmsci.com 29 29