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
IoT・Webの技術でOBS制御・ニコニコ動画風コメント表示をやってみた後の話 / #onli...
Search
you(@youtoy)
PRO
October 22, 2020
Technology
1
18k
IoT・Webの技術でOBS制御・ニコニコ動画風コメント表示をやってみた後の話 / #onlinelthacklt
you(@youtoy)
PRO
October 22, 2020
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
57
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
52
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
240
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
330
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
100
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.7k
What’s new in Android development tools
yanzm
0
120
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
1
5.8k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
190
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.8k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Connect 100+を支える技術
kanyamaguc
0
190
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Optimizing for Happiness
mojombo
379
70k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Embracing the Ebb and Flow
colly
86
4.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Six Lessons from altMBA
skipperchong
28
3.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Making Projects Easy
brettharned
116
6.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Gamification - CAS2011
davidbonilla
81
5.3k
Transcript
IoT・Webの技術でOBS制御・ニコニコ動画風 コメント表示をやってみた後の話 豊田 陽介 ( @youtoy ) オンラインLTハックLT @オンライン
オンラインLTハックLT @オンライン 豊田陽介(@youtoy) 自己紹介 普段は、某通信会社の研究所勤務 話題のものをたくさん 購入している気がする IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動
ガジェット好き その他 主催テーマ: ビジュアルプログラミング、IoT、 ロボットトイ、メカトロなど
余談:これも買ってしまった 映像スイッチャー ATEM Mini Pro (ATEM Mini) 話題のものは自宅に・・・ オンラインLTハックLT @オンライン
過去にやったこと: OBS制御 & ニコニコ動画風の コメント表示 IoT・Webの技術で オンラインLTハックLT @オンライン
OBS Studio の話 ビデオ録画と生放送用の 無料でオープンソースの ソフトウェア ⇒ 昨今のオンラインイベント配信でよく使われてる オンラインLTハックLT
@オンライン 今回の話の1つはこれをアプリ外から操作する話
デモ動画1: アプリ外部からのOBS制御 https://www.youtube.com/watch?v=aL36V95hkmc オンラインLTハックLT @オンライン
デモ動画2:コメント表示+合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& オンラインLTハックLT @オンライン
いったん、これまでのデモの補足 仕組みについてなど オンラインLTハックLT @オンライン
OBS操作の仕組み: WebSocket・MQTTでの リアルタイム通信 (開発はNode.jsとUIFlow) IoTでよく使われる JavaScript ビジュアル プログラミング オンラインLTハックLT @オンライン
全体構成(外部からのOBS操作) 画面タップで シーン変更命令 (UIFlow実装) シーン変更命令を 受信しOBSへ (Node.js実装) MQTT WebSocket M5Stack
PC OBS オンラインLTハックLT @オンライン
ニコニコ動画風のコメント表示の仕組み: HTML+JavaScript で実装 (アニメーションはライブラリ) GSAP オンラインLTハックLT @オンライン
全体構成(ニコニコ動画風コメント表示+音) Webサイト上の ボタン押下で メッセージ送信 MQTT PC グリーンバックの ページ上にテキス ト・絵文字を流す OBS
ブラウザ スマホ等 PC上の画面やカ メラ映像を合成 オンラインLTハックLT @オンライン 効果音を再生
オンラインLTハックLT @オンライン 画面を作る仕組み ブラウザ上の動的表示 (グリーンバック) OBS上でのカメラ映像 やカメラ+スライド等 OBS上で合成 実装は HTML
+ JavaScript
オンラインイベントのLTでデモも実施 https://youtu.be/w_ljw9S5zkE?t=5840 オンラインLTハックLT @オンライン
仕組みについて デモ動画を流した2つとも、詳細はQiitaの記事に!
(既存の類似サービスはあるけど) ニコニコ動画風コメント表示! ⇒ 実装は実質20行ほど Qiitaの記事で複数掲載 オンラインLTハックLT @オンライン
メインの処理部分 オンラインLTハックLT @オンライン
(既存の類似サービスはあるけど) ニコニコ動画風コメント表示! ⇒ 実装は実質20行ほど 独自実装なので、好きな機能を足せる! Qiitaの記事で複数掲載 オンラインLTハックLT @オンライン
デモ動画2でいうと、 効果音を鳴らす機能! 独自実装なので、好きな機能を足せる! オンラインLTハックLT @オンライン
さらに新機能を 追加してみた!
LINEアプリ連携! (LINE Bot開発との組み合わせ) オンラインLTハックLT @オンライン
デモ動画3:LINEアプリからOBSを操作 オンラインLTハックLT @オンライン https://www.youtube.com/watch?v=K2A2sBlboHU
デモ動画4:画面を流す文章をLINEで入力 オンラインLTハックLT @オンライン https://www.youtube.com/watch?v=zXj-Cy7aM94
全体構成(LINEアプリ連携) LINEアプリ上で 入力した内容を POSTで送信 MQTT PC スマホ等 オンラインLTハックLT @オンライン MQTT
Websocket HTTP リクエス ト 受信したテキスト に合わせて処理を 場合分け
主な追加実装部分 オンラインLTハックLT @オンライン LINEアプリ上で 入力された内容に よって場合分け OBSの遠隔 操作用の流れ ニコニコ動画風の コメント表示機能
と連携する流れ
コメントを画面に流す機能、 既存サービスは単体のアプリ ↓ OBS等を併用しなくても コメントを流せる
HTML+JavaScript で実装していたけれど
オンラインLTハックLT @オンライン HTML + JavaScript の実装なので・・・ Electron で背景を透過する仕組みがあれば・・・ あった! Electron
の補足
デモ動画5:デスクトップ上でコメント表示 オンラインLTハックLT @オンライン https://www.youtube.com/watch?v=Bb2HSTccF2E HTML+JavaScriptを Electronでネイティブアプリ化
追加実装の手間を減らして Mac上で動くアプリに (たぶんWindowsでもOK)
【余談】LT/LT以外にも 活用していきたいもの
Elgato Stream Deck https://www.elgato.com/ja/gaming/stream-deck 活用法を考え中 (まずは配信系?)
終わり!