Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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.3k
VCborn夏祭り with NodeCG
wamo
August 20, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
Kiro を用いたペアプロのススメ
taikis
1
500
子育てで想像してなかった「見えないダメージ」 / Unforeseen "hidden burdens" of raising children.
pauli
2
300
今年のデータ・ML系アップデートと気になるアプデのご紹介
nayuts
1
540
ハッカソンから社内プロダクトへ AIエージェント「ko☆shi」開発で学んだ4つの重要要素
sonoda_mj
5
500
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
scova0731
0
370
AI時代のワークフロー設計〜Durable Functions / Step Functions / Strands Agents を添えて〜
yakumo
3
910
ウェルネス SaaS × AI、1,000万ユーザーを支える 業界特化 AI プロダクト開発への道のり
hacomono
PRO
0
160
Bedrock AgentCore Memoryの新機能 (Episode) を試してみた / try Bedrock AgentCore Memory Episodic functionarity
hoshi7_n
1
500
Sansanが実践する Platform EngineeringとSREの協創
sansantech
PRO
2
940
年間40件以上の登壇を続けて見えた「本当の発信力」/ 20251213 Masaki Okuda
shift_evolve
PRO
1
140
.NET 10の概要
tomokusaba
0
120
初めてのDatabricks AI/BI Genie
taka_aki
0
210
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
BBQ
matthewcrist
89
9.9k
What the history of the web can teach us about the future of AI
inesmontani
PRO
0
370
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
120
The Curious Case for Waylosing
cassininazir
0
190
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Navigating Team Friction
lara
191
16k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
60
For a Future-Friendly Web
brad_frost
180
10k
Thoughts on Productivity
jonyablonski
73
5k
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